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.
Todo list is a list of tasks you need to complete or things that you want to do.
Download Codes From Here (You may have to search the title of this video there) – https://www.codingnepalweb.com
Second Channel – https://bit.ly/3aHNkru
Facebook – https://www.facebook.com/coding.np
Instagram – https://www.instagram.com/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: https://youtu.be/KmwpogFtb4Q
Levianth & Axol – Remember (feat. The Tech Thieves) [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: https://youtu.be/2DGxm1csQQM
Track: Jimmy Hardwind – Want Me (feat. Mike Archangelo)
➤ Watch: https://youtu.be/-Rw8zR9wmTY
Track: Lost Sky – Vision [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: https://youtu.be/7RU1l8GtGOc
Amazing
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");
}
});
Great
Bro…can you explain me line number 9 and please do reply
one of the best todo lost tutorials I've ever seen. Maybe the Best One ! Thanks …
How I can add icon trash to my todo, because in me icon don't show?
Completed the App
thoroughly enjoyed the video thanks
for anyone wondering, in line 36 onto the 19:16 timestamp, you may write newLitag = "<li>" + element + "etc" and not use the $, just in case someone is gettin some erros because of that
Thank you for commeting every line, it was really helpfull.
Here is the updated version of this Todo App – https://youtu.be/2QIMUBilooc