GithubHelp home page GithubHelp logo

js-dom-todos's Introduction

Todo List

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.

Result

Learning Objectives

  • 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

Instructions

  • 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
  • Make a GET request with fetch to https://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
  • When the form is submitted, make POST request with fetch to https://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

Extended

  • Add a "Complete" button to each uncompleted Todo. When the user clicks it, make a PATCH request with fetch to https://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 the todo
  • Add a "Delete" button to each Todo. When the user clicks it, make a DELETE request with fetch to https://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 the todo
  • 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

js-dom-todos's People

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.