Build a TODO App With JavaScript (And Local Storage)

Watch this free course to learn how to build a JavaScript todo app from scratch!

JavaScript is pretty amazing. With it, you can build all kind of handy components, even quite complex things like a todo app, and that’s what we’re going to create today! Our to-do list JavaScript app will allow us to add tasks, to edit them, mark them as complete, and delete them. All this happens with the help of CSS, vanilla JavaScript, and the browser’s local storage.

00:00:00 Welcome to the course
00:03:11 Create the to-do app markup with HTML
00:11:22 Style the todo app with CSS
00:28:28 Power the app with JavaScript

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

[marko]

52:42 You must put return inside filter within { }, thats the problem, if you dont put { } the callback function will automatically return.

[souravdas]

Where is the starter kit? link please.
Also, how to add drag and drop functionality?

[Neil_]

I'd appreciate it if you could provide a link to the Figma file. Additionally, do you have a starter file or access to the source code?

[asanthajayakodi]

Thanks Adi. Your tutorial are awesome. love to watch.😎

[nikamerebashvili]

There isn't source code Link, where can i get it?

[Olgitatata]

Thanks a lot ☺️, just that what I need !!! Practice!!! Please 🙏🙏🙏 more videos like this!!!

[casebook.]

Thank you so much, your tutorial mr. Adi..

[Sanduniiii]

Can I follow along without starter kit?

[ryanmacalandag]

Thank you! Lots of gems to learn here.

[rokpperssr]

can you provide the required starter kit or source code ;

[lotteneri]

How did you automatically convert ul.todos to <ul class="todos"> in your code at 8:14 ? Is there a way to do this with id as well? Thank you.

[Sushovan_]

Hey I ran into a problem. In the remove task EventListener, (48:40) most of the time, when I click the remove button, e.target is returning <svg>, and therefore the list is not removed. Any solution?

[kennedyuzoh]

Can this used for multiple users sessions?

[daniaroundtheworld]

Have you deleted the starter file? 😟I can't find it anywhere...

[Sanduniiii]

I tried to create this app. Without starter kit it is not easy. And I’m stuck. I did until CSS. 😢 if u can upload starter kit that would be really useful.

[harshalnath]

please give the starter file otherwise give github link of this project

[kaycampbell]

not deleting from local storage though

[otepiii]

is contenteditable in css working for you guys?

[lalit-singh-bisht]

With javascript its litrally hard to keep track of our code

[frankrdgz]

Great tutorial! but I run into an issue which it doesn't make any sense. In the .js file, in the updateTask function, after the 1st else, where "const span = el.nextElementSibiling" it tells me that the properties are undefined, but I don't get it because <span> does have properties but for some reason I cannot get to it by using el.nextElementSibiling (console.log() also tells me the same, it's undefined) any suggestions? All the code is identical to yours btw.
Thank you!