To get started, run json-server with json-server --watch db.json
. If you cannot run the server, first install the json-server package with npm install -g json-server
.
You'll be writing all of your code in src/index.js
with the exception of certain bonus deliverables.
Make a fetch request to http://localhost:3000/facts
. The response will include an array of cat fact objects. For each cat fact, make a new <p>
with textContent for the fact and append it to the #cat-facts
div.
Make a fetch request to http://localhost:3000/tasks
. The response will include an array of tasks to do for the cats (these are js objects). For each task, make a new <li>
with textContent for the task and append it to the #cat-tasks
div.
Make a fetch request to http://localhost:3000/names
. The response will include an array of objects which include keys for name
and title
. In the cat-names
div append an <h2>
for each name AND an <h3>
for each title so it reads like this:
<h2>Octavia</h2>
<h3>Meowing Queen</h3>
<h2>Ursula</h2>
<h3>Baroness of Scritches</h3>
Make a fetch request to http://localhost:3000/pictures
. The response will include an array of objects with img_url
keys. For each img_url
create a new image with a src
attribute of the img_url
and append it to the #cat-pics
div.
When a task <li>
in the #cat-tasks
div is clicked, change its style so that it is crossed out. If clicked again, it becomes uncrossed.
-
Always console.log the data you get back from the server! Every fetch will return something slightly different so be sure you know what you're getting and how to get to the inner data such as the name, title, fact, etc.
-
You will have to iterate (using a
for
loop or.forEach
) with every single deliverable. -
Be clear on what you're making and where it's going! You may have to make more than one element when looping through the array.
-
If you get stuck, don't forget you're allowed to look things up! Syntax is something that's especially easy to find on the internet.
Only attempt these deliverables once you've learned the POST
method!
- Create a new form in
index.html
:
<form>
<input type="text" placeholder="add an image url"/>
<input type="submit" value="Add Photo"/>
</form>
When the form is submitted, create a new image tag with a src
of the url the user typed into the form. This image gets appended to . Additionally, make a POST request to http://localhost:3000/pictures
with these headers:
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
and a body similar to this one:
body: JSON.stringify({ img_url: "http://catphotos.com/example.url" })
- Create a similar form for the task list. When the form is submitted, make a similar POST request with a body similar to this one:
body: JSON.stringify({ content: "Play with the cattos!" })
Additionally, be sure to append the new task item to the task list.