Frontend Mentor - Todo app solution
This is a solution to the Todo app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Table of contents
Overview
The challenge
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
Screenshot
Links
- Solution URL: solution on Frontend Mentor
- Live Site URL: todo-app
My process
Built with
- Semantic HTML5 markup
- TailwindCSS
- Flexbox
- Mobile-first workflow
- Draggable - JS library
What I learned
- I learned to create a custom checkbox with tailwindCSS
- I created a design system for the app with tailwindCSS
Continued development
- Add drag-n-drop with Draggable
- Create a backend API for the todo app (express)
Useful resources
-
TailwindCSS - I can't over emphasize how helpful the tailwindCSS docs are, it was always open on a browser tab while I worked on this project.
-
CSS-Tricks - This CSS-Tricks article help expose me to he different ways of inserting html/content into the DOM with JavaScript.
Author
- Website - Coming soon
- Frontend Mentor - @IEdiong
- Twitter - @IEdiong