All of the 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 color data with restful routes
at http://localhost:3000/colors
. You can also check out
http://localhost:3000/colors/:id
Send a fetch request to the server http://localhost:3000/colors
to get data. Each card should be added to the div#card-container
.
The card element should look like this:
<div class="color-card" style="background-color: #000000">
<h2>Black</h2>
<p>0 Votes</p>
<button>+1 Vote!</button>
<button class="delete-button">X</button>
</div>
NOTE: background-color
is a property of the style
property of an element.
When the '+1 VOTE!' button is clicked on a color:
- Optimistically render the increased number of votes
- Send a fetch request to the server
http://localhost:3000/colors/:id
to update the number of votes
Using the form:
- Optimistically render an added color
- Send a fetch request to the server
http://localhost:3000/colors
to add the color
On click of the X button:
- Optimistically render the removal of a color card
- Send a fetch request to the server
http://localhost:3000/colors/:id
to remove the color