Introduction
Hi, I'm Vlad, and today I want to talk about the latest project I made using HTML, CSS, and plain Javascript. A To-Do list app. You can see it here: vladtodo-list.netlify.app
In this article, I want to talk about the struggles I went through when building this project. I'll also share all the features I added to the app and how I built them.
This project is inspired by the "Modern Javascript from the beginning" course by Traversy Media, I want to mention this from the beginning even though I added more features by myself.
Main features
I first built an input field where the user can add the task. After he presses the "Add Task" button or the "Enter" key the tasks it's added to a ul and the Local Storage.
Then for every task that gets added I built a little red "x" button that deletes the task from the UI and from the Local Storage too.
Besides that I added a button that clears all tasks both from the UI and Local Storage.
Above the collection of tasks I added a filter field where the user can filter through his tasks.
Then because the little "x" button wasn't enough I also added an event listener that adds a line through the task you click on.
Finally, the feature that was the hardest and took me the most time to implement was the dark mode. I spent about 5 hours on it but it was all worth it in the end. I used a Youtube tutorial from Florin Pop to help me add this feature.
The biggest struggle was adding a dark mode to the whole website. When I added it to the body the div that contains the task app was still in light mode. So what I did was added the event listener to that div too and this solved the problem.
Another struggle I went through was adding the line through feature to every element of the list. I solved this by adding the event listener to the entire collection of tasks.
Conclusion
To sum up I think that this is a project every beginner web developer should build. I learned so many new things from it like how to add a dark mode theme or how to add the item to the Local Storage.
If you want to read about my journey as a self-taught web developer you can follow me on Twitter. There I share all the projects I am working on.