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

20,895

463 0

Published 2023-09-03

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/latest/UCkXqOdpo5ul8Bos…

Source Code:
github.com/Ade-mir/To-Do-List-Tutorial

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!

All Comments (21)

@josephryan8899 4 months ago

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 11 months ago

Thanks alot thats what we want simple basics and easy to understand ❤
@Sattivlogs-fp2ch 12 hours ago

Thanks you sooo much
@alexgoldendragon3435 5 months ago

tysm!!!!! This is so detailed, you deserve more subscribers!
@anjaneyulub2529 10 months ago

I love your teaching I am excited to learn more from u Thank you : )
@freguenshoodjean5841 1 month ago

Thank you a lot , although the displayTask function is really challenging. .
@josephryan8899 4 months ago

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

hello, it is interesting what you teach, i follow you very well
@ChristianChinakueze-do2bd 21 days ago

I love your video
@princessakakpo 7 months ago

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 .
@hemanthchowdary7150 11 months ago

Awesome 🤩 thanks ❤
@function30 11 months ago

I love your teaching make video on make anything responsive, responsiveness tricks
@raaajj_aryan 2 months ago

very helpful. not like most of the others
@josephryan8899 4 months ago

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
@hyojinkim6870 5 months ago

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
@angiek1925 8 months ago

Question how would u go about making categories for your list n move items between those to do categories
@seputarrahasia7655 6 months ago

awesome
@ryomensukuna9513 11 months ago

😍
@OlafXD 4 months ago

why do i feel like writing css is way harder than building basic backend side
@howtobecomeadeveloper 11 months ago

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