DEV Community

Cover image for Create To-do List using Vanilla JavaScript

Create To-do List using Vanilla JavaScript

Karan Developer on June 30, 2021

It's a simple To-do app. As a beginner, creating these features like DOM manipulations, animations and dark theme feature was challenging for me. S...
Collapse
 
barelyhuman profile image
Reaper

That's a well planned project even if it's something you can normally just start coding with. Noice.
here's an alternative design if you'd like to check it out.
old.todo.reaper.im/
todo.reaper.im/

Collapse
 
atchafalaya profile image
James Proctor

Very nice! Your dark mode/light mode button seems to hang on clicking, going from dark to light it pauses at a full circle before going to light mode.

Collapse
 
barelyhuman profile image
Reaper • Edited

That’s actually the system theme mode.

If your OS is on dark, it’ll be dark, if its on light it’ll be light, else you can choose with the other 2 toggle states

Thread Thread
 
atchafalaya profile image
James Proctor

Oh, now I see. I like it very much! I notice that when I scroll down, the task list moves the first task underneath the entry box and therefore out of sight. Again, really like your to-do list, especially the share function.

Thread Thread
 
barelyhuman profile image
Reaper

Thanks :)

Collapse
 
dannyengelman profile image
Danny Engelman • Edited

Very good blog!
One minor suggestion, modern append is more powerful:

newTaskItem.appendChild(newCheckBtn)
newTaskItem.appendChild(newTaskBio)
Enter fullscreen mode Exit fullscreen mode

can be written as:

newTaskItem.append( newCheckBtn , newTaskBio )
Enter fullscreen mode Exit fullscreen mode

Append is available in every modern browser (not IE11)

See: developer.mozilla.org/en-US/docs/W...

Collapse
 
bigt1305 profile image
Anthony Hoss

Thank you for describing your whole process on seeing the project through; it helps than just a mere tutorial, really awesome end product!!:)

Collapse
 
stormyfiend profile image
Mrvn

cool what is the name of your theme in vscode

Collapse
 
karankumardev profile image
Karan Developer
Collapse
 
devfranpr profile image
DevFranPR

What a well structured process to make an aplication 👍

Collapse
 
atchafalaya profile image
James Proctor

It's a very beautiful design, but I can't seem to scroll down if I add enough tasks to go below the bottom of the page. Am I missing something?