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
 
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
 
abbie34 profile image
abbie34

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

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
 
collinst_14 profile image
Collins Tatenda Machekwa

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

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
 
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
 
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

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

Collapse
 
shantanu_jana profile image
Shantanu Jana

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