We're going to put to good use our knowledge of fetch
by creating a full application in the browser! To achieve this, you'll have to set up all the interactions with the server.
- Explain that
fetch
is an API for making HTTP requests - Use
fetch
to make an asynchronous HTTP request and use the response data to update the DOM - Implement a JavaScript application that interacts with a server
- Write your code in the
index.js
file - Use this API documentation for your data
- The API url follows this format:
https://boolean-uk-api-server.fly.dev/GITHUB_USERNAME/todo
- Replace
GITHUB_USERNAME
with your actual github username - Example:
https://boolean-uk-api-server.fly.dev/vherus/todo
- The API url follows this format:
- Make a
GET
request withfetch
tohttps://boolean-uk-api-server.fly.dev/GITHUB_USERNAME/todo
to load all Todos from the server and render them in a list. Completed Todos should be grey and scored out.- NOTE: REPLACE
GITHUB_USERNAME
WITH YOUR ACTUAL GITHUB USERNAME
- NOTE: REPLACE
- When the form is submitted, make
POST
request withfetch
tohttps://boolean-uk-api-server.fly.dev/GITHUB_USERNAME/todo
to create a new Todo. Update the list of Todos without reloading the page.- NOTE: REPLACE
GITHUB_USERNAME
WITH YOUR ACTUAL GITHUB USERNAME
- NOTE: REPLACE
-
Add a "Complete" button to each uncompleted Todo. When the user clicks it, make a
PATCH
request withfetch
tohttps://boolean-uk-api-server.fly.dev/GITHUB_USERNAME/todo/TODO_ID
to update the todo as completed. Update the list of Todos without reloading the page.- NOTE: REPLACE
GITHUB_USERNAME
WITH YOUR ACTUAL GITHUB USERNAME - Replace
TODO_ID
with the actual ID of thetodo
- NOTE: REPLACE
-
Add a "Delete" button to each Todo. When the user clicks it, make a
DELETE
request withfetch
tohttps://boolean-uk-api-server.fly.dev/GITHUB_USERNAME/todo/TODO_ID
to remove the todo. Update the list of Todos without reloading the page.- NOTE: REPLACE
GITHUB_USERNAME
WITH YOUR ACTUAL GITHUB USERNAME - Replace
TODO_ID
with the actual ID of thetodo
- NOTE: REPLACE
-
Add error handling to the app. The user should have a notification if something goes wrong
Tips
- Make some requests to the API server and inspect the response, so you can check the data structure before start coding. You could use an app like Insomnia to make this easier
- Focus first on rendering the data onto your page
- Try to use function scopes to your advantage