Welcome to part three of the Jason Placeholder API Testor, so we've completed the application, applied
some styling to it, we can select the posts individually and that outputs them to the page and he posts
that is shown it's editable.
So if we want to make changes to the post, we can do that and update the body contents and then save
it to the server.
The server gets the new saved item and it sends it over to the server.
We can also and it does a response box so it automatically adds to the page.
And so we've got the idea for an idea for added twice.
We can delete any of the items on the page as well.
So we added in the delete method request, we can load all of the posts that are currently available,
so just appends it to the output area.
So these are all of the posts.
Select any one of them, make updates to them, and whenever we make updates, save it to the server.
It's going to add the newly updated version with the ID at the top.
You can also select delete any one of them.
And then also in addition, you can add items and content.
So add objects and that just automatically adds it to the top.
So it gives it a new ID and then you can select these and update them, save them and also delete them.
And the reason it's throwing an error there is because this is still the testing server, so the other
up to I.D. one on one, and as we're trying to delete something above the one hundred, so we only have
the all of the posts and this is the default data.
So it's not actually updating that database.
So we can we can throw errors.
And some of those errors, they're not actually errors within the code.
They're errors because the server is a testing server and it doesn't have over ID 100.
In the last lesson, we have the ability to load all of the posts.
We also have an option to add new posts.
And then whenever the user selects them, we can make those posts editable.
And then we also have the ability to send the data over to the server and it's already structured within
that post format.
So it's going to allow us to very easily post and put that content to the server.
So instead of logging it out to the console, will create a function to handle put item and then whatever
the JSON data is that we want to send to the server.
So we have to do is string ify it and then we can post that item.
So one of the other values that we also need is to get the ID so past that into the put item function,
so already have the temporary object within JavaScript object format and then also just to distinguish
the item as we're going to need it for the URL path, we can get the info ID so you can also get it
from the JSON ID.
So it's going to be the same thing.
So it's up to you.
We can pass it in as I as just state as well as that information is already being passed.
So we want to grab the ID value as it's going to be part of the route where we're putting the information
and then the rest is going to be contained within the body.
So getting the JSON and ID value and then also lets output the adjacent object entirely as well and
save load the posts, click it and clear the console.
So we're saving it.
We're getting the road for one hundred, which corresponds with the value also for the user ID.
We can also get the user I.D. because it looks like it is changing.
So it's not always one.
So selecting the user ID value so that it corresponds with post data that's being output.
So let's create the put request, and this is actually going to be very similar to what we had when
we're doing the post, so we could as well create a function in order to handle that.
So selecting all of this information.
And I'll just create a function.
Make request and then the content that we need to pass in there.
So while passing the JSON object and then instead of strengthening the body, we can contact that and
just pass in the adjacent.
So that's the only value that's going to be changing from our request.
And this is going to make it easier for us to make those requests.
So add to page data and we want to make the request object.
This is the content body that we want to pass on.
So this is our JSON object with the user ID of one.
And the U.S. is actually going to be the same, so we don't need the all in here.
And so it would just make the request with Jason, we'll try it out just to make sure it works.
So we create a new one.
That will create the new post idee.
And we also want to specify the method, so we want to send it as a post, and this also should be dynamic.
So just call it math for the method.
And that way we can dynamically update and make those requests.
So for the request itself.
Just double check and make sure it's working.
So we are passing through the title The Body and adding a new item.
So we're we're making the selection and doing the put item.
We can simplify this and do a put request.
And get that temporary object, so we don't even need an extra function in order to handle that, or
if we want to keep it like this, we can just keep that that function and then do the.
Make request.
Within this function separately.
So depending on what's easier for you to read, so make the request and the method in this case is going
to be a put request, so load all of the elements
and make an update to it.
And it cleared, so send it to the server.
And we also need to put to a specific path for the euro, so we also need to pass the European.
So it looks like we need the URL value as we're posting to a specific path.
Let's send the URL in and add the URL and copy.
Copy that you are.
So within the put value and we want to post it too and forward slash, then let's concatenate the JSON
ID to it.
And so this is going to pass through the usual object.
So try that one more time.
And clear, so save to the server.
So we do get the response back from the server on our updated item, so what it's doing is as it's still
matching the same pattern as before, where it's just making an update to our list.
And of course, because this is a testing API, it's not saving to that end result.
But we do have the ability to make the updates and save that updated data, send it over to the server,
and then this is the response back from the server.
So we do see that it matches the same parameters as the one that we saved.
And so also, whenever we're saving it, we want to remove out the button and then also remove out that
active class.
Or we might want to just released all of the posts, so there's a few options there on how to handle
that.
So I'll do this as well, where when we do the safe, we can only do it once and then when it gets clicked,
we're going to remove out the editable.
So we loop through all of them and editable will just be set to false.
And we can do this because we already have the elements on the main.
And we can also remove it, so remove the act of class from Main.
So just update us to remove and then let's take the silver button.
And just do a move on it so all posts make an update.
Save the update and so that resets are back to normal and we can't actually replicate because that main
element only has just the once.
So there's no option to reset that.
So there's different ways around that.
But one of the best ways is typically just to load the new content, as when you do have the server
response, you wouldn't be adding it to the top, you might be handling it differently.
So you might reload the new content into here.
And there's various options that you can apply to the coding.
So you can also delete a resource if you want.
So there's a delete method as well, so let's add that option.
And so if you want to delete the message from the from the list.
And just as we added the button to save it, we also might want to have an additional button, maybe
at the bottom, just outside of the main that will delete it.
So this can go outside of output, as we don't want it contained within the main because we already
have the event listener on Main.
No button, and this will go into Output's and it'll be a button and it will say delete item and then
we can also have the ID value.
And then just add to it and then if delete button out of that, Mr..
And the fact that we're listening for is going to be click so it gets clicked.
We can run the delete process so it can make fetch request to delete the item and then also some of
the processes that we need to do as well, or we'd have to take mean and remove it, delete button and
remove it so it would remove both of those from the page.
And let's send our delete request.
Item and the parameters that we need to send for delete, so we just need to have a method, delete
and send it over to this path so we can also do this within the same list here where this is going to
be our basic URL.
Euro and then add to it.
The posts, so it's a very simple request fetch and we're just doing a delete for it.
So again, it's not going to be really deleted because this is fake.
So we need to just specify the info ID.
For the posts and sending over this as a delete.
So it's not going to actually delete it, but this is just giving us our option to delete it, and that's
deleting it from the page as well for the delete button
class list.
And let's add a class of delete and we can apply some styling to the button.
So for the delete button, so do a display of block.
So it goes all the way across with a conservative 50 percent margin set to auto sort centers of background
color, so let's set the background color to red.
And the color of the font can be white.
And font size.
So to 1:00 a.m..
So the delete buttons and they're being it, so you can do it a number of different ways as well if
you want, or you could add another div container to container and then have the button within there.
And then that can just delete out the full element object that we've selected.
So these ones are a little bit on top.
So it's a little bit hard to see that.
But this is just the styling thing that you can update as needed.
And let's add some padding.
So you can apply the styling, however, however, you feel best suited.
Border radius, so slightly rounded buttons and also for delete hover.
And I'll update the opacity.
So all the posts and if we click them, they're editable, the save to server button, let's add some
content to that.
And I'll just call it save and save and how do we want to style this?
So give it a color of green, how font can be white as well.
And this is just that saver button, font size border radius.
So I think everything else can be fine.
So once we create the save button, let's add a class to a saver.
So class list, add another class of save.
So save to server, make the updates to it, say that let's also add some classes to these buttons and
the inputs.
So this is in our main output element and I just look at the element as it's getting fairly complex
here.
We've added quite a bit of stuff here.
So this is all within this top area.
So let's apply some styling to these elements.
And this is going to be within output one, so output one and class list add.
And this is just a I mean container.
And I'll just give it a class of container one.
So this is kind of like our controls and our dashboard.
So let's just make sure that container one got added so we've got class of container one so we can apply
the styling as needed.
So let's do a font size.
Podding.
And to a margin of auto.
Width of 80 percent and you can apply the styling, us, however, works best for you.
Do a text, a line central line the text.
Let's also update the inputs and the buttons.
So inputs and also of the buttons.
And also, let's apply it to BTN, not with the class of BTN, so making all of these big sports center
and we don't need to center a line.
Add some padding to it, make it a larger font size.
I had actually turned out a little bit too big, so I want to have the add items to the new line so
you can apply the styling as needed as well.
So the load load all posts, let's create block object for that.
So for button one.
And I'll just update the style display and also to display to people, OK, so that I have a new line
for it.
And let's set the margin to auto for them
and also just going to add some Google fonts to it as well.
So selecting the Google font do an import of it within the style elements and then we'll select this
and add it to the body of the page.
So all of the elements will have this font family.
So see what that looks like.
And let's do a load of the posts.
And make sure everything is still working properly, going into the console and clear that and do a
safe.
So it saved this current version as well as it creates a new one right up at the top with the same ideas,
and then actually you can edit this one because you can't edit the one that was just changed.
We also have the option to delete items and update items on the page.
So test it out and make sure you've got all of the functionality
and build a fully functional application that interacts with the JSON placeholder.
Thanks for this lesson, are to test out the application and make sure it's working as expected and
then try out, put and delete methods, sending those requests to the server.
So updating and allowing the user to interact with data on the page and effectively updating and interacting
with the server data.
So creating interactive page elements that you can save, you can delete and you can select and update
the content to updating the content and also interacting with the page content and with Jason Server
Response Data, update the page content accordingly, apply styling as needed to complete the application
and also tested the application at the different end points.