Thanks for checking out this front-end coding challenge. This is a to do app built based on Frontend Mentor | Todo app challenge.
The challenge was to build an to do app and get it looking as close to the design as possible. Right below you can see what the challenge proposes and what have been done (✔️) and what have not (❌).
The users should be able to:
- View the optimal layout for the app depending on their device's screen size ✔️
- See hover states for all interactive elements on the page ✔️
- Add new todos to the list ✔️
- Mark todos as complete ✔️
- Delete todos from the list ✔️
- Filter by all/active/complete todos ✔️
- Clear all completed todos ✔️
- Toggle light and dark mode ✔️
- Bonus: Drag and drop to reorder items on the list ❌
- You can download or clone the project, once you have the files execute the
index.htmlfile. - You can access the website page.
- The app is using the browser's
localstorageto store all the data, consequently it has a limited capacity of storage. - Basically everything is clickable:
- Changing theme (dark or light)
- Changing the to do status (completed or active)
- Button to delete a to do and to clear all completed ones
- To create a new to do just give the input some text and press
Enter
| 📜 Mobile design | App built |
 |
 |
| 📜 Mobile design | |
 |
 |
HTMLCSSJavascript