How To Create To-Do List App Using HTML CSS And JavaScript | Task App In JavaScript
ฝัง
- เผยแพร่เมื่อ 1 ต.ค. 2024
- Learn How To Create TO DO List App Using HTML CSS And JavaScript | Task App In JavaScript Step By Step Tutorial For Beginners
#JavaScript #JavaScriptProjects
👉 Download 30 JavaScript projects Source Code (Including To-Do List App):
greatstack.dev...
👉 My JavaScript Advanced Course: greatstack.dev... (75% Discount)
❤️ SUBSCRIBE: goo.gl/tTFmPb
In this video you will learn to make a To-Do List App or Website with HTML, CSS and JavaScript.
In this To Do list we can add our task list and mark that task as completed or incomplete. We can write the new task in the input box and click on the "Add" button then the new task will be added to the list.
We can click on the task name to mark it as completed or incomplete task. We will add a close icon to delete the particular task from the ToDo list.
In this JavaScript Project we are using Local Storage that will store the task list or To Do list in your web browser, So that if you close and restart the browser then also it will display your saved To-Do List
Download Images: greatstack.dev...
More JavaScript Projects: greatstack.dev/
JavaScript to-do list, JavaScript To-Do List, JavaScript Task App, ToDo List using JavaScript, Task manger using JavaScript, JavaScript projects for beginners, JavaScript projects for students, JavaScript tutorial, JavaScript project for college students, college project in javascript, To-Do List App
-----------------------------------------
Suggested Course:
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 easytutorialsp...
-------------------------------------
Recommended Videos:
Learn Complete HTML and CSS from basics:
► • HTML And CSS Tutorial ...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make a Business website step by step:
► • How To Make Website Us...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make fitness website design using HTML CSS:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make a Job Portal website design with HTML & CSS:
► • How To Make Website Us...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
Affordable web hosting (coupon- EASYTUTORIALS)
👉 easytutorialsp...
My recommended tools and tutorials
👉 easytutorialsp...
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------------------------
Connect with me:
👉 linktr.ee/iama...
👉 My JavaScript Advanced Course: greatstack.dev/go/javascript-course (75% Discount)
the worst part in javascript is when you make a small mistake and the whole code doesn't work lol
bro I missed a comma🤣
xD@@coding688
@@coding688 you don't need a comma
bro css is even worst here atleast we can console log and in console error will show ,what part is running in css code me bug dhundo beth ke
But now you can use chat gpt to find errors
Sir you are the only reason i am not quitting coding . You make every project very easy . Please make some unique projects in the same way ❤
Sure. I will try my best. Thank You. 😊
I wasn't able to save can you help me with this
@@TRUTH_NEVER_HIDE_ control + s saves in vscode
@@GreatStackDev
Sir I am facing issue that document is not defined
Any solution please
22:58 can anyone explain me that what was the purpose of adding false in addeventListener?
In css use word wrap so that if the text of the task is too long it goes to the next line and increase the right padding so that the remove span doesn't get interrupted
ul li{
word-wrap: break-word;
padding: 12px 45px 12px 50px;
}
I usually don’t comment, but videos like yours impress me. Very good job! Thank you for sharing your wisdom with us!!
I love you
@@yousefkhaled5758 I love you too 😘
LMAO, any time someone says "I usually don't comment", they are lying. It doesn't help your credibility or make your point any more valid by saying something like that.
why didn't you make addeventlistener for the add button instead of an internal function in the html?
why you didn't make the code so if someone hits enter on the keyboard it adds the task instead of just with the mouse?
why you not explain what false does in the listcontainer function?
why you not explain why LI and SPAN have to be in caps in the function??
That's my question too!
But I finally was able to find out by myself!
Please provide me the source code , if someone has written it....I need it urgently !!!!! 🥺
I like it that you are doing more JavaScript projects. But,It would be super great if you do JavaScript basic to advanced tutorial first and then these projects.
@@CrazyAshu34 suggest some 🙂
@@vishalplayzz2580only Dom manipulation is 🥷 Worthy 🦆
There are like thousands of videos like that on TH-cam.
WOW. This video achieved the same thing with way more simplicity than other tutorials. which is helpful for beginners.
if you guys want to add the JS feature where you can add a task by pressing the enter key
inputBox.addEventListener("keyup", function(event) {
if (event.keyCode === 13) { // 13 is the keycode for "Enter"
event.preventDefault();
addTask();
}
Ｗow~~This is exactly what I am looking for. Thank you so much for sharing!
@@j_u_d_y3041 let me know how your website looks! Very curious to see 👀
Where do I place it ?
where should i place this in the js code?
This code doesn't work. Here is the code I use (add it to the end of the JavaScript file):
inputBox.addEventListener("keypress", function (event) {
if (event.key === "Enter") {
event.preventDefault();
addTask();
}
});
very rare to see such explanation sir , thank you
Glad to hear that. Thanks for your comment. 😊
please don't stop liking all his videos. you are an amazing teacher. Love from the United Kingdom.
Glad you liked it. Thanks for supporting our channel. 😊
checked and unchecked icons disappear if not using the living server
done
first project added
heres some enhancment to code:
1- use .trim() to the input value to prevent user from adding spaces (it doesnt make sense to be task, also it destroys the shape)
simply use
let trimmedValue = input1.value.trim()
and in the "addTask" function just change the " input1.value === "" " to the new trimmedValue and thats it
also try t avoid alert since its annoying, make a popup in the screen bottom corner
also you can save what the user typing in the input in session storage to be saved if he reloaded.
THANK YOU! I will be adding my own features and functions to this basic to do list!
But jb mai refresh kr rha hu toh Checked task AGAIN UNCHECKED ho rha hai...
How can I fix that...
Before you watch and follow along in your IDE, do yourself a favor and set the video soeed at a .75 or .5. Also this is very fast paced and there isn't much explanation on anything. It's just coded and it's functionality is shown. I dont recommend this tutorial but I haven't found anything better on to do lists.
hello i don't understand why but my background-image: url() dont work
same
I got it all sorted! Thank you so much! Very valuable lesson.
I still have a long way to go since I cant do it all by myself. It's pretty much a copy-paste project so far, I hope one day I can do it by myself.
Just out of curiosity, when making sure the data is saved. How and where exactly does that data go? It works just fine, but that data has to go somewhere, right? How does it know where to recall the data from and how and where can I find that data without opening the website?
Bro its so simple to find the local storage data that saved from the savaData() function. For that you have to inspect the page and go to the application section. In that section to the left side you will find local storage. You have to click the dropdown menu and find the value those value.
Excellent tutorial. Thanks very much, greetings from Brasil
It's great but I have problems trying to add the cross icon in the javascript I did it exactly the same way you did it but mine didn't work
Same here
Sir I have watched many videos to make my To-Do list but I was confuse while watching them but sir your video is very winderful
bro is litterly selling source code on his web site🤣😂
tysm this is why i am not quitting coding today❤❤🔥🔥
I'm so glad! Thank You. Keep coding.😊
Good day. Thank you for the tutorial, but please for the part of e.target.tagname === LI. Why is the LI in uppercase? This was also done for the SPAN tag. Thanks.
need answer for this too, and also why false at the end as an argument??
if you still need this. The tagName property returns the tag name in UPPERCASE so we need to check the name with the tag written in uppercase
its unable to understand is it tutorial or just you show casing your project? you just keep writing code but not explaining any line or not showing step by step modification.
Really commendable sir 😊.
I found many errors in my way of doing this project ,then also I really wanted to created it . Then solved those errors and finally completed the project ✅🥳.
Tqsm sir, u have given all the detailed explanation of the complete process of ToDo list.I have created an awsome list tqsm
21:35 what is the meaning of ,false); at the end
I had done almost all the tasks, liked the video, subscribed to the channel, but didn't share the video, because you deleted that task.
Cool examples with step by step. But for me personally I would rather watch you figure it out and not just type the code that is on your left monitor. When you screw smth up and fix it, then I learn more that from this. But maybe majority of people like it this way. Keep it up!
same pinch
Before watching this video i thought its hard to learn css html ans js together but after watching this i realise its very easy
im having issues with the images not showing up and the button not rounding off at the end. could anyone help me out? please and thank you!
Directory problem
After clicking on add button it shows error can't read properties of null at addTask at HTMLButtonElement. Onclick can anyone tell me what to do now?
You just saved a brother’s life 😂
check and uncheck not working😟
most fav. channel on youtube is greatstack
Can anybody please explain
Why here
(e.target.tagName === "LI")
"LI" is written in caps but not in normal tagname like "li"
Because HTML is not a case sensitive language like javascript.
@@RealFunrr but if we try to write "li"
It wont work..
Why so? Only capitlised LI works..
Can you explain?
The behavior you've observed is due to the nature of the `tagName` property in the DOM API. When you access the `tagName` property of an element, it always returns the tag name in uppercase, regardless of how it's written in the HTML source.
For instance, even if your HTML is:
```html
Some item
```
The JavaScript code:
```javascript
let listItem = document.querySelector('li');
console.log(listItem.tagName); // This will output: "LI"
```
This uppercase convention is consistent across all browsers for historical and compatibility reasons. So, when checking the `tagName` in JavaScript, always use uppercase strings for comparison, like 'LI', 'SPAN', 'DIV', etc.
@@JayReaver22 TQ bro. U clear my doubt
Doing project is good but don't follow his every instruction.
This guy is using 50/60 px in padding which is extremely dirty habit of coding. Use relative unit of measurement .
This is just only views oriented channel .
Hello sir, when i am deleting item with event listener ALL of my list items are getting deleted and future items added to the list do not show up
looks like it is deleting the UL instead of deleting the LI tag
My code is not run I'm tired and was not find error Can anyone help me . Why javascript code is not run
Which part of the code isn't working for you? I got mine working perfectly now, granted it took me a while to find where I made a mistake.
This was great, i made some changes using font awesome icons instead of the images.
Glad to hear that. Thank you. 😊
It's so simple bro and bow to the power of localStorage
Thank you so much sir...🙏
Have a doubt, why it's working only if we are writing e.target.tagName === "LI" why not working with "li", same with "SPAN". Btw Like(checked), share(checked), subscribe(checked). Thank you for giving Knowledge to add data in the Browser.🥹
that was perfect but when I tried to put image in the css for the unchecked and checked it didn't appear
Have you download the picture ?? Which is given in the description box ?
my java script file is not working
what i need to do now?
Sir, very awesome project. Also the explanations helped me a lot because I could revise and learn a lot of JS methods through this single project. Thanks for providing quality content for free!!!
hey bro can u send the code for this, if u did it and uploaded to github
In addition to the ADD button if we want to add any task by just pressing enter on our Laptop/PC what modification should we do in the code??
bro i go through so many videos relevant to project but they won't explain the code simply the code was going but among them you'r the one only man explain the code with proper manner
WHATS UP WITH THIS "LI" why its not workng with 'li' if(e.target.tagName==="LI") {
e.target.classList.toggle("checked");
}else if(e.target.tagName==="SPAN") {
e.target.parentElement.remove();
}
great content and you explain every line so nicely
This video is super helpful and a great lesson to learn. Unfortunately, something won't allow my task to clear after pressing "Add". I don't know why, but everything else works.
i am having issues in my eventListener the IF part is not working the else is working HELP!!
listContainer.addEventListener("click", function(e){
if(e.target.tagName === "LI") {
e.target.classList.toggle("checked");
saveData();
}
else if(e.target.tagName === "SPAN") {
e.target.parentElement.remove();
saveData();
}
});
let li = document.createElement("li");
li.innerHTML=inputBox.value;
listContainer.appendChild(li);
let span = document.createElement("span");
span.innerHTMl = "\u00d7";
li.appendChild(span);
This cross sign is not showing. Although Span took place in li
span.innerHTML="\u00d7"
@@kanhaiyasharma2751 change li ->LI span->SPAN
i'm not able to toggle checked class when there is more that one li in the list container.
anyone knew how to resolve this one.
same issue
"Excellent tutorial! Clear instructions for creating a functional to-do list app with HTML, CSS, and JavaScript."
Do the modern JavaScript by traversy media course especially the DOM section and the shopping list project .Then follow this project until the css part .Then do the JavaScript on your own without following the tutorial. I did it and i am glad i have not followed the tutorial because i learned alot 😅.
i am a biggner and i did followed this whole tutorial and completed till the end. its easy to follow but there are so many things which i didn't properly understood as someone new. tutorial could be more descriptive for biggners point of view like what are functions, variables etc.
Please can someone help, I'd like to know how to do this using .innerText instead of .innerHTML because it is rendering the html entity (/u00d7) literally when . innerText is used 🙏 18:27
First of all why would you use innerTEXT instead of innerHTML.
One of the solution is to just copy that symbol from anywhere in the internet and paste it instead of that code.
And innerTEXT literally means that the content provided will be shown in the form of text so no wonder why you are getting that.
sir its very helpful by watching your video and coding will give me a more experience
Your code explanation is very easy to understand. thank you for giving us this tutorial
Thank you! 😊 Keep doing more projects like this.
I wrote the same code but my js code is not working can someone explain me why it is happening?
Following your tutorials is the next level of learning coding. I am following your tutorials while doing my freecodecamp lessons :)
12:36 why did you update the img in before, why couldn't we do it directly
Same issue here even I didn't get that check mark
button onClick event didn't work for me but you can just use AddEventListener
button.addEventListener("click", function () {
if (inputBox.value === "") {
alert("You have to write something!");
} else {
console.log("click!");
const node = document.createElement("li");
const textnode = document.createTextNode(inputBox.value);
node.appendChild(textnode);
container.appendChild(node);
}
inputBox.value = "";
});
All I can say is thank you..
Seeing real life applications of basic concepts with ease is amazing.. ❤
Glad you liked it!
Which extension did u use for running it!!??
Code is so complicated for beginners it's for those who have good knowledge of js
I am not getting to delete the task by clicking the cross button can anyone solve
I love this video but the JavaScript is not connecting to the webpage.
WOW. Thank you for such an easy-to-understand tutorial. I didn't know with such simple (not saying that it's easy) Javascript, you can create a to-do list!!
Can u Help me.. I can't add the 'x' icon at the end of the sentence ..even when i did as mentioned in your video. Any solutions?|
But the other parts are working very good and nice..this is the only place i am struck
right:0
If anyone wants to make edit function
add first this in addTask
let button = document.createElement("button")
button.innerHTML = "Edit";
li.appendChild(button);
}
Then make func:
function editTask(button) {
const li = button.parentElement;
todoInput.value = li.firstChild.textContent.trim();
li.remove();
const tasks = todoList.querySelectorAll("li");
tasks.forEach(task => {
const editButton = document.createElement("button");
editButton.textContent = "Edit";
task.appendChild(editButton);
});
saveToLS();
}
After watching your make a e commercial website
THANK You 💓💓
can u tell me why u code "false" on top of saveData function. plz answer to it?
if u click again that list it automatically change in previous mean unchecked condition
Wow amazing. Thank u so much. No words for u ❤❤❤
Thank you for such a nice video.
I have a question though.
@ 21:34 when you added eventListener
Where the e.target.tagName ===
why was the "LI" and "SPAN" in capital letters?
Please anyone that knows can help.
Thank you
My javascript part not working. From starting - when i link Java script file into HTML after that,on implementing Add program but it's not working 😢😢
Please help 🥺🥺🥺🥺
A doubt..Why in the ul li.checked:: before we didn't define the background image's properties such as background size ,position etc like we did in ul li::before ? Does it inherited properties?
thanks sir really helpfull video your channel name justify your content!!!
thank you so much for providing such a simple and valuable video. These tutorials are absolutely amazing not just for building projects but for actually understanding what you are doing. thank you a lot, bro
why task became unchecked again when I clicked again? We didn't specify this behavior in listContainer.addEventListener function
hi sir ...question...how you put the text "Todo-LIST +IMG" AND the other div which include the input and button up and down ????
Thank You So much For This Tutorial Can U Tell Me Why U write False In The Condition!! Please Explain It Too Sir
I Want To Clear My Concept ❤
Thank you very much I am currently learning function in js after I complete the course, I will use this as my project thank you 🎉🎉🎉❤
does anyone know why does .value not work in JavaScript, I followed this tutorial and all other tutorials perfectly but for some reason .value does not work when referencing the user input value into the input element.
very nice thx im learning tons of new things
After adding saveData() and showTask(); removing parent element and toggle checked function not working. Please help
hi buddies, i have a question for you. Can you guys doing it while watching it or doing it in alone by yourself after watching it. I wonder how do people do projects only by themselves
Nice delivery but am still having issues with JavaScript. Can you help with a beginner JavaScript class. Thank you sir
Hi, I am trying to write the same code as you. I am new to web development and I am facing trouble. When adding the input field and add button, button and input field are on the next line than the h2 tag and image. I have written exactly the same code then what is the issue? Anyone please help.
Once we clear the browsing history data on the browser, the Todo list data will be wiped out. Also, it would be good to use the same todo list data across platform. If we upload the programs on a webserver, could you show us how to save data on the webserver rather than in the web browser. Thanks.
I have done everything exactly as you said yet i am still running into an issue, i came to the part where you was using ul li and when i do the ul li ::before the whole ul li ::before just doesnt work whatever i put in there nothing changes and i have done everything exactly as you said.
Your JavaScript code doesn't work!!!!!!!!
17minutes totally wasted. Really its not working
I barely comment ...but all I want to say is thank you
can i ask why you decided to do inline JS function on the add task?sorry i'm currently learning web development.
Hello sir i am fresher and I am trying to-do list app project but one problem create appendChild is show in null
Please help how to solve
Good video. However, the local storage part is still not working for me. I am sure this was an issue with most of us. Thanks
Yes, the local storage and checked and span problem