Toy Tale

You've got a friend in need! Your friend Andy recently misplaced all their toys! Help Andy recover their toys and get the toys back in the toy collection.

Create Your Server

All of the toy data is stored in the db.json file. You'll want to access this data using a JSON server. In order to do this, run the following two commands:

• npm install -g json-server
• json-server --watch db.json

This will create a server storing all of our lost toy data with restful routes at http://localhost:3000/toys. You can also check out http://localhost:3000/toys/:id

Note: For users of the Live Server VSCode extension, if the page is reloading when you initiate a fetch request, you'll need to set up some additional configuration for Live Server to play nicely with json-server. Follow the steps in this gist (you'll only need to do this once), then come back to this lesson.

Fetch Andy's Toys

On the index.html page, there is a div with the id "toy-collection."

When the page loads, make a 'GET' request to fetch all the toy objects. With the response data, make a <div class="card"> for each toy and add it to the toy-collection div.

Add Toy Info to the Card

Each card should have the following child elements:

• h2 tag with the toy's name
• img tag with the src of the toy's image attribute and the class name "toy-avatar"
• p tag with how many likes that toy has
• button tag with a class "like-btn"

After all of that, the toy card should resemble:

  <div class="card">
    <h2>Woody</h2>
    <img src=toy_image_url class="toy-avatar" />
    <p>4 Likes </p>
    <button class="like-btn">Like <3</button>
  </div>

Add a New Toy

When a user submits the toy form, two things should happen:

• a POST request should be sent to http://localhost:3000/toys and the new toy added to Andy's Toy Collection.
• If the post is successful, the toy should be added to the DOM without reloading the page.

In order to send a POST request via Fetch, give the Fetch a second argument of an object. This object should specify the method as POST and also provide the appropriate headers and the JSON-ified data for the request. The headers and body should look something like this:

headers: 
{
  "Content-Type": "application/json",
  Accept: "application/json"
}

body: JSON.stringify({
  "name": "Jessie",
  "image": "https://vignette.wikia.nocookie.net/p__/images/8/88/Jessie_Toy_Story_3.png/revision/latest?cb=20161023024601&path-prefix=protagonist",
  "likes": 0
})

For examples, refer to the documentation.

Increase Toy's Likes

When a user clicks on a toy's like button, two things should happen:

• A patch request (i.e., method: "PATCH") should be sent to the server at http://localhost:3000/toys/:id, updating the number of likes that the specific toy has
• If the patch is successful, the toy's like count should be updated in the DOM without reloading the page

The headers and body should look something like this:

headers: 
{
  "Content-Type": "application/json",
  Accept: "application/json"
}

body: JSON.stringify({
  "likes": <new number>
})

If your request isn't working, make sure your headers and keys match the documentation.