Build a To-Do List in 20 MINUTES with JavaScript

In today's video, I'll show you how easy it is to build a To-Do List App using HTML, CSS & JavaScript. No frameworks are involved in this project and it's great for beginners who want to learn Local Storage and how to build user interfaces for the web.

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

#dcode #javascript

[Uncaught_in_promise]

Nice tutorial. To do list is an absolute must for every beginner. It allows to work and understand literally all basic JS concepts: DOM, manupultaing DOM, functions, arrays, scope, loops, state and many other basic stuff.

[legendaizy]

Am from pakistan a web developer and still a student but following you in time of needs … Good keep it up

[ghostrAider]

Great Tut, pretty quick solution. Just an FYI: This solution will create individual event listeners for each todo item, which can be a bottleneck. Of course for a small todo app, it not going to matter. But if you use this technique in a different more heavy app. I surely will cause issues

[hectorsevilla]

Almost perfect. Even though you can cross out an item, it would be great if you can also remove an item on the list via a 'remove button'.

[AmyLovesJesuseva]

Thank you so much. You just gave me ideas and better way to finish my project

[karlstenator]

This is such a great tutorial!!! Thanks so much - great way to spend my Sunday morning coffee ☕

[abubalo]

Greate tutorial as usual. Todo list project is always interesting with so much nuances. Looking forward to more intermediate and advance Javascript projects this year.

[fabiennedallau]

Really good and clear explanation. Just what I needed. Keep going with these super videos

[venusstrange]

Waouh ! You, sir, are a great teacher! Thank you!

[intc]

Great videos, thank you. Really like your teaching style.

[ramzanrazashaikhahmad]

It' awesome. Thank you for making this video. It really helps a lot. What is the logic to removed the item which is marked as completed/checked.

[penguinxed]

you're very underrated sir, I've been watching your tutorials since I started learning Javascript and I can say that you're style of teaching is much easier to understand and follow. Thank you :)

[Watermelongurl_]

Thanks! Great tutorial and very easy to follow! However, the last part with the sorting didn't work for me.

[mrneedful]

follow all steps, but at the end i get my list, but they never swap the done to the end with the others they just stay there, and when reload i get a tons of to do boxes.. is that normal or they supposed to restart so i can have an empty list??

[steveh]

Great tutorial, a very good intro to local storage for me personally. Only problem I have is when I click add button I have to refresh the browser for it to appear in Chrome and Edge. Is this just me?

[ShinraKasukabe-pf]

thanks a lot! but what about the remove function?

[DJDELLANNIE]

i have one question but what theme is that? I like that a lot lol

[sirp]

I have a question though
Why do you have to get the items first in the local storage when they're not even there yet?

[sebastiansobik]

Hello, can you explain to me why we do not update local storage when user exits/refresh page? Isn’t it waste of resources to update it and refresh each time? I am noobie, so if it’s obvious don’t be mad on me

[Montieken]

thx !! next time type a bit slower had to pause the video after every line :)