DEV Community

Cover image for How to Make a Todo List using JavaScript

How to Make a Todo List using JavaScript

Shantanu Jana on November 14, 2021

In this article you will learn how to create Todo List using JavaScript. JavaScript Todo List helps you create a list of things you want to do thro...
Collapse
 
abbie34 profile image
abbie34 •

Hey.. This is way more helpful than what I've been seeing online so far. Thank you!

Collapse
 
itxshakil profile image
Shakil Alam •

Awesome, I like the elegant and simple design.

I think "Add" button and "delete(trash)" button should have same background color

I have created the same TodoApp with PWA functionality.

Give it a try and tell your thoughts on it.

todo.shakiltech.com

Collapse
 
collinst_14 profile image
Collins Tatenda Machekwa •

Good day family how to make this using html and css only

Collapse
 
githubtuankiet profile image
Tuan Kiet Tran • • Edited

You must fix this problem, it gets overflow when I add more than 10 tasks. Totally, thank you for this and have a nice work.
Overflow

Collapse
 
shantanu_jana profile image
Shantanu Jana •

Welcome 😊

Collapse
 
simplyauf profile image
Simplyauf •

When the page is refreshed,the list disappears.

Any way to solve this?

Collapse
 
shantanu_jana profile image
Shantanu Jana •

Collapse
 
onuproy profile image
Onup Chandra Barmon •

Great video!

Collapse
 
toheebosundare profile image
toheebosundare •

You have to add event listener -DOMContentLoaded and save to local storage. Watch tutorials on YouTube on how to do that

Collapse
 
silvodesigns profile image
Kevin Silvestre •

I used this for my daily dose of JS practice. Thank you;

Collapse
 
shantanu_jana profile image
Shantanu Jana •

Welcome

Collapse
 
ranvirchoudhary profile image
RanvirChoudhary •

Can i sell this as an app? i think i need permission from you lol

Collapse
 
shantanu_jana profile image
Info Comment hidden by post author - thread only accessible via permalink
Shantanu Jana •

OK,
Now this design is yours

Collapse
 
ranvirchoudhary profile image
RanvirChoudhary •

is the heart a yes or a no? lol

Collapse
 
bogdanbatsenko profile image
bogdanbatsenko •

I tested the code. It won't work for me unless I wrap all the code in
document.addEventListener('DOMContentLoaded', (event) =>{});

Otherwise it drops error "Cannot set properties of null (setting 'onclick')"

Collapse
 
shantanu_jana profile image
Shantanu Jana •
Collapse
 
onuproy profile image
Onup Chandra Barmon •

Awesome great job ❣️❣️

Collapse
 
shantanu_jana profile image
Shantanu Jana •

Thank you 😊

Collapse
 
bogdanbatsenko profile image
bogdanbatsenko •

Wow. Nice and clean. Thank you

Collapse
 
shantanu_jana profile image
Shantanu Jana •

Welcome

Collapse
 
mathiashidalgo profile image
Mathias Hidalgo Caja •

Hello, i have a question. Why when i put a task, the page refresh, and dont let me put the task?

Collapse
 
shantanu_jana profile image
Shantanu Jana •

Collapse
 
shantanu_jana profile image
Shantanu Jana •

You can watch this video
youtube.com/watch?v=6yN7c4jfv_E

Collapse
 
toheebosundare profile image
toheebosundare •

You have to add event listener -DOMContentLoaded and save to local storage. Watch tutorials on YouTube on how to do that

Collapse
 
cyril174 profile image
Cyril Kariyawasam •

Thanks. Very simple way. Helpful

Collapse
 
shantanu_jana profile image
Shantanu Jana •

Welcome 😊

Some comments have been hidden by the post's author - find out more