Building a To Do list app

Subscribe to my newsletter and never miss my upcoming articles

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

  1. 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.

  2. 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.

  3. Besides that I added a button that clears all tasks both from the UI and Local Storage.

  4. Above the collection of tasks I added a filter field where the user can filter through his tasks.

  5. 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.

  6. 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.

No Comments Yet