Create a To Do List App With JavaScript, HTML and CSS | JavaScript Project For Beginners

In this tutorial, a JavaScript beginner can be able to create a beautiful and functional to do list using JavaScript.
I will talk about the logic behind every line of code, before opening my text editor and start typing the code.
it's a step by step tutorial, you won't get lost at any stage of this tutorial.

the to-do list we're going to create has a beautiful UI, the user can add a to-do by filling the input and hit ENTER, after that he can rather check the to-do when it's done, or remove it using the delete button.

The user's to-do list is stored in the local storage, so when he refreshes the page, he can always find the list there.

There is the possibility for the user, to clear the list, by clicking the button clear, at the top right corner of our app.

If you want to follow along with me when I type in the code, you'll need to download the starter template from GitHub.
-----------------------------------------------------------------------------------------------------
| LINKS |
-----------------------------------------------------------------------------------------------------

DOWNLOAD SOURCE CODE + STARTER TEMPLATE:

🌍 Social Media Links.

💲 Suppport the Channel

-----------------------------------------------------------------------------------------------------
| HASH TAGS |
-----------------------------------------------------------------------------------------------------
#beginners #javascript #todolist #beginners #tutoria

0:00 intro
2:22 elements
2:58 html with links to css and fonts
3:49 selecting elements
6:25 insertadjacentHtml()
8:23 add to do
10:18 code
10:23 store a todo
13:05 code
13:09 Update toDo ()
16:41 code
16:46 to-do is done
20:39 code
20:43 remove to do
21:54 code
21:56 target element created dynamically
24:06 code
24:14 save to-do-list to local storage
25:00 code
25:04 restore to-do list from local storage
27:16 code
27:19 clear the local storage
28:56 typing the code in editor

[CodeExplained]

🚨 Big Announcement! 🚨

Hey everyone! I've made a big decision for this channel—I've turned off ads on all my videos! That's right, you can now enjoy all my content ad-free! This means I'm earning $0 from ad revenue, but I believe this is the right move to make your viewing experience better.

If you find my content valuable and want to support my work, there are several ways you can help:

Like & Share: Simply liking the video and sharing it with friends helps a lot!
Subscribe & Hit the Bell: Stay updated and never miss a new video.
YouTube Thanks: Use the "Thanks" button below to send a one-time donation.
Join the Channel Community: Get exclusive perks and behind-the-scenes content.

Every little bit counts and goes directly to creating more high-quality content for you all. Thank you so much for your continued support!

Let’s keep growing and learning together! 🌟

[NoudvD]

Finally someone who understands how important details are for beginners. Thanks man!

[webdevtech]

Dude are you kidding the explanation is unbelievable and it had me focused the whole time keep videos like this coming thank you.

[DevOtionSynthax]

This is exactly the type of videos new coders need, explaining the code while typing it not just telling them what to type without explaining the logic. *subscribed*

[k.]

I've been tearing this down and re-creating it from scratch for about a week now to totally get a handle on it. Can't believe how much I've learned from this. Thanks!!

[plentyfish]

This is amazing, I cannot imagine how many days/weeks to put together something like this. 5 mins in I had to write my comment without finishing the video. Truely another level! Thank you so much. I will have to look at this over and over but I think by the end, my understanding of Javascript will be a totally new level after this. The fact you walk through the logic first and break it into steps and then coding structure you use is fantastic. I would love if one day you could do something like a shopify cart that uses member registration to show/hide pages/offers, but even if you do not have time for that thank you. Please do full Javascript courses soon!

[s.a.]

I do not remember any video where an instructor would walk a student through every step of the code so thoroughly as you did! That must have been a lot of work on your end, but that's what made it easier for the beginner to follow the logic of the code! Subscribed! Thousand thanks for the awesome content!

[jovannovakovic]

Hell yeah, Code Explained is back! Take your seat and enjoy the video. Why? Because Code Explained's videos are just pure gold. 95800 more to go!
We really appreciate the time and effort you put into these videos! Keep up the great work!

[xrisk]

explaining how to work code and make structure was amazing. ive never seen any tutorial video like this !! thank you so much!!

[MarinYehor]

Man, you are the best teacher that I've ever seen, really! I'm from Russia, and even I have B1 level of eng, I can understand you and your explaining is amazing! Thanks for this video, because in "our" Youtube we don't have so great teachers as you. Your code is inovated (some of ours write ''var' yet). Thanks for your doing, don't give up!))

[nitinjena]

I just love the explanation!! A tutorial is never enough without explaining each and every step..
Hats off 🙌🙌🙌

[dozadetrezire]

You are absolutelly I never met someone that explains things so clearly! THe more Javascript tutorials you make, the more subscribers i will get for you..i will definetly tell my friends about you. Thanks a lot! Thanks to you, i can learn Javascript easily!

[fidgetspinner]

This channel is so underrated. I wish I could tell you how much I appreciate and love your videos. The details are amazing! This is the best channel I ever found by far. The reason is you don't just code, but you take your time to explain what each element does and it's functions. Please don't stop making videos. Greetings from Spain!

[s.a.]

2:22 elements
2:58 html with links to css and fonts
3:49 selecting elements
6:25 insertadjacentHtml()
8:23 add to do
10:18 code
10:23 store a todo
13:05 code
13:09 Update toDo ()
16:41 code
16:46 to-do is done
20:39 code
20:43 remove to do
21:54 code
21:56 target element created dynamically
24:06 code
24:14 save to-do-list to local storage
25:00 code
25:04 restore to-do list from local storage
27:16 code
27:19 clear the local storage
28:56 typing the code in editor

[aurontz]

wow. I have done a kazillion online video tutorials and this tutorial blows them away. I am not getting the feeling of "why did he add that" or "what does that do and what is the point of it". Everything was perfectly laid out. Bravo

[PatrickRams]

This channel is underrated....deceive more subscriber's because the explanation is just

[Ludo]

holycrap. this tutorial is incredible, not because of the code itself but the whole process of explaining, the slow talking manner to be clear, etc..

[yueqiu]

O.M.G. I am serious, this is the BEST JS tutorial videos I ever seen on Youtube!!! You are very thoughtful, and just as your account's name indicates, Code Explained, not only showing us what to code, but also WHY. I love the way you display the whole process. I really hope you can keep producing amazing videos!

[shiv_kna]

I loved that u chose the second path to see what everything do and then code for it-

[bensmallwood]

Amazing tutorial, subbed! I like how you only show the code you are talking about and slowly add elements when describing the JS! Keep up the great work!