How To Create To-Do List App Using HTML CSS And JavaScript | Task App In JavaScript

[@GreatStackDev]

👉 My JavaScript Advanced Course: greatstack.dev/go/javascript-course (75% Discount)

[@RitikaSah-q8s]

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 ❤

[@GreatStackDev]

Sure. I will try my best. Thank You. 😊

[@Ali.asjads]

I wasn't able to save can you help me with this

[@RaahimAzfar]

@@Ali.asjads control + s saves in vscode

[@shivangtiwari8651]

​@@GreatStackDev Sir I am facing issue that document is not defined Any solution please

[@Daemusa]

I usually don’t comment, but videos like yours impress me. Very good job! Thank you for sharing your wisdom with us!!

[@yousefkhaled5758]

I love you

[@universalcosmologist3675]

​@@yousefkhaled5758 I love you too 😘

[@atlantic_love]

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.

[@user-kr4fz4fr8j]

@@atlantic_love It's not that deep.

[@atlantic_love]

@@user-kr4fz4fr8j My time is valuable. Your comment definitely is lacking substance.

[@AbisolaIbukunoluwaLufadeju]

please don't stop liking all his videos. you are an amazing teacher. Love from the United Kingdom.

[@GreatStackDev]

Glad you liked it. Thanks for supporting our channel. 😊

[@amalayakin4411]

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

[@sreedinesh7270]

Tqsm sir, u have given all the detailed explanation of the complete process of ToDo list.I have created an awsome list tqsm

[@nehalpradhan2229]

WOW. This video achieved the same thing with way more simplicity than other tutorials. which is helpful for beginners.

[@JalalOsamaa]

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.

[@awmdanger9677]

This was a really good project and pretty complicated on javascript side. I didn't watch your video, i just took reference from it. And made it on my own. I took help from this video regarding styling, and i took help from chatgpt regarding some javascript functions. You used images, i used font awesome icons. That's it. Took me 4 hours to complete. But i learnt a lot. A lot. Thanks! ♥

[@innocentakwolu9051]

All I can say is thank you.. Seeing real life applications of basic concepts with ease is amazing.. ❤

[@GreatStackDev]

Glad you liked it!

[@learnwithnagma]

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 ✅🥳.

[@educationalpoint2017]

This is my 1st project of JavaScript..And this an awesome Experience....Thank You....

[@babarshabbir2554]

"Excellent tutorial! Clear instructions for creating a functional to-do list app with HTML, CSS, and JavaScript."

[@vikramnena4648]

Before watching this video i thought its hard to learn css html ans js together but after watching this i realise its very easy

[@Jack-CS]

Coding used to fill me full of dread, your lessons make me genuinely excited for it. Love the way and order in which you explain things. Absolute legend

[@sehrishmalik4655]

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.

[@techieee17]

very rare to see such explanation sir , thank you

[@GreatStackDev]

Glad to hear that. Thanks for your comment. 😊

[@kevindong4303]

THANK YOU! I will be adding my own features and functions to this basic to do list!

[@MatematicaTel]

Excellent tutorial. Thanks very much, greetings from Brasil

[@anstorm_dev]

the worst part in javascript is when you make a small mistake and the whole code doesn't work lol

[@coding688]

bro I missed a comma🤣

[@anstorm_dev]

xD@@coding688

[@anupdhakal69]

@@coding688 you don't need a comma

[@dipendrasingh4874]

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

[@Siraj_tahiri]

But now you can use chat gpt to find errors

[@sogenohata1948]

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!!

[@HoucemEddineAdjerid]

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

[@genxgamer777]

Following your tutorials is the next level of learning coding. I am following your tutorials while doing my freecodecamp lessons :)

[@leulsegedtekle309]

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.

[@VsEdits59]

@@CrazyAshu34 suggest some 🙂

[@CrazyAshu34]

@@VsEdits59only Dom manipulation is 🥷 Worthy 🦆

[@DelancyRoxella]

There are like thousands of videos like that on KZbin.

[@ravishbisht502]

Wow amazing. Thank u so much. No words for u ❤❤❤

[@UbaisMM]

Bro tanx. This video full completed watching and create this projects 🥰

[@josyafritudemedia551]

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 🎉🎉🎉❤

[@archiestudy288]

As a beginner in JavaScript DOM, it's really hard for me to understand that function, but you make it look easy. This video saves my life🤩

[@AAKARSHVERMA-bw4ic]

I am learning js but the more I learn the more I lose confidense that I am not learning anything did you felt the same that time when you were learning

[@ChefnCoder]

hey did you code it? i need source code , plz send ur github link if u did

[@Imran-tr8sh]

@@AAKARSHVERMA-bw4ic bhai sab yahi feel karte hai tension naa lo or chorna mat mujhe bhi zyada nii atta but ye project calculator,bg-changer, quote-app ye sab bana leta hun mai filhal mujhe bhi aysa he feel aata tha jab naya naya start kiya tha tho

[@panagopulos9690]

@@AAKARSHVERMA-bw4ic same here the further I go the less I think I can code anything on my own....

[@victorbaraka1286]

this tutorial helped me so much may God bless you

[@deangeloaviles639]

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(); }

[@j_u_d_y3041]

Ｗow~~This is exactly what I am looking for. Thank you so much for sharing!

[@deangeloaviles639]

@@j_u_d_y3041 let me know how your website looks! Very curious to see 👀

[@manueldinisjunior]

Where do I place it ?

[@UchihaItachi-ep6ue]

where should i place this in the js code?

[@brannon1030]

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(); } });

[@BalochScripter]

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

[@LawalHussein]

Wow,I really gained more knowledge from thus video. You are the best tutor in java scripts..you explained it as simple as Abc💀

[@RTech0223]

most fav. channel on youtube is greatstack

[@franciscogiancoli93]

Shoe de bola meu amigo.. Muito Obrigado pela contribuição. aprendi muito com vc.

[@md.nissanali]

Your code explanation is very easy to understand. thank you for giving us this tutorial

[@GreatStackDev]

Thank you! 😊 Keep doing more projects like this.

[@scottforbes0]

This is a good looking example of what I was searching for. I might borrow parts of the code for my grocery shopping list web app.

[@SanthoshSanthosh-cx4yn]

Thank you so much sir, iam learning from india so its very easy to learning and more codes are awesome❤🎉

[@ronaldbrammer1823]

I really enjoyed learning this project. It was easy to follow along with.

[@gamingtechnology6025]

sir its very helpful by watching your video and coding will give me a more experience

[@ThunderGaming-sy7fh]

After watching your make a e commercial website THANK You 💓💓

[@ForTech-rt6qi]

Thank Youu So much. I learned a lot from this video. Subscribed, keep making content.

[@shadowslayer2248]

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!!!

[@ChefnCoder]

hey bro can u send the code for this, if u did it and uploaded to github

[@yt_paperHANk]

tysm this is why i am not quitting coding today❤❤‍🔥🔥

[@GreatStackDev]

I'm so glad! Thank You. Keep coding.😊

[@FrontDevDude]

Thank you for creating this tutorial. I completed the project and learned a lot.

[@SaadAli-s5v]

sir you have found a new loyal subscriber today. loved it sir........make more content like this

[@DhavalSolanki-h1f]

Good Job Sir...😊👍 it's a humble request to explain first then do code. The reason is if you explain first so it possible that student can try it self to solve it. Thank You.

[@ChinaMary279]

Thank you easy tutorials. You're doing a great job by explaining it step by step

[@ahmedelseiny1113]

Thank you so much 😊 Keep going 💪 This video was very helpful❤❤❤

[@GreatStackDev]

You're welcome. Thank You. 😊

[@Codepro1992]

Thanks for your contribution Sir, I've improved massively in coding because of you

[@tmate88-j8y]

Amazing video, my friend! I'm definitely liking and sharing! Thank you so much for sharing with us.

[@trainerdevesh]

It's so simple bro and bow to the power of localStorage

[@pranavnene5638]

Great Job ,This is my first js project , then i am very happy because i complete project......

[@Jordanrobinson88]

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.

[@albin_joby]

Amazing vedio!.. keepup the great work❤‍🔥

[@amer-pt7nw]

Thanks and we needs more html css JavaScript projects like this greats

[@shreyakdev]

Best series for Javascript and learning CSS.. Best tutorials

[@freeju2001]

This is amazing, developing along with you is incredible ! thanks a lot brother ;-)

[@ompandit8986]

Perfect person for teaching ...

[@GreatStackDev]

Many many thanks! 😊 Keep coding.

[@atifbashir1214]

so easy your teaching method is very nyc

[@raffi164]

THANKSS BROTHERR!! YOUU SAVEE MY LIFEEE😁

[@dcman8382]

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!

[@nabinbist1554]

same pinch

[@jagdishjena9058]

very easily explained , Thank you so much

[@decall]

Thank you so much for this amazing tutorial. First I have tried to make it myself, but I have got stuck on the localstorage. But you explained this so easy.

[@medard3489]

Great tutorial, you’re explaining it perfectly

[@GreatStackDev]

Thank you so much.

[@safaroads9504]

Loved it, very simple To-do App. Thanks a lot.

[@yahmidarlington6522]

Such a wonderful tutorial 👏🏾👏🏾 Thank you

[@akanbidiekola8643]

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.

[@pratheekbayari4255]

need answer for this too, and also why false at the end as an argument??

[@laddgl]

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

[@NLSkeletor]

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?

[@HasanMahmud-p4s]

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.

[@harismalik4330]

Great video and easy to understand subscribed your channel.

[@GreatStackDev]

Thanks and welcome

[@SlinkyCollins]

very helpful video, thanks GreatStack🤗

[@shreelekham.k.9141]

Bro your doing great, thanks for helping us😊😊

[@srinivaspagidi5764]

Thank you so much for your effort You are doing a great job by explaining it step by step

[@adikacric2024]

Love the project it was really amazing for the beginner

[@GreatStackDev]

Glad you liked it! Thank you so much.

[@techinfo2050]

I am new to web dev what shortcut key did you press for auto at 3:51

[@PandaOG92]

Very helpful video THANKYOU BHAI

[@daniellyra9199]

Your videos are very instructive. I have been learning a lot, thank you so much! 2 projects down, 28 to go!

[@AnupumPant]

Such elegant way. My home cooked javascript was so long and ugly and still had so many bugs when trying on my own. This is such a great way to do it. Thanks

[@GreatStackDev]

Thanks anupam, glad you liked it

[@ranvirkumar1472]

You are a great teacher sir ...❤

[@qassimo688]

this video is pretty amazing ! Thank you my friend !

[@aakashrajbhar25]

great content and you explain every line so nicely

[@studynewthings1727]

Thankyou, you are explaining very well

[@Tajkia-Sharmi]

The easiest one to follow that worked 100% from the start to the end....Amazing tutorial :)

[@ParzivalsLab]

Very well explained bro, just now subscribed you ✅

[@mauricechidi4644]

I like that you are doing more JavaScript project now thanks a love, please can you do a project on crud or laravel 🙏🙏🙏🙏🙏

[@UmairCh-t8i]

Very amazing and easy lecture, Thanks for this content

[@vijaymaroju6340]

I HAVE A DOUBT: Hello friend, Please tell me how did you use "checked" on line 21 of script.js file, I am getting confused because you commented out the li element on line 17(index.html) which had class= "checked" then the checked should not be accesible, then how did you use it. Thank you for this very useful video.

[@usualbites.9482]

Really appreciated!❤🎉

[@GreatStackDev]

Thank you! 😊 Try it and let me know once you complete it.

[@sahilzore867]

thanks sir really helpfull video your channel name justify your content!!!

[@MrMrDEADCELL]

Thanks Sir for the "30 days of Javascript", i have recently finished a bootcamp of 6 months.

[@anekechinaemerem6601]

Please can you send the link where you did "30 days of JavaScript"? It would really help

[@harikalakshmisainannapanen181]

thankyou so much sir. This means a lot🙏🙏🙏🙏🙏🙏🙏🙏🙏

[@kunalkhare8340]

thank you for this amazing content 🔥🔥 can you also make on how to deploy these project

[@ruhifarhath727]

Thank you very much sir , it was a very easy to follow vedio . Please keep making more such vedios.

[@Swapnil-Prakash]

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; }

[@Blackdiamond929_]

This was great, i made some changes using font awesome icons instead of the images.

[@GreatStackDev]

Glad to hear that. Thank you. 😊

[@umairriyas]

Thank you very much sir you deserve more🤩❤

[@originaldammy32]

Awesome tutorial sir, and mice explanation, can you please try to explain more on the functions of some css in future videos

[@okolipeace774]

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

[@chiomaezeasoibe3871]

Very great tutorial. Just subscribed ❤

[@Mohamood_jama]

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 😅.

[@pnkdtu27]

Very Informative AND Amazing Project