In this project you will build an application that allows for todos to be added, completed and removed from view. This application should:
- Use this gif as inspiration for building the DOM
- Try out this prototype
- Allow for a todo's
completed
status to be toggled back and forth when clicking on a todo - Allow for a todo to be added when submitting the new todo form
- Allow for completed todos to be filtered out of view when clicking the clear completed button
- Node 16.x
- NPM 8.x (update NPM executing
npm i -g npm
) - Postman (download the desktop version here)
- Chrome >= 96.x
Other browser/Node/NPM configurations might work but haven't been tested.
- Fork, clone, and
npm install
. - Launch the project on a development server executing
npm run dev
. - Visit your app by navigating to
http://localhost:3000
with Chrome.
The following endpoints exist in this project and should be explored with Postman prior to coding:
GET http://localhost:9000/api/todos
- Expects no payload
- Makes no changes on the server
- responds with
200 OK
and a payload with all the todos
POST http://localhost:9000/api/todos
- Expects a payload with
name
(string) and optionalcompleted
(boolean) - Creates a new todo on the server
- responds with
201 Created
and a payload with the new todo
- Expects a payload with
PATCH http://localhost:9000/api/todos/:id
- Expects no payload
- Flips the
completed
property on the todo with the id provided in the URL - Responds with
200 OK
and the updated todo
The API will make other responses if the requests are defective:
422 Unprocessable Entity
when a required payload is missing or incorrect404 Not Found
when the requested todo does not exist, or when the URL is incorrect
- Your app should display a list of todos, an input field, a submit button, and a button to filter out completed todos
<App />
will hold all of the state machinery:- Application state, held in component state
- State-changing methods, event handlers
<TodoList />
receives your todos array and iterates over the list generating a new<Todo />
for each element in the array<Todo />
is a component that takes in thetodo
data and displays the task to the screen<Form />
will hold your input field and yourAdd Todo
andClear Completed
buttons- Your input field should take in user input, and allow a user to press
Enter
or click on theSubmit Button
to add a todo to your list - Once a todo is submitted, the Todo List should re-render and show the added todo
- Your input field should take in user input, and allow a user to press