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
Here is the updated version of this Todo App - kzread.info/dash/bejne/ZIV9r7d7mc_Vn8Y.html
@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
2 жыл бұрын
I didn't understand.. Can you explain more..?
@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
2 жыл бұрын
I hope I will get response from your side very soon..
@MDev1460
Жыл бұрын
@@CodingNepal hello, can i contact you in private please
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.
one of the best todo lost tutorials I've ever seen. Maybe the Best One ! Thanks ...
Wow bro! Really good tutorial I finally made my first To-Do List. It worked out really well. Thanks man :)
@CodingNepal
3 жыл бұрын
Great to hear!
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!!!
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.
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
Жыл бұрын
Same line I am facing issue....when I am adding value then it showing ${element}. Please help
@asifahmed6568
Жыл бұрын
Read the concept of template literals in JavaScript that should help you understand
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
2 жыл бұрын
Glad it was helpful!
It is very a understand,thank a lot
PERFECT🔥
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.
thats what i needed brooo♥
great job bro nice to see from Nepal
Quality content...Thanks from Sri Lanka
@CodingNepal
3 жыл бұрын
Glad you liked it!
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
2 жыл бұрын
Nice work.. Keep it up
Pretty super job! Really it's very awesome app and easy to understand. So, for that I comment to say thank you.
@CodingNepal
3 жыл бұрын
You're welcome.. Stay tuned 💙
thank you🙌
VRY VRY NICE TUTORIAL
Just..... Awesome❤️🔥...... Love you brother❤️🤗✌️......... From NEPAL🇳🇵
@CodingNepal
3 жыл бұрын
Thank you 💙😁
Thank you very much
Easy to follow tutorial❤❤
Wow it's an amazing video. Thank you so much😊
@CodingNepal
2 жыл бұрын
You're welcome
Your videos and works are of high quality!
@CodingNepal
3 жыл бұрын
Thank you 💙
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?
Thank you for sharing your knowledge.
@CodingNepal
3 жыл бұрын
You're welcome 💙
Great man! Awesome! Best!!!!
@CodingNepal
3 жыл бұрын
Thank you 💙
it is good !! but it would be great if u have explained it!!
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"); } });
Thank you for commeting every line, it was really helpfull.
@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
I like your content very much keep going
@CodingNepal
2 жыл бұрын
Thanks a lot!
Thank you for the tutorial!!!
@CodingNepal
2 жыл бұрын
You are so welcome!
Ờ mây dình..gút chóp anh chai
It is very hard to make this type of thing... Salute codingnepal 😘😘😘
@CodingNepal
3 жыл бұрын
Thank you so much
@Hangoutapp
3 жыл бұрын
Even me trying. Until I met codding Nepal. Problem solve
Great
Greate video!!! Thank you!
@CodingNepal
2 жыл бұрын
You are so welcome!
Thank you so much for this 🙏🙏🙏🙏
@CodingNepal
2 жыл бұрын
My pleasure 😊
Great one, do you think of adding an edit function?
thank you
Awesome Job Lovely
@CodingNepal
3 жыл бұрын
Thank you 💙
Thanks a lot its very helpful
@CodingNepal
2 жыл бұрын
Most welcome!
Just wow ....😯
@CodingNepal
3 жыл бұрын
Thank you 💙
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.
Great job!
@CodingNepal
3 жыл бұрын
Thank you 💙🙂
Wow well explained 💖
@CodingNepal
3 жыл бұрын
Thank you 💙
Hi Nepal. The delete button is not on the task. When I type an task in the search.
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
3 жыл бұрын
Please check our navigation bar playlist because I've already made many videos on navigation bar.
Amazing
@CodingNepal
2 жыл бұрын
Thanks
keep going pro
@CodingNepal
3 жыл бұрын
Ok bro.. Stay tuned 💙
Great keep it up brother😋😋
@CodingNepal
3 жыл бұрын
Thank you bro 💙
Good Job! 🤗
@CodingNepal
3 жыл бұрын
Thank you 💙
Awesome
@CodingNepal
3 жыл бұрын
Thank you 💙
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
3 жыл бұрын
You can download code files if you're getting problems
nice one ❣️
@CodingNepal
3 жыл бұрын
Thanks man 💙
@mavenxplays9957
3 жыл бұрын
@@CodingNepal pleasure ❣️
Very nice thank you
@CodingNepal
3 жыл бұрын
You're welcome 💙
@OrgilsYTChannel
3 жыл бұрын
Can you make a connect 4 game???
Super
@CodingNepal
3 жыл бұрын
Thank you 💙
Thank you very much... i want to add new elements. "Pagination, task element vote, list sort etc.". Can you help me :)
i need to add a checkbox to mark it up how can i do that?
How I can add icon trash to my todo, because in me icon don't show?
awesome
@CodingNepal
3 жыл бұрын
Thank you 💙
hey, thanks. +1 subs
nice tutorial 🔥
@felixgael6596
3 жыл бұрын
@codingNepal do you need a backend or something to store a list of data for?
@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.
Thank you for this. Do you have tutorial about this but in Ionic and Angular style?
@CodingNepal
3 жыл бұрын
No.. Still not.
Thanks for the tutorial! Is there any chance you can help make this app with a edit button?
Nice video
@CodingNepal
3 жыл бұрын
Thank you 💙
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?
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?
Just great ! Could you tell me please what software do you use for screen recording ? Is it free to use ?
@CodingNepal
3 жыл бұрын
It's a default filmora screen recorder which comes with filmora video editor.
@yuliia1507
3 жыл бұрын
@@CodingNepal thanks 🙂
@kingsleynmai5608
2 жыл бұрын
@@CodingNepal Is it free??
@Heheh01737
2 жыл бұрын
@@kingsleynmai5608 no
please keep music at low volume unable to focus. btw insane content.
@CodingNepal
2 жыл бұрын
I'm really sorry for it. I'll do it in my upcoming videos.
Uncaught TypeError: Cannot set properties of null (setting 'onkeyup') somebody maybe can help me🙏🙏
Super app
@CodingNepal
3 жыл бұрын
Thank you 💙
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
3 жыл бұрын
Sure.. Stay tuned 💙
Thanks Sir Really awesome Plz suggest The name of projects that after that project I will feel confident in vanilla javascript Plz Sir
@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
3 жыл бұрын
@@CodingNepal okk tysm
great work. But no edit option why? Add edit option next video.
I got error that Uncaught ReferenceError: listArray is not defined and line 15 showtask as well
@CodingNepal
3 жыл бұрын
You may forgot to define listArray please check your js codes.
Sir What is 1 in the delete task function
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
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
3 жыл бұрын
I didn't understand bro.
@shuhratabdurahmonov7783
3 жыл бұрын
@@CodingNepal It is not necessary. Thank you for your reply.
i am learning web development good to do liast
how to build a recycle bin?
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
3 жыл бұрын
Credit isn't required but if you want then you can give this video link or it kzread.info
I want a live online editable a To-do list Can you please help me
Bro...can you explain me line number 9 and please do reply
Which software u have use?
I love it. but can you make it accessible offline that can be used in mobile.
@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.
how you add trash icons without tags or styles?
@CodingNepal
2 жыл бұрын
I have used online cdn link of fontawesome. Fontawesome provides free icons that can be used on html projects
🙂👊
use headphones music is like 3d
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
What application are you coding that?
@alexanderwinter6653
3 жыл бұрын
He is using a default filmora screen recorder which comes with filmora video editor.
6:27
20:36
3:53
13:48
19:30
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
2 жыл бұрын
yes, i can help you!
@vincenttok
2 жыл бұрын
@@jockyjackson9758 Do yo have the same problem?
@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.
can you do it in jQuery
Is this for beginners
Hi your example is so nice, also may be you have a code to send it by mail in PDF mode ? Best regards
while I was writing inputBox.onkeyup part, There is error like "Uncaught TypeError: Cannot set property 'onkeyup' of null" please Help!
@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
2 жыл бұрын
@@CodingNepal same error with me. checked several times but same code as yours. Pls Help I spent a day on this mistake.
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
2 жыл бұрын
Nevermind .. I forgot one " ) "