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
- Solution URL: Github Solution
- Live Site URL: Todo App live
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- Vanilla Javascript
- Sortable Jquery
This is the hardest challenge that I take in frontendmentor. I took me a long time to figure out how to code a Todo App in javascript with the help of some resources I found in the internet. Somehow I was able to make it. I know there are still a lot of modifications needed but this is by far the solution that I can do.
I am still a beginner in Javascript. There is still a lot to learn. I am looking forward to take more Javascript challenges to further enhance my learning.
- https://freshman.tech/todo-list/ - This help me to better understand how adding and removing tasks.
- How to Code A Better To-Do List - Tutorial - This is an amazing tutorial from WebDev which showing how you can save a tasks in local storage. This is somehow different but I just studied it and learn how things worked.
- Jquery Sortable - It will help you out in reordering tasks with a few javascript code.
- How To Create Dark Theme Switcher For Website Using CSS and JS - One of the best tutorial in changing Theme.
- How To Build Sortable Drag & Drop With Vanilla Javascript - This is the best tutorial for drag and drop but the reduce and Math part is hard to understand.
- Website - SimplyJC
- Frontend Mentor - @simplyJC
- Twitter - @jcaltamia