Build a Todo List App in HTML CSS JavaScript | EASY BEGINNER TUTORIAL

Learn how to build a todo list web app in HTML, CSS and JavaScript with the ability to display, create, edit, and delete your tasks. Task list, to-do list, shopping list.
This is the perfect project for beginner web developers who are looking to expand their knowledge of HTML CSS and JavaScript. This beginner JavaScript tutorial will teach you how to use local browser storage to create a fully functional to-do list app!
Build your next awesome project:
www.tubebuddy.com/quicknav/la...
Source Code:
github.com/Ade-mir/To-Do-List...
Chapters
00:00 What we are building / Finished To-Do List
01:35 Project setup
06:50 Making our HTML for the To-Do List
16:38 Styling our project with CSS
56:00 Adding JavaScript variables, arrays, and objects
01:06:24 Using the DOM (Document Object Model)
01:12:28 Initialize the To-Do JavaScript
01:21:12 addTask function
01:31:19 displayTasks function
01:50:24 toggleTask function
01:52:05 deleteAllTasks function
01:53:03 editTasks function
Hope you enjoyed this tutorial. Leave a like if you did, and feel free to subscribe for more tutorials like this in the future!

[@josephryan8899]

I just checked the source code line by line in .html and..css and they match line by line perfect. Thanks for your work

[@NomanAli-zd1bn]

Thanks alot thats what we want simple basics and easy to understand ❤

[@howtobecomeadeveloper]

So glad you like it! ❤️

[@alexgoldendragon3435]

tysm!!!!! This is so detailed, you deserve more subscribers!

[@howtobecomeadeveloper]

Oh thank you!

[@anjaneyulub2529]

I love your teaching I am excited to learn more from u Thank you : )

[@howtobecomeadeveloper]

Very happy to hear that, my pleasure :)

[@hemanthchowdary7150]

Awesome 🤩 thanks ❤

[@howtobecomeadeveloper]

My pleasure! 😊

[@ChristianChinakueze-do2bd]

I love your video

[@princessakakpo]

Hey I am following every step but my output is not changing, I am typing every thing the same but my website doesn’t not even show the color or the font change. I need help please .

[@josephryan8899]

It's strange but the project opens better in Firefox but still no pointer cursor over input areas. Thanks

[@zinakemoum7930]

hello, it is interesting what you teach, i follow you very well

[@howtobecomeadeveloper]

Thank you! 😊

[@seputarrahasia7655]

awesome

[@howtobecomeadeveloper]

Thank you!

[@angiek1925]

Question how would u go about making categories for your list n move items between those to do categories

[@howtobecomeadeveloper]

Good question! I would nest the existing data storing of the tasks into seperate structures which you could name. So for example if the tasks are stored like this:
Todos = {
Task 1: value 1,
Task 2: value 2,
}
Turn it into:
Todos = {
Category 1: {
Task 1: value 1,
Task 2: value 2,
},
Category 2: {
Task 1: value 1,
Task 2: value 2,
},
}
I wrote this quick on my phone so sorry for syntax mistakes but I think you get the point 😜

[@function30]

I love your teaching make video on make anything responsive, responsiveness tricks

[@howtobecomeadeveloper]

Thank you! Awesome, I'm noting it down! 😊

[@hyojinkim6870]

HIII! thank you so much for the video. I have a quick question .. when i tried to make a Edit function, i declared "const firstText = todo[index].text;" and my console says "Cannot read properties of undefined (reading 'text') " like this. what should i do???!!! help me plzzz

[@alexgoldendragon3435]

you could ask chat gpt

[@freguenshoodjean5841]

Thank you a lot , although the displayTask function is really challenging. .

[@howtobecomeadeveloper]

I'll do my best to explain deeper in the next one!

[@josephryan8899]

Hello awesome tutorials but I'm having an issue with the scrollbar and webkit stylings their not making any changes the scrollbar still is visible. Thanks

[@DrixBors]

try this
.scroll::-webkit-scrollbar {
width: 0.06rem;
scrollbar-width: thin;
}

[@ryomensukuna9513]

😍

[@howtobecomeadeveloper]

😊😊

[@aissame112]

❤❤

[@howtobecomeadeveloper]

❤

[@OlafXD]

why do i feel like writing css is way harder than building basic backend side

[@howtobecomeadeveloper]

I see your point! They can be hard in different ways for sure.

[@OlafXD]

@@howtobecomeadeveloper is it means that i am specialized for backend side maybe haha

[@howtobecomeadeveloper]

Build your next awesome project:
www.tubebuddy.com/quicknav/latest/UCkXqOdpo5ul8BosGBFlDgmw

[@thilaksalivahanan2342]

Beginner javascript website creation please.
Thanks for your efforts

[@howtobecomeadeveloper]

Awesome, thank you for your feedback!

[@Rshubham1819]

I think you should start concept wise project of javascript.

[@howtobecomeadeveloper]

@@Rshubham1819 Interesting, could you explain a bit more? 😊

[@Rshubham1819]

@@howtobecomeadeveloper yes, sure it's a great pleasure for me. You should make a proper playlist for javascript concept wise projects and explain it in depth, like- for method string you can make mini projects, or how strings and its method is used in real world. And many more topics

[@function30]

Anything but plz make responsive

[@howtobecomeadeveloper]

Thank you for your comment! 😊

[@raaajj_aryan]

very helpful. not like most of the others

[@howtobecomeadeveloper]

Thank you!