This is a solution to the Todo app challenge on Frontend Mentor. Frontend Mentor challenges help improve coding skills by building realistic projects.
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 (I forgot to include it)
Performance
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- JavaScript
- Desktop-first workflow
- Local storage
This challenge was a valuable opportunity to practice my coding skills. I had previously worked on a to-do list application, so this challenge allowed me to revisit that project, especially focusing on local storage and the filter function, which I hadn't used in a while. It also gave me a chance to improve my skills with the DOM. Regarding the dark mode toggle, this was my first time implementing it. I added it by applying a class to the body and made the necessary modifications in the CSS file.
- Todo List : Since I was doing a to-do list application before, I started the Javascript code using the same code on this project. Then, I modified it and added the controls function (item left, filter, clear complete) and dark mode toggle, which helped me review and use local storage.
- Frontend Mentor - @ilham-bouk
- LinkedIn - Ilham Bouktir
A big thank you to anyone providing feedback on my solution. It definitely helps to find new ways to code and find easier solutions!
Happy coding!