Todo List using HTML CSS & JavaScript | Todo List in JavaScript

Todo List using HTML CSS & JavaScript | Todo List using JavaScript
In this video, I have shown you how to create a todo list using javascript and in this todo the tasks of this todo are stored in the local storage of the browser so the tasks won't be lost after refreshing the page. In this todo you can add, delete task and many other things.
Hire me on Fiverr
www.fiverr.com/prakashahi
Create A Todo List with Edit, Delete & Filter Features in HTML CSS & JavaScript
Watch: • Create A Todo List App...
Download Codes From Here (You may have to search the title of this video there) - www.codingnepalweb.com
Second Channel - bit.ly/3aHNkru
Facebook - / coding.np
Instagram - / coding.np
Timestamps:
0:00 Demo part (Todo)
2:36 HTML & CSS start
11:10 JavaScript start
11:52 Enabling the (Plus/Add) button in onkeyup event
15:10 Inserting user-entered values in local storage & getting from local storage
22:02 Deleting particular li list from ul and local storage
24:25 Adding pending tasks number or array length in the (You have...pending tasks) text.
25:34 Deleting all lists/tasks on (Clear All) button click
26:27 Disabling the (Clear All) button if there aren't pending tasks
Music Credit:
Track: Jordan Schor & Harley Bird - Home [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • Jordan Schor & Harley ...
Levianth & Axol - Remember (feat. The Tech Thieves) [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • Levianth & Axol - Reme...
Track: Jimmy Hardwind - Want Me (feat. Mike Archangelo)
➤ Watch: • Jimmy Hardwind - Want ...
Track: Lost Sky - Vision [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • Lost Sky - Vision | Du...

Пікірлер: 183

  • @CodingNepal
    @CodingNepal3 жыл бұрын

    Here is the updated version of this Todo App - kzread.info/dash/bejne/ZIV9r7d7mc_Vn8Y.html

  • @vandanamehra5524

    @vandanamehra5524

    2 жыл бұрын

    Is code for filter is different I mean the element used in such code are totally different like btn and the function starts is it correct if wrong then please correct me because it's very helpful for me.. Please respond me as soon as possible..

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    I didn't understand.. Can you explain more..?

  • @vandanamehra5524

    @vandanamehra5524

    2 жыл бұрын

    the link that you share with us it's designing and code is different I just wanna know that how should I add the code for (all pending and completed) mention in this link in my project as my project is same as you describe in your video please help me how can I add such code in my project .. Js code is totally same .. I only face difficulty from last one week in how to add code of controls div in my project as when I run it to doesn't work.

  • @vandanamehra5524

    @vandanamehra5524

    2 жыл бұрын

    I hope I will get response from your side very soon..

  • @MDev1460

    @MDev1460

    Жыл бұрын

    @@CodingNepal hello, can i contact you in private please

  • @bomul0524
    @bomul05243 жыл бұрын

    It took about 10 hours, including full understanding and studying grammar for the video, but it was very informative and thank you for uploading a good video.

  • @WiLDeveD
    @WiLDeveD2 жыл бұрын

    one of the best todo lost tutorials I've ever seen. Maybe the Best One ! Thanks ...

  • @jovanmatthew4314
    @jovanmatthew43143 жыл бұрын

    Wow bro! Really good tutorial I finally made my first To-Do List. It worked out really well. Thanks man :)

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Great to hear!

  • @dublagemmz3446
    @dublagemmz3446 Жыл бұрын

    Coding Nepal is the best. Dude thanks, you helped me solve a big question. I didn't even know how to create a database or data storage where you can leave the html file that can still find your data, but when I watched this video and downloaded the files, I was able to find it. THANK YOU!!!

  • @anonymouscybersecurity4423
    @anonymouscybersecurity44233 жыл бұрын

    It took about 28 minutes the same length of the video. It was a fun project to work along with CodingNepal. I had made a few mistakes and errors and misspellings in the code however I constantly rewinded the video to copy EXACTLY what the instructor did. The comments weren't formal and correct.. The comments were more chatty and lazy. Finished the working project instead of quitting and giving up and becoming sad on each mistake I made. Even had ideas of improving the project however the tutorial was enough itself.

  • @acordescordas
    @acordescordas2 жыл бұрын

    for anyone wondering, in line 36 onto the 19:16 timestamp, you may write newLitag = "" + element + "etc" and not use the $, just in case someone is gettin some erros because of that

  • @mishrprashant10

    @mishrprashant10

    Жыл бұрын

    Same line I am facing issue....when I am adding value then it showing ${element}. Please help

  • @asifahmed6568

    @asifahmed6568

    Жыл бұрын

    Read the concept of template literals in JavaScript that should help you understand

  • @reckletdeveloper
    @reckletdeveloper2 жыл бұрын

    Hii I am an App Developer, I done my html css course 5 years ago and forgot everything. You helped me a lot..I need this listview for a big website.TQ

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Glad it was helpful!

  • @quangtran7954
    @quangtran79542 жыл бұрын

    It is very a understand,thank a lot

  • @sreekartammana
    @sreekartammana2 жыл бұрын

    PERFECT🔥

  • @losio6879
    @losio68792 жыл бұрын

    There should be also if statement for inputBox when is empty or not (at the end of showTasks function). Otherwise after adding element the button for adding will be enabled. Causing to accidentally add empty task after clicking again. But apart from that good tutorial. It helped me at work.

  • @Bearasdfhjkl
    @Bearasdfhjkl2 жыл бұрын

    thats what i needed brooo♥

  • @ujolmaharjan2010
    @ujolmaharjan20103 жыл бұрын

    great job bro nice to see from Nepal

  • @jawidhmuhammadh2592
    @jawidhmuhammadh25923 жыл бұрын

    Quality content...Thanks from Sri Lanka

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Glad you liked it!

  • @mohsinal-mamun5982
    @mohsinal-mamun59822 жыл бұрын

    Great video bro. Subscribed your channel few months ago. Stole your portfolio vidoes code to make my own 🙂🙂. And practicing project through your project. It’s helping me a lot and guiding me towards many JS topics to learn to complete and understand your project. Love you buddy.❣️❣️❣️

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Nice work.. Keep it up

  • @mounir101
    @mounir1013 жыл бұрын

    Pretty super job! Really it's very awesome app and easy to understand. So, for that I comment to say thank you.

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    You're welcome.. Stay tuned 💙

  • @digitalogylearning2937
    @digitalogylearning29373 жыл бұрын

    thank you🙌

  • @menalkour9684
    @menalkour96843 жыл бұрын

    VRY VRY NICE TUTORIAL

  • @yubiroaster6285
    @yubiroaster62853 жыл бұрын

    Just..... Awesome❤️🔥...... Love you brother❤️🤗✌️......... From NEPAL🇳🇵

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Thank you 💙😁

  • @abhishekbanoula1611
    @abhishekbanoula16112 жыл бұрын

    Thank you very much

  • @kusummmaharjan662
    @kusummmaharjan662 Жыл бұрын

    Easy to follow tutorial❤❤

  • @sahanabellad9974
    @sahanabellad99742 жыл бұрын

    Wow it's an amazing video. Thank you so much😊

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    You're welcome

  • @bleedblue8511
    @bleedblue85113 жыл бұрын

    Your videos and works are of high quality!

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Thank you 💙

  • @Meshv_patel
    @Meshv_patel3 жыл бұрын

    What if I put settings button ,where you put delete icon, and if somewhere click so it open function bar in that (delete, checked). So I want to enable it but I can't do it. Which code I have to use for onclick function on setting btn?

  • @ultradevx
    @ultradevx3 жыл бұрын

    Thank you for sharing your knowledge.

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    You're welcome 💙

  • @coder_rc
    @coder_rc3 жыл бұрын

    Great man! Awesome! Best!!!!

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Thank you 💙

  • @kachamsatwika4284
    @kachamsatwika42843 жыл бұрын

    it is good !! but it would be great if u have explained it!!

  • @lkorulez2011
    @lkorulez20112 жыл бұрын

    Excellent tutorial. I would add a function that adds tasks by hitting "Enter". This can be done with: document.body.addEventListener('keypress', (e) =>{ let userData = inputBox.value; if(e.key == 'Enter' && userData.trim() != 0){ let userData = inputBox.value; let getLocalStorage = localStorage.getItem("New Todo"); if(getLocalStorage == null){ listArr = []; }else{ listArr = JSON.parse(getLocalStorage); } listArr.push(userData); localStorage.setItem("New Todo", JSON.stringify(listArr)); showTasks(); addBtn.classList.remove("active"); } });

  • @alin3926
    @alin39262 жыл бұрын

    Thank you for commeting every line, it was really helpfull.

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    You're so welcome and don't forget to watch the updated version of this Todo App - kzread.info/dash/bejne/ZIV9r7d7mc_Vn8Y.html

  • @PGSCHOOLFORPROGRAMMING
    @PGSCHOOLFORPROGRAMMING2 жыл бұрын

    I like your content very much keep going

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Thanks a lot!

  • @michaeltcl
    @michaeltcl2 жыл бұрын

    Thank you for the tutorial!!!

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    You are so welcome!

  • @thangkhongbug6060
    @thangkhongbug60603 жыл бұрын

    Ờ mây dình..gút chóp anh chai

  • @programmingwithkartik4319
    @programmingwithkartik43193 жыл бұрын

    It is very hard to make this type of thing... Salute codingnepal 😘😘😘

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Thank you so much

  • @Hangoutapp

    @Hangoutapp

    3 жыл бұрын

    Even me trying. Until I met codding Nepal. Problem solve

  • @MrK-nb7xr
    @MrK-nb7xr2 жыл бұрын

    Great

  • @MrBioneto
    @MrBioneto2 жыл бұрын

    Greate video!!! Thank you!

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    You are so welcome!

  • @Fabyfakid
    @Fabyfakid2 жыл бұрын

    Thank you so much for this 🙏🙏🙏🙏

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    My pleasure 😊

  • @Iamklif
    @Iamklif2 жыл бұрын

    Great one, do you think of adding an edit function?

  • @jemuelespiritu1641
    @jemuelespiritu16413 жыл бұрын

    thank you

  • @CreativeTutorialsWeb
    @CreativeTutorialsWeb3 жыл бұрын

    Awesome Job Lovely

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Thank you 💙

  • @hakanakcnar553
    @hakanakcnar5532 жыл бұрын

    Thanks a lot its very helpful

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Most welcome!

  • @zedzed4447
    @zedzed44473 жыл бұрын

    Just wow ....😯

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Thank you 💙

  • @ThiagoFK55
    @ThiagoFK553 жыл бұрын

    Good stuff. But if you don't clean before leaving, it stays there. So, when you return and add a new task, it loads every task again.

  • @achhatkumargupta2954
    @achhatkumargupta29543 жыл бұрын

    Great job!

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Thank you 💙🙂

  • @ujenbasi9495
    @ujenbasi94953 жыл бұрын

    Wow well explained 💖

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Thank you 💙

  • @Hangoutapp
    @Hangoutapp3 жыл бұрын

    Hi Nepal. The delete button is not on the task. When I type an task in the search.

  • @adrianmontilla3095
    @adrianmontilla30953 жыл бұрын

    Bro, it would be great if you made a tutorial by making a responsive navigation menu with its hamburger button like the one on the Woocommerce main page with its different sections and other thanks please

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Please check our navigation bar playlist because I've already made many videos on navigation bar.

  • @allankiyochi
    @allankiyochi2 жыл бұрын

    Amazing

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Thanks

  • @sudaissd6464
    @sudaissd64643 жыл бұрын

    keep going pro

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Ok bro.. Stay tuned 💙

  • @SayemTutorial
    @SayemTutorial3 жыл бұрын

    Great keep it up brother😋😋

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Thank you bro 💙

  • @stephengallego7196
    @stephengallego71963 жыл бұрын

    Good Job! 🤗

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Thank you 💙

  • @khalandarblast5644
    @khalandarblast56443 жыл бұрын

    Awesome

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Thank you 💙

  • @kursatvarl2877
    @kursatvarl28773 жыл бұрын

    it isn't working what happens on 18.00 on key value list, nothing is added on list so when I click add button nothing happens I cannot solve

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    You can download code files if you're getting problems

  • @mavenxplays9957
    @mavenxplays99573 жыл бұрын

    nice one ❣️

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Thanks man 💙

  • @mavenxplays9957

    @mavenxplays9957

    3 жыл бұрын

    @@CodingNepal pleasure ❣️

  • @OrgilsYTChannel
    @OrgilsYTChannel3 жыл бұрын

    Very nice thank you

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    You're welcome 💙

  • @OrgilsYTChannel

    @OrgilsYTChannel

    3 жыл бұрын

    Can you make a connect 4 game???

  • @tharunkumar9158
    @tharunkumar91583 жыл бұрын

    Super

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Thank you 💙

  • @ErdemErciyas
    @ErdemErciyas3 жыл бұрын

    Thank you very much... i want to add new elements. "Pagination, task element vote, list sort etc.". Can you help me :)

  • @Bearasdfhjkl
    @Bearasdfhjkl2 жыл бұрын

    i need to add a checkbox to mark it up how can i do that?

  • @andr_hot
    @andr_hot2 жыл бұрын

    How I can add icon trash to my todo, because in me icon don't show?

  • @mohaanak4049
    @mohaanak40493 жыл бұрын

    awesome

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Thank you 💙

  • @hidayathidayat4469
    @hidayathidayat44693 жыл бұрын

    hey, thanks. +1 subs

  • @felixgael6596
    @felixgael65963 жыл бұрын

    nice tutorial 🔥

  • @felixgael6596

    @felixgael6596

    3 жыл бұрын

    @codingNepal do you need a backend or something to store a list of data for?

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    You mean I used backend to store these lists? If yes, no I didn't use any backend things for this.. These lists or datas of this todo are stored in the local storage of the browser.

  • @johngeronimo8821
    @johngeronimo88213 жыл бұрын

    Thank you for this. Do you have tutorial about this but in Ionic and Angular style?

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    No.. Still not.

  • @moyoolojede444
    @moyoolojede4443 жыл бұрын

    Thanks for the tutorial! Is there any chance you can help make this app with a edit button?

  • @dineshpandey160
    @dineshpandey1603 жыл бұрын

    Nice video

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Thank you 💙

  • @dzienisz
    @dzienisz2 жыл бұрын

    Hi Great video! The only problem I have is that all js code in is one file :( have you thought about implementing it in a MVC way?

  • @nithin1674
    @nithin16742 жыл бұрын

    Good one bro, to extend to this I added a edit button that will replace the content of that task with the content in inputbox but this isn't such a good way, anyone have any new solution?

  • @yuliia1507
    @yuliia15073 жыл бұрын

    Just great ! Could you tell me please what software do you use for screen recording ? Is it free to use ?

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    It's a default filmora screen recorder which comes with filmora video editor.

  • @yuliia1507

    @yuliia1507

    3 жыл бұрын

    @@CodingNepal thanks 🙂

  • @kingsleynmai5608

    @kingsleynmai5608

    2 жыл бұрын

    @@CodingNepal Is it free??

  • @Heheh01737

    @Heheh01737

    2 жыл бұрын

    @@kingsleynmai5608 no

  • @MOHITRANA-to7rf
    @MOHITRANA-to7rf2 жыл бұрын

    please keep music at low volume unable to focus. btw insane content.

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    I'm really sorry for it. I'll do it in my upcoming videos.

  • @muhammadfaruqarumaypratama4622
    @muhammadfaruqarumaypratama46222 жыл бұрын

    Uncaught TypeError: Cannot set properties of null (setting 'onkeyup') somebody maybe can help me🙏🙏

  • @rajeshweb7594
    @rajeshweb75943 жыл бұрын

    Super app

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Thank you 💙

  • @eezee-6697
    @eezee-66973 жыл бұрын

    can u make a multiple upload files with preview sir. (can upload word, pdf, photos or videos) thank you!. ur video would be a great help!

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Sure.. Stay tuned 💙

  • @ganeshKiD
    @ganeshKiD3 жыл бұрын

    Thanks Sir Really awesome Plz suggest The name of projects that after that project I will feel confident in vanilla javascript Plz Sir

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    You can search on KZread, Google for this but I've also made many videos related javascript.. Please check our javascript playlist.

  • @ganeshKiD

    @ganeshKiD

    3 жыл бұрын

    @@CodingNepal okk tysm

  • @hasanmahmudkhan966
    @hasanmahmudkhan9662 жыл бұрын

    great work. But no edit option why? Add edit option next video.

  • @rlagudwhd
    @rlagudwhd3 жыл бұрын

    I got error that Uncaught ReferenceError: listArray is not defined and line 15 showtask as well

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    You may forgot to define listArray please check your js codes.

  • @web_dev210
    @web_dev2102 жыл бұрын

    Sir What is 1 in the delete task function

  • @pranav-patil
    @pranav-patil2 жыл бұрын

    bro , your code is not working for long strings ,meaning if i put 7,8 words then there is no option for deleting that list

  • @shuhratabdurahmonov7783
    @shuhratabdurahmonov77833 жыл бұрын

    Can this be used for registration as well. That he will keep it to himself and keep it in mind as he renews it.

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    I didn't understand bro.

  • @shuhratabdurahmonov7783

    @shuhratabdurahmonov7783

    3 жыл бұрын

    @@CodingNepal It is not necessary. Thank you for your reply.

  • @Geeki_Sut
    @Geeki_Sut3 жыл бұрын

    i am learning web development good to do liast

  • @abulalalalalaabulala4521
    @abulalalalalaabulala45212 жыл бұрын

    how to build a recycle bin?

  • @Faizansep5
    @Faizansep53 жыл бұрын

    I followed your tutorial and made this and i wanna share it on LinkedIn.. How will i be able to tag you there to give credit?

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Credit isn't required but if you want then you can give this video link or it kzread.info

  • @mohammadforhad2473
    @mohammadforhad24733 жыл бұрын

    I want a live online editable a To-do list Can you please help me

  • @varunsharma4165
    @varunsharma41652 жыл бұрын

    Bro...can you explain me line number 9 and please do reply

  • @gowthambalaji2019
    @gowthambalaji20193 жыл бұрын

    Which software u have use?

  • @kriteshthapa9143
    @kriteshthapa91433 жыл бұрын

    I love it. but can you make it accessible offline that can be used in mobile.

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Yes it can be use in offline but icons won't show.. You can download offline files of font awesome and use this complete todo in offline.

  • @user-vl6bn3pc7y
    @user-vl6bn3pc7y2 жыл бұрын

    how you add trash icons without tags or styles?

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    I have used online cdn link of fontawesome. Fontawesome provides free icons that can be used on html projects

  • @lind-27
    @lind-273 жыл бұрын

    🙂👊

  • @msthetechguy
    @msthetechguy2 жыл бұрын

    use headphones music is like 3d

  • @kingsleynmai5608
    @kingsleynmai56082 жыл бұрын

    Your videos are good and helping but are too fast. I will have to pause, play and go back on numerous occasions to understand the code

  • @ronelbanda677
    @ronelbanda6773 жыл бұрын

    What application are you coding that?

  • @alexanderwinter6653

    @alexanderwinter6653

    3 жыл бұрын

    He is using a default filmora screen recorder which comes with filmora video editor.

  • @Sonijha245
    @Sonijha2452 жыл бұрын

    6:27

  • @leanandearn19
    @leanandearn192 жыл бұрын

    20:36

  • @Bume71
    @Bume712 жыл бұрын

    3:53

  • @leanandearn19
    @leanandearn192 жыл бұрын

    13:48

  • @rasmiJati
    @rasmiJati2 жыл бұрын

    19:30

  • @vincenttok
    @vincenttok2 жыл бұрын

    can someone help me with the JS code ?. I don't know where my error in my code ,it didn't work on my Local Storage

  • @jockyjackson9758

    @jockyjackson9758

    2 жыл бұрын

    yes, i can help you!

  • @vincenttok

    @vincenttok

    2 жыл бұрын

    @@jockyjackson9758 Do yo have the same problem?

  • @jockyjackson9758

    @jockyjackson9758

    2 жыл бұрын

    @@vincenttok no, I am clear with the code. but may be I can help you to understand or to find bugs in your code.

  • @coldarif
    @coldarif3 жыл бұрын

    can you do it in jQuery

  • @indian00021
    @indian0002111 ай бұрын

    Is this for beginners

  • @marcangebattinicolonna1310
    @marcangebattinicolonna13102 жыл бұрын

    Hi your example is so nice, also may be you have a code to send it by mail in PDF mode ? Best regards

  • @kursatvarl2877
    @kursatvarl28773 жыл бұрын

    while I was writing inputBox.onkeyup part, There is error like "Uncaught TypeError: Cannot set property 'onkeyup' of null" please Help!

  • @CodingNepal

    @CodingNepal

    3 жыл бұрын

    Check that line where you've selected an input field means when you're selecting input field like this const inputBox = document.querySelector("input"). You did mistake here please check this line.

  • @syedazmeer6258

    @syedazmeer6258

    2 жыл бұрын

    @@CodingNepal same error with me. checked several times but same code as yours. Pls Help I spent a day on this mistake.

  • @dubbacteria8095
    @dubbacteria80952 жыл бұрын

    Uncaught ReferenceError: element is not defined at showTask (script.js:26) at HTMLButtonElement.addBtn.onclick (script.js:15) I got this and i can't find why 😭

  • @dubbacteria8095

    @dubbacteria8095

    2 жыл бұрын

    Nevermind .. I forgot one " ) "