Fork this repo, then run git clone to download it locally. Then cd into the downloaded directory and open it in your text editor with code ..

When you’re finished, run the following commands in your terminal to submit:

git add .
git commit -m 'Done'
git push

To get feedback on your code, make a pull request from your forked repo. If you worked with a partner, you can tag your partner on the pull request.

We'll be working on three deliverables to practice DOM Manipulation, Event Handling, and Fetch.

• Deliverable 1: When the page loads, display information about a player.
• Deliverable 2: When the user clicks the like button, increment the likes for the player on the page and persist it to the backend
• Deliverable 3: When the user submits the "Add Goal" form, add a goal video to the page and persist it in the backend

Each deliverable is in a separate folder. You will need to open the index.html file from each folder in the browser as you're working. You are encouraged to write your code from scratch for each deliverable--even if it means duplicating work you've already done--in order to get more practice. If you'd prefer though, there is some starter code for Deliverable 2 and 3 in the dom-starter.js file.

There's a section in this Readme file for your notes on each deliverable. As you go through the deliverables, write down some notes in this file on how you solved each problem. It'll help reinforce what you learned and give you a head start next time you see a similar problem.

This Mini Challenge uses json-server to create a RESTful server using a .json file.

First, you'll need to install json-server (if you haven't already done so for another assignment). From your terminal, run:

$ npm install -g json-server

Then, we'll need to start json-server and have it use the db.json file in this directory as its database:

$ json-server --watch db.json --routes routes.json

To check if your server is running, open http://localhost:3000/players/1 in your browser. You should see the first player from the db.json file, with an array of comments included.

When the application loads, display all the information about the first player on the page, including name, nickname, photo, likes and goals.

You will need to make a request to the server using fetch:

Request:
GET /players/1

Example Response:
{
  id: 1,
  number: 11,
  name: "Mo Salah",
  nickname: "The Egyptian King",
  photo: "https://cdn.cnn.com/cnnnext/dam/assets/190501145802-mo-salah-exlarge-169.jpg",
  likes: 1000,
  goals: [
    {
      id: 1,
      playerId: 1,
      link: "https://youtu.be/mKY-kheEhBo"
    },
    {
      id: 2,
      playerId: 1,
      link: "https://youtu.be/mJ8XGUgvoAM"
    }
  ]
}

YOUR NOTES

When a user clicks the like button for a player, that player's likes should increase by 1. The player's updated likes should persist on the server, and also be displayed on the page.

To persist the likes, you will need to make a request using fetch. Make sure you include the player's id in the URL for the request.

Request:
PATCH /players/1

Headers: 
{ 
  "Content-Type": "application/json"
}

Required Keys in Body:
{ 
  likes: number
}

Example Response:
{
  id: 1,
  number: 11,
  name: "Mo Salah",
  nickname: "The Egyptian King",
  photo: "https://cdn.cnn.com/cnnnext/dam/assets/190501145802-mo-salah-exlarge-169.jpg",
  likes: 1001,
}

It's up to you if you'd like to handle this optimistically or pessimistically.

To check if your fetch request is working, you can look at the db.json file to see if the likes for your player has been updated. You can also try refreshing the page to see if the player's likes still show the updated number.

YOUR NOTES

When a user submits the form, a new goal video should be displayed for the player. The new goal video should also persist in the backend, so when you refresh the page, you can still see the new goal video.

Here's a nice goal video you can use, if you don't have one bookmarked already: https://youtu.be/mKY-kheEhBo

In order to save the goal video to the database, you will need to make a request using fetch:

Request:
POST /goals

Headers: 
{ 
  "Content-Type": "application/json"
}

Required Keys in Body:
{ 
  playerId: 1,
  link: "https://youtu.be/mKY-kheEhBo",
}

Example Response:
{
  id: 3,
  playerId: 1,
  link: "https://youtu.be/mKY-kheEhBo"
}

To check if your fetch request is working, you can look at the db.json file to see if your goal has been added to the array of goals. You can also try refreshing the page to see if the new goal still shows up.

YOUR NOTES