JS: data fetching + DOM manipulation

[mkermani144]

Description

Using https://jsonplaceholder.typicode.com/ apis, implement a web app like this:

• The index page shows 10 posts with their title, body and author name.
• Each post has an update and a delete button.
• When the update button is clicked, a native prompt is opened with current body of the post as default value. User then can update the body and submit it, which calls an api to update the post. After the update is successful, the body text should be changed in the page. During the update process, a pending indicator should be shown, such as a progress bar, a "updating..." button, or something.
• Same applies for delete button, except that instead of opening a prompt, it opens a confirm.
• There is an "Add post" button. When the button is clicked, the user is redirected to another page with some inputs for title, body, etc. The user fills the inputs and then clicks a submit button, which does exactly the same thing as updating a post (e.g. api call and showing pending indicator, etc.) When the submission is successful, the user is redirected back to the main page.
• There is a search input in the page. When the user types something in the input and clicks a "search" button, a search is done, showing only filtered posts. This filtering should be done server-side, using api calls.

It doesn't matter how you style the web app.

What to google

• APIs
• fetch
• promises
• window.prompt, window.confirm
• DOM manipulation
• querySelector, appendChild, removeChild, createElement, createTextNode, etc.