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.
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
- Bonus Trae: Edit todos from the list
- Bonus Trae: automatically add predefined to-do items to the local storage upon Application Initialization
- Solution URL: https://github.com/traez/todo-list-app-with-local-storage
- Live Site URL: https://todo-list-app-with-local-storage-traez.vercel.app
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
- Next.js - React framework
The learnings were massive with this one.
- Learned a smart way to manipulate theme switch in Next.js. Also shared solution on StackOverFlow. Solution later getting me my first big reputation.
- Used the Window: prompt() method for the first time
- Learned about and easily used the HTML Drag and Drop API
- Used the grab and move cursor CSS property for the first time.
- Also used the opacity CSS property for the first time.
- Learned and used the DataTransfer: setData() method for the first time.
- Learned how to get better code comments by feeding chatGPT in piecemeal.
- Learned how to understand an existing codebase better, by feeding chatGPT in piecemeal for explanations.
- 3 fresh Next.js Projects, then GraphQL, Technical Writing, Open Source!
Stackoverflow
YouTube
Google
ChatGPT
- Website - Trae Zeeofor
- Twitter - @trae_z
Dedicated to my son, Trevor. Who was born as project was being built. May your existence forever enable brutal consistency in my coding skill acquisition.