Create To Do List App in JavaScript, HTML, and CSS

byCode Explained •
19


DOWNLOAD: To Do List App WITH JAVASCRIPT - SOURCE CODE





Watch the tutorial



What we're going to create :
the to-do list we're going to create has a beautiful UI, the user can add a to-do by filling the input and hit ENTER, after that he can rather check the to-do when it's done, or remove it using the delete button.

The user's to-do list is stored in the local storage, so when he refreshes the page, he can always find the list there.

There is the possibility for the user, to clear the list, by clicking the button clear, at the top right corner of our app.

Tags:

19 Comments

You're welcome to share your ideas with us in comments.

  1. UnknownMarch 17, 2019 at 1:56 AM

    Please, does this "to-do list " works after computer restart?

    ReplyDelete
  2. Code ExplainedMarch 17, 2019 at 8:12 AM

    Yes it works after restart.

    ReplyDelete
  3. UnknownOctober 21, 2019 at 1:30 PM

    Hi, I downloaded the code from gitHub but the app.js file is for the multiple choice quiz and not the toDO list. Can you update this please?

    ReplyDelete
  4. Ankit shrivastavaJune 14, 2020 at 5:45 AM

    Hey man, you are amazing..

    ReplyDelete
  5. Ankit shrivastavaJune 14, 2020 at 5:47 AM

    You should also make videos on, basics of javascript....if there already ..please tell me.
    you are a great teacher...✌

    ReplyDelete
  6. Code ExplainedJune 14, 2020 at 8:50 AM

    Thanks !
    Yeah there are some JavaScript Basics tutorials on my channel on YouTube.

    ReplyDelete
  7. UnknownJuly 10, 2020 at 3:23 PM

    Hey. I had a problem. when I made my `To Do List` button thing which shall be down. it comes in a small box not like urs. i double checked my code and its exactly like yours. any help?

    ReplyDelete
  8. Priti KshirsagarAugust 16, 2020 at 5:41 AM

    I had a problem .during when i click on the button content not display. plz solve

    ReplyDelete
  9. vinayakSeptember 28, 2020 at 5:39 AM

    😎

    ReplyDelete
  10. UnknownOctober 24, 2020 at 3:16 AM

    is it possible to create an edit button and function for this? thanks a lot!

    ReplyDelete
  11. Ankit shrivastavaOctober 24, 2020 at 3:41 AM

    I think it's possible.

    ReplyDelete
  12. UnknownOctober 24, 2020 at 4:35 AM

    sksks i dont know how hahaha i have tried but only errors appear

    ReplyDelete
  13. Adarsh cjJanuary 23, 2021 at 11:09 PM

    Hey I downloaded the file but the JavaScript file is empty. Can you please show the JavaScript code also

    ReplyDelete
    Replies
    1. Code ExplainedJuly 4, 2021 at 5:05 AM

      There is a ZIP/RAR file that contains the final project code.

      Delete
  14. UnknownApril 5, 2021 at 9:23 AM

    😁

    ReplyDelete
  15. UnknownApril 27, 2021 at 9:01 PM

    😘

    ReplyDelete
  16. Shubham MauryaJuly 4, 2021 at 3:01 AM

    hello sir !
    Sir, the event.keyCode is not working as it is now deprecated from new DOM , so what can i use in place of it as an alternativ.

    ReplyDelete
    Replies
    1. Code ExplainedJuly 4, 2021 at 5:04 AM

      Hi Shubham,

      event.keyCode is deprecated use event.key instead.
      so instead of using event.keyCode === 13 use event.key === "Enter"

      Delete
  17. UnknownJanuary 10, 2022 at 12:00 AM

    Really nice stuff. But, how do we create multiple pages such that you can put in items (to-dos) into a day (e.g 2 days time) even before the day comes; instead of only being able to input to-dos into the current day.

    ReplyDelete
Previous Post Next Post