So in this lesson, we're going to be wrapping up our local host so that Jason fake Jason Placeholder
data, so on the Jason server, creating a local Jason server that we can output content from and then
creating the interaction with that content.
So first we load all of the Post's information.
So these are all the posts and they correspond with the content we have in the database.
So for the database we have it one, ID eight, ID 12, and we can also select and update the content.
So if you want to update it and that will also update the corresponding post in the database.
So there that other one updated.
And also that once updated and then also we have an option to delete.
So let's go ahead and delete with the ID of eight.
So it's going to delete it out and remove it from that database, provides the user some information
about what's happening.
And if we want, we can also create a new one.
So doing Hello World.
And so this is only adding in the title.
There is a default, Arthur, that's set.
So adding to the bottom there, the hello world.
And then that's also added into the database.
And then this can be updated and deleted the same way.
So we're going to be practicing making the put as well as the delete methods in this lesson and also
debugging and troubleshooting and making updates to the application, the outputting the posts to the
page and then also updating it so that we can select the posts and update them.
So edit them and update the titles of the posts.
So let's create and using the page contents, we're loading the data into the page contents.
So this is where we can construct and start create the elements.
So creating a main element that is just going to go within the output and clear out the current contents
of output.
And creating an elements, I'm going to give it a variable name of mean and the parent for the mean
is going to be output and the element type is going to be a div and then there's no HTML that we're
passing in.
So there's going to be a blank element that we can use.
And as we loop through the data that we have available to us, so take data and then using for each,
we're going to loop through each one of the items.
So it's going to return back the elements and within the console will first log out the element content
so we can take a closer look and see what we've got to work with.
So we want to ultimately output this information to the page.
So let's select this content and we're going to select it.
So it's really easy to update it.
So adding in the title information and then also we can update the author information so it creates
some inputs and set the values of those inputs to match.
So the first one is going to be input one.
So just call it in one and.
I got actually shortened to create my element because it's rather long and so do a quick replace of
the crate in my element and I just call it CME.
So just update all of those.
And so now if we want to create the element, we just use the CME function.
So the parent that we're adding it to is going to be mean.
The type of input is going to be input and there's no values for the input.
So we can select one and we can set up the value of the input.
So having this as element title, so that will add all of them to the page and I'm going to add some
styling so that we can distinguish between the elements.
So for the box, let's set it up as a display block and settle with to be 70 percent and border one
pick solid.
So that has some border to distinguish it.
And for margin, we'll do top and bottom of five picks and left and right of auto.
So when we create the main object with class list, we can add the class of box to it.
So it's going to apply some styling to each one of the items.
And actually we're going to do this inside of here.
So as we're iterating through, we're going to have the separate containers for each one of those and
for the box inputs.
They can have a width of one hundred percent or maybe more to it 90 percent.
Their display will be block, so take up the full available width and we can also update them to have.
Some some padding around and also an add in padding to the box object.
And apply the box sizing to all the elements.
So of border box, so that way we have all of the inputs there and as we're constructing the inputs,
so we also want another input to the main, so creating another one.
And this can be also in put and this is our second input.
So this is where we're returning back the author information.
So now we've got the title and the author, and then let's add in some buttons just below.
So this is going to be where we've got some buttons.
And we're going to have all of the action buttons here, so that's going to be just creating a regular
diff
and adding up to Maine and then within the buttons Divx.
Will create some buttons so one can be the first button that we're creating and this is going to be
appended within the BTE buttons object.
And this is going to be a button and on this button, it will say update.
And button two will be a button as well, and this one can say delete.
So these are going to provide us the options.
So we've got update and delete buttons and we can add event listeners to the buttons.
So we're constructing the option to update and delete each one of the elements on the page.
So just doing a four each for them.
And also, let's handle this within our function.
So just make the item.
And it'll just take in the element information.
And let's just make sure that we've got all of the details that we need, so as we're looping through
the page contents, we'll make each one of the items.
So that's still working as expected.
So now within the buttons themselves, we can add in the event items that will update and also delete
them.
So the first one that we want to look at is button one and add an event listener to that.
So BTN one, add an event listener and event that we're listening for is click.
And when the click event gets triggered, then what do we want to do?
And we ultimately also want to remove the main whatever button two gets clicked.
So that's or actually this is just BTE and this is BTE to.
So within the buttons, now that we've had event listeners, we want to construct the object that we
can make the Futch request to.
So we're we're making the update to the item.
Let's first construct JSON object.
And it's going to be give it a name of Jason.
So this is ultimately going to be the content that we're sending within the body and we can get that
information.
So we make sure that we're structuring it the same way as here where we're constructing it.
And the various options.
And then we're posting it within the posts you URL, so all of this.
And we'll create a separate function to handle that update item.
And for the update we want to pass in the JSON data, so we'll pick up the JSON data and we have to
sign title and we'll have another one for JSON author.
And since this is already going to be contained within a JSON object, we can just use the JSON that's
being passed in.
So let's add these values for Jason and we'll pick them up from the inputs that we've created so far
and input one that whatever the current value is.
And then for the author, it's going to be input to add whatever the value is.
And so for the update of items we're just passing in the Jason value so far.
And we're also going to have to pass on the main element or we can just remove it whenever we've done
the update of the item.
So this is going to be making a put method request.
We're going to do a JSON String Afie of the Jason content and for now we can just put it into the console.
And it does require actually some parameters that we need to pass in the ID.
So we need to forgive.
So we need to pass in the ID.
So for the update of the item, we're going to need the ID value and then add ID into it.
So when we update the item.
We need to get the element ID.
And that's part of the route to make the update so clear and do an update and selecting with Element
ID number one, we're sending the new data information over to do an update to the server.
So let's also check to see if the update has taken place and write a new content and then hello world
and do an update of it.
So it's updating the database content.
So let's also add the option to send a delete request.
So this is going to be deleting it from the existing content so the update can stay the same.
We might want to send a message over to the user.
That update has been completed.
But the content here, as long as you're pressing update, it will match whatever content we have within
the database and then we can always do a reload of the content.
So if I was to update it and if I refresh the page, we get that updated content because this is actually
being saved within the database.
So we're able to remove out the ones where we've got undefined and I'm just going to put my name into
all the undefined ones and then just go through and update them individually so that we make sure it
can double check.
Just make sure that everything matches the content, all matches.
And now let's add in the option to delete the item.
So for the delete, it's going to be a fairly simple it's just a fetch request to the ID and to this
end point, so we could as well construct the end point here instead of having the ID.
So that's another option that we have as well.
So in this case, let's construct the endpoint and the endpoints we're getting is from the IDY and so
that's routing over to posts and whatever the current ID value is.
And then we just make a futch request to the euro that we have.
And for the parameters, this is going to be an object and we just need to specify the method, delete,
and this is going to be a string value.
So taking the delete method and that should actually remove it from the database.
And also we want to remove out the main element, the main container, so just completely remove it.
So just to remove of that main element.
So let's see if we can remove out an item from the database, will remove this one here.
So select delete snuffer is gone and we delete a bunch of them.
And not to worry, we can always add new ones in.
So now we should have four posts within the database, which we do.
And even if we load the posts, everything is consistent with what we have on the page.
So that's how we can create the interaction to the local data and also load out the content on the page.
So let's apply some styling to the application and also we might want to have some messaging to the
user that we can let them know what's going on, whether we've made some updates and so on.
So going into the code.
And with an output
and actually within the main container, we'll add we'll create another.
Object, and this can be our main message object, and so just using the same structure that we have,
we can contain it within the container and have it as a div.
Message area, so this will provide us a way to have a message area to the users
and ideally maybe we need to put it near the top.
So that means that we need to reconstruct some of the content of the page and we need to prepend instead
of append.
So maybe we want to create another option here to prepend or to append.
So let's create another one and this one's going to prepend and we'll just call it CMT.
So that will give us an option if we want to prepend content.
So loading them near the top gives us the message area and the ability to load the posts.
So even if we have a lot of posts that gives us the area that we can provide the messaging into.
Now as well, a lot of times you might be doing this with regular HTML, so you don't have to worry
about where you're positioning the elements, but that's how you can do a JavaScript where you can prepend
and append.
And if we go over to the HTML, if we do an inspect of the HTML code and see that we've got the content
prepend.
So what it did is it just added to the beginning of the main container as opposed to adding it to the
end of the main container that we've been working with.
So now whenever we get the response back from the server, so where we got the ad post, we also might
want to add the actual post to the page.
So we want to add it to the top of the page.
So we do get the console message being returned back from the server, but we're not going to actually
see the post until we do a load of the posts.
So let's add that optioning as well.
And also I wanted to add in the value of the ID.
So this is going to be the I'll give it a value of my ID and this can just be a div at the top.
And added into main.
And returning back that element I'd value, so that was the IDs at the top of the main element.
And then we can apply some styling as needed to those as well, so what we want to do as well is whenever
we're adding creating a new item, we want to make the item.
So all we need to do is pass in the.
Dieter.
That we're getting return back.
So add that option in and we've already got it as data, so let's just do a make item of the data content
that gets returned from the server and we'll give it a test.
So that added in that new item at the bottom and also double can always double check within the database
just to make sure it's working.
So test, we've got an idea of 15 and that also added it to the bottom of the page.
And then these are also we're able to update it and as well we're able to delete it.
So all the functionality is there because we're using the same model that we use for the function to
create the page elements above.
So we're able to still have that same interaction for it as well.
So whenever we make an item, let's create a function for function, and I'll call it my message and
it'll take in whatever HTML that we want, and I'm going to be playing the entire HTML to your message.
So this will give us a way to communicate to the user whatever is happening so we can send over a message
value.
And this can I use the tactics there so for sending in the HMO object and let's get data ID, new item
made.
So let's try that out and see what happens within the Massachusetts and new item made, ID 15.
And then whatever messaging you want to send to the user and as we're updating, so let's go over to
here where we're updating the item.
So element ID.
And updated, and then here we can write out that it's been deleted.
So this way, the user is going to know what's going on, deleted number nine, updated 12 and so on.
So it's got the full communication whenever we're making any updates to the data.
And that's all being done.
So now we're ready to apply styling to the page elements and go ahead and test it out, make sure that
you've got the functionality that you want.
And next up, let's apply the styling to the page elements.
So selecting the element content.
And actually, I want to center all of the elements within container.
So what's in the container, we'll do a text, a line and central line and also to a margin of order
for the elements.
So that just centered that content there for the load posts.
Right in a class for Lord posts.
And let's set the display to block what is going to be 50 percent font size, sixty one point five p.m.,
et cetera, background color to it.
So this can be bluish color or blue color and then the font can be white
and going into the load posts button.
So it's as button to class list, add and add the class of load posts.
So it's just applying the styling to the page elements and do margin of order for it.
So to center it.
So we've got a big button there to load the posts.
So whenever that gets clicked, that's going to load the posts.
Let's create one for the message.
And this can have a font size of one
and the color, so make it slightly off block.
Allowed some padding.
And now let's apply to that message element, so message elements, class list and the class of message
to it.
So it gives us a little bit of styling around that.
Also, maybe we'll add in a border.
So added in some styling around the message area, let's also update the input fields.
And updating the input fields for all of the inputs, or we could just do it for the being container
inputs.
So we've got it ready for the box inputs.
So how about we do separate input here?
And I'll just give it a class of my in so that we can update the inputs and actually that's not going
to look good at 90 percent.
So let's do a separate, separate class for it.
So this is just further info for the selection of the info items.
And in.
To this element where we've got the input and the button, so I'm going to add the select info to both
of those.
So where we've got the button to create new so for button one dot class list, go ahead and add the
class of select info and then also for the input that we created.
And we've got quite a few elements here on the page.
So where we're creating an input and that's actually an existing one.
So we didn't actually create that one.
So other classless to that as well.
So as we're updating the elements, the width of 40 percent and display and we'll do an inline block.
And maybe even do 30 percent make those smaller?
So let's do a height for these.
For iPIX.
So nice and big update the font size.
And that we can just have as the title area.
So create new, so that actually is going to create a new one.
We get the message here at the top.
Let's apply some styling for the inputs within the box, so add some margin.
And we can do an auto for left and right.
Also, let's update the font size to one point two a.m..
And then for the buttons.
Let's add some padding around these.
And then for each one of these, we've got two of them, so we've got the update and the delete can
also set a default width for them and update the cursor to pointer.
So they're nice and clickable buttons.
So for the buttons themselves, these are also going.
So these input buttons and update, they're also contained within a div.
So this way we can select a mean input div.
So this can be kind of like a dashboard kind of options that we have for the buttons and we can also
select the first item as well as the second item.
So using the first child pseudo class.
And set the background color, so for updates, let's set the background color to green and then for
last child, let's get the background color to red.
And so I thought to read and then for dashboard itself.
Well, we'll select the color of the elements to be white, and that should just be color.
And now let's go back into the code and where we're creating that parent device before we're adding
the buttons, we're going to add the class of dashboard to that device.
So it's a pleaing appended to this buttons div.
So buttons and class list add and add the class of dashboard to it.
And child, and this is where we just need to specify the child that we want to apply the color to.
So selecting and let's do that.
And the child.
And have the color be applied of red to this.
And we need to also specify that these are the buttons.
And for the buttons, said the text, to be white, let's make the font size big.
And maybe that's a little bit too big.
So just keep that one and we can do also border radius to around the borders of the buttons and also
for the buttons.
Let's create a hover effect.
So now that we've added colors, we can add a hover effect with opacity.
And then, of course, you can apply styling and make the updates as needed.
Thanks for this lesson are to make sure that you've got the page posts being output within the HTML
so that the user can interact with them, they can select them.
You can also put them within input fields.
That's going to make it a little bit easier in order to make updates to the title and the author.
So create the event listeners so that the user can select either to update or to delete the page posts
and also provide feedback to the user.
So some type of messaging so the user knows if they've updated what they've what action has been taken
and then send the corresponding put or delete method to the JSON server.
So for the update, get the data from the input fields and create it as a JSON object, sending that
over to the JSON server, using the put method.
Also for the delete select element ID from the database that's being put to the page and then remove
it from the JSON database, sending over the fetch request to delete using the delete method, also
apply, add staling, debug the application and work through it just to make sure it's working properly,
that you can load the posts, you can create new posts, you can update posts and you can delete posts
all being done from the front end code for the user to be able to interact with the data within the
JSON database.