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
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 nameimg
tag with thesrc
of the toy's image attribute and the class name "toy-avatar"p
tag with how many likes that toy hasbutton
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 tohttp://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 athttp://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.