This exercise is divided in two main phases:
If you already did the front-end or the back-end phase in a previous exercises (or something similar) you can copy & paste your code into this boilerplate and adapt it to make it work, you will still learn a lot by doing that.
Do not clone this repository.
The first step to start coding is cloning the vanillajs + flask boilerplate on your local computer or opening it using gitpod.
a) If using Gitpod (recommended) you can clone the boilerplate by clicking here.
b) If working locally type the following command from your command line:
💡 Important: Remember to create a new repository, update the remote (
git remote set-url origin <your new url>), and upload the code to your new repository using
Add the endpoints to create one task, delete one task and get all tasks. Implements the Following Endpoints.
[GET] /todos Get the list of todo's.
[POST] /todos Add a new todo to the list.
[DELETE] /todos/<int:position> Delete a single todo, given it's position.
Create a HTML/CSS/JS app that allows any user to manage a todo list: - List all the todos. - Add a new todo. - Delete a todo when clicking on the todo trash icon.
🤘🏼 Note: You can create your own design if you are feeling confident.
function addTodo(title)inside of your
src/front/js/index.jsthat receives the task title and appends a new item to the list of todos. It's recommended to use the DOM appendChild function to create the new item inside the list of todos, you can try calling the function yourself and see if it works.
⚠️ Important: Each task must contain a trash icon that shows when the task is hovered.
src/front/js/index.jswrite a fetch call inside the window.onload to get all the todos from the API:
Remember that according to the fetch API, the fetch function must receive two functions, one for the
.then() and one for the
.catch(). Those functions will be called depending on the request successfull completition or failure
addTodoas many times as needed.
src/front/js/index.js, create a function called
deleteTaskthat will be called when any trash icon is clicked.
5.1 The function gets called onClick on the trash can icon.
5.2 The function receives one parameter
e that contains the event information with
e.target being the trash can that was clicked.
5.3 Using the fetchAPI the function must do a DELETE request to your API:
This feature is triggered after the user types the title of the todo into the
<input> located at the top of the list, and then the user clicks on the
add button beside the input.
createTodo. 6.1 On your
src/front/js/index.jsdeclare a function
eas a parameter with the event information. 6.2 Use the document.querySelector function to select the input from the DOM and get it's value (the input value will be whatever the user typed as the todo title). 6.3 Store that value in a variable. 6.4 Use the fetch API to to create a
POST /todoand add the task title as the body of the request with content-type json. 6.5 Wait for the response to come back by using the
.catch()available. 6.6 If the response lands on the .then check for the status code. 6.7 If the status code is 200 call the function
addTodothat you declared on the second step, that function will append the todo into the list of HTML items.
PUT /todo/<int:position>and a
index.jsthat gets called then a TODO is edited. You can add a pencil icon that when the user clicks on it it replaces the todo element with a text input that the user can write on it.
All rights reserved, 4Geeks LLC 2021. Read more about 4Geeks and what we are going here.