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

  Рет қаралды 966,917

GreatStack

GreatStack

Күн бұрын

Пікірлер: 845
@GreatStackDev
@GreatStackDev 2 ай бұрын
👉 My JavaScript Advanced Course: greatstack.dev/go/javascript-course (75% Discount)
@RitikaSah-q8s
@RitikaSah-q8s 6 ай бұрын
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
@GreatStackDev 6 ай бұрын
Sure. I will try my best. Thank You. 😊
@Ali.asjads
@Ali.asjads 4 ай бұрын
I wasn't able to save can you help me with this
@RaahimAzfar
@RaahimAzfar 3 ай бұрын
@@Ali.asjads control + s saves in vscode
@shivangtiwari8651
@shivangtiwari8651 2 ай бұрын
​@@GreatStackDev Sir I am facing issue that document is not defined Any solution please
@Daemusa
@Daemusa 10 ай бұрын
I usually don’t comment, but videos like yours impress me. Very good job! Thank you for sharing your wisdom with us!!
@yousefkhaled5758
@yousefkhaled5758 6 ай бұрын
I love you
@universalcosmologist3675
@universalcosmologist3675 6 ай бұрын
​@@yousefkhaled5758 I love you too 😘
@atlantic_love
@atlantic_love 5 ай бұрын
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
@user-kr4fz4fr8j Ай бұрын
@@atlantic_love It's not that deep.
@atlantic_love
@atlantic_love Ай бұрын
@@user-kr4fz4fr8j My time is valuable. Your comment definitely is lacking substance.
@amalayakin4411
@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
@AbisolaIbukunoluwaLufadeju
@AbisolaIbukunoluwaLufadeju 5 ай бұрын
please don't stop liking all his videos. you are an amazing teacher. Love from the United Kingdom.
@GreatStackDev
@GreatStackDev 5 ай бұрын
Glad you liked it. Thanks for supporting our channel. 😊
@nehalpradhan2229
@nehalpradhan2229 Жыл бұрын
WOW. This video achieved the same thing with way more simplicity than other tutorials. which is helpful for beginners.
@vikramnena4648
@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
@JalalOsamaa
@JalalOsamaa 3 ай бұрын
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.
@Jack-CS
@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
@innocentakwolu9051
@innocentakwolu9051 9 ай бұрын
All I can say is thank you.. Seeing real life applications of basic concepts with ease is amazing.. ❤
@GreatStackDev
@GreatStackDev 9 ай бұрын
Glad you liked it!
@sreedinesh7270
@sreedinesh7270 8 ай бұрын
Tqsm sir, u have given all the detailed explanation of the complete process of ToDo list.I have created an awsome list tqsm
@educationalpoint2017
@educationalpoint2017 8 ай бұрын
This is my 1st project of JavaScript..And this an awesome Experience....Thank You....
@sehrishmalik4655
@sehrishmalik4655 7 ай бұрын
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.
@babarshabbir2554
@babarshabbir2554 6 ай бұрын
"Excellent tutorial! Clear instructions for creating a functional to-do list app with HTML, CSS, and JavaScript."
@learnwithnagma
@learnwithnagma 8 ай бұрын
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 ✅🥳.
@anstorm_dev
@anstorm_dev 9 ай бұрын
the worst part in javascript is when you make a small mistake and the whole code doesn't work lol
@coding688
@coding688 8 ай бұрын
bro I missed a comma🤣
@anstorm_dev
@anstorm_dev 8 ай бұрын
xD@@coding688
@anupdhakal69
@anupdhakal69 8 ай бұрын
@@coding688 you don't need a comma
@dipendrasingh4874
@dipendrasingh4874 7 ай бұрын
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
@Siraj_tahiri 7 ай бұрын
But now you can use chat gpt to find errors
@kevindong4303
@kevindong4303 6 ай бұрын
THANK YOU! I will be adding my own features and functions to this basic to do list!
@techieee17
@techieee17 5 ай бұрын
very rare to see such explanation sir , thank you
@GreatStackDev
@GreatStackDev 5 ай бұрын
Glad to hear that. Thanks for your comment. 😊
@genxgamer777
@genxgamer777 5 ай бұрын
Following your tutorials is the next level of learning coding. I am following your tutorials while doing my freecodecamp lessons :)
@archiestudy288
@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
@AAKARSHVERMA-bw4ic 10 ай бұрын
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
@ChefnCoder 10 ай бұрын
hey did you code it? i need source code , plz send ur github link if u did
@Imran-tr8sh
@Imran-tr8sh 9 ай бұрын
@@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
@panagopulos9690 8 ай бұрын
@@AAKARSHVERMA-bw4ic same here the further I go the less I think I can code anything on my own....
@AnupumPant
@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
@GreatStackDev Жыл бұрын
Thanks anupam, glad you liked it
@HoucemEddineAdjerid
@HoucemEddineAdjerid 9 ай бұрын
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
@Jordanrobinson88
@Jordanrobinson88 3 ай бұрын
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.
@josyafritudemedia551
@josyafritudemedia551 7 ай бұрын
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 🎉🎉🎉❤
@BalochScripter
@BalochScripter 5 ай бұрын
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
@victorbaraka1286
@victorbaraka1286 11 ай бұрын
this tutorial helped me so much may God bless you
@Swapnil-Prakash
@Swapnil-Prakash 6 ай бұрын
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; }
@leulsegedtekle309
@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.
@vishalplayzz2580
@vishalplayzz2580 Жыл бұрын
@@CrazyAshu34 suggest some 🙂
@CrazyAshu34
@CrazyAshu34 Жыл бұрын
@@vishalplayzz2580only Dom manipulation is 🥷 Worthy 🦆
@DelancyRoxella
@DelancyRoxella 11 ай бұрын
There are like thousands of videos like that on KZbin.
@yt_paperHANk
@yt_paperHANk 2 ай бұрын
tysm this is why i am not quitting coding today❤❤‍🔥🔥
@GreatStackDev
@GreatStackDev 2 ай бұрын
I'm so glad! Thank You. Keep coding.😊
@sogenohata1948
@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!!
@FrontDevDude
@FrontDevDude 18 күн бұрын
Thank you for creating this tutorial. I completed the project and learned a lot.
@md.nissanali
@md.nissanali 6 ай бұрын
Your code explanation is very easy to understand. thank you for giving us this tutorial
@GreatStackDev
@GreatStackDev 6 ай бұрын
Thank you! 😊 Keep doing more projects like this.
@dcman8382
@dcman8382 4 ай бұрын
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
@nabinbist1554 4 ай бұрын
same pinch
@MrMrDEADCELL
@MrMrDEADCELL 11 ай бұрын
Thanks Sir for the "30 days of Javascript", i have recently finished a bootcamp of 6 months.
@anekechinaemerem6601
@anekechinaemerem6601 11 ай бұрын
Please can you send the link where you did "30 days of JavaScript"? It would really help
@RTech0223
@RTech0223 5 ай бұрын
most fav. channel on youtube is greatstack
@decall
@decall 4 ай бұрын
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.
@trainerdevesh
@trainerdevesh 2 ай бұрын
It's so simple bro and bow to the power of localStorage
@shreyakdev
@shreyakdev Ай бұрын
Best series for Javascript and learning CSS.. Best tutorials
@NLSkeletor
@NLSkeletor 3 ай бұрын
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
@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.
@MatematicaTel
@MatematicaTel 11 ай бұрын
Excellent tutorial. Thanks very much, greetings from Brasil
@jagdishjena9058
@jagdishjena9058 2 күн бұрын
very easily explained , Thank you so much
@Codepro1992
@Codepro1992 4 ай бұрын
Thanks for your contribution Sir, I've improved massively in coding because of you
@LawalHussein
@LawalHussein 8 ай бұрын
Wow,I really gained more knowledge from thus video. You are the best tutor in java scripts..you explained it as simple as Abc💀
@ronaldbrammer1823
@ronaldbrammer1823 8 ай бұрын
I really enjoyed learning this project. It was easy to follow along with.
@gamingtechnology6025
@gamingtechnology6025 4 ай бұрын
sir its very helpful by watching your video and coding will give me a more experience
@mynametaipp
@mynametaipp Ай бұрын
25:48 when he says "subscribe the channel" the subscribe button is circled in red. big bro is watching... btw thanks for the guide il made my first project with u:) super video!
@escape2music
@escape2music Жыл бұрын
Successfully I created my first project using this tutorial..🤗♥️thank you so much
@franciscogiancoli93
@franciscogiancoli93 9 ай бұрын
Shoe de bola meu amigo.. Muito Obrigado pela contribuição. aprendi muito com vc.
@Mohamood_jama
@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 😅.
@daniellyra9199
@daniellyra9199 6 ай бұрын
Your videos are very instructive. I have been learning a lot, thank you so much! 2 projects down, 28 to go!
@ChinaMary279
@ChinaMary279 Жыл бұрын
Thank you easy tutorials. You're doing a great job by explaining it step by step
@medard3489
@medard3489 27 күн бұрын
Great tutorial, you’re explaining it perfectly
@GreatStackDev
@GreatStackDev 26 күн бұрын
Thank you so much.
@smarttutorialagency
@smarttutorialagency Ай бұрын
Thanks for video a lot. My question is add some short video that shows how to deploy like in git hub instead of using local storage.
@atifbashir1214
@atifbashir1214 6 ай бұрын
so easy your teaching method is very nyc
@deangeloaviles639
@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
@j_u_d_y3041 Жыл бұрын
Wow~~This is exactly what I am looking for. Thank you so much for sharing!
@deangeloaviles639
@deangeloaviles639 Жыл бұрын
@@j_u_d_y3041 let me know how your website looks! Very curious to see 👀
@manueldinisjunior
@manueldinisjunior Жыл бұрын
Where do I place it ?
@UchihaItachi-ep6ue
@UchihaItachi-ep6ue Жыл бұрын
where should i place this in the js code?
@brannon1030
@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(); } });
@ForTech-rt6qi
@ForTech-rt6qi Күн бұрын
Thank Youu So much. I learned a lot from this video. Subscribed, keep making content.
@pranavnene5638
@pranavnene5638 3 ай бұрын
Great Job ,This is my first js project , then i am very happy because i complete project......
@Blackdiamond929_
@Blackdiamond929_ 4 ай бұрын
This was great, i made some changes using font awesome icons instead of the images.
@GreatStackDev
@GreatStackDev 4 ай бұрын
Glad to hear that. Thank you. 😊
@ThunderGaming-sy7fh
@ThunderGaming-sy7fh Жыл бұрын
After watching your make a e commercial website THANK You 💓💓
@amer-pt7nw
@amer-pt7nw Жыл бұрын
Thanks and we needs more html css JavaScript projects like this greats
@ravishbisht502
@ravishbisht502 Жыл бұрын
Wow amazing. Thank u so much. No words for u ❤❤❤
@akanbidiekola8643
@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
@pratheekbayari4255 Жыл бұрын
need answer for this too, and also why false at the end as an argument??
@laddgl
@laddgl 10 ай бұрын
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
@IroniQ2611
@IroniQ2611 7 ай бұрын
Great video.. really easy to understand.
@Tajkia-Sharmi
@Tajkia-Sharmi 7 ай бұрын
The easiest one to follow that worked 100% from the start to the end....Amazing tutorial :)
@michal2135
@michal2135 Жыл бұрын
even though the project seems to be and actually is very easy there are many extremly useful solution included, Thank You
@srinivaspagidi5764
@srinivaspagidi5764 6 ай бұрын
Thank you so much for your effort You are doing a great job by explaining it step by step
@ranvirkumar1472
@ranvirkumar1472 Ай бұрын
You are a great teacher sir ...❤
@technoprime835
@technoprime835 Ай бұрын
Thank you for such a clear explanation!
@PandaOG92
@PandaOG92 Ай бұрын
Very helpful video THANKYOU BHAI
@PeterKayinga-c1o
@PeterKayinga-c1o Жыл бұрын
Am now one step closer to getting my front end job
@sadafmano1423
@sadafmano1423 8 күн бұрын
I have copied the whole code .Everything is working well but remove and chceked events aren’t working…. HELP😢
@shadowslayer2248
@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
@ChefnCoder 10 ай бұрын
hey bro can u send the code for this, if u did it and uploaded to github
@anilsuyal
@anilsuyal 9 ай бұрын
Thanks a lot for the wonderful video! Just completed the app. For beginners, little more explanation to each and every step would be more helpful.
@kasamalimukhi8473
@kasamalimukhi8473 7 ай бұрын
step by step very simple to understand for to do list project.
@trmals2972
@trmals2972 6 ай бұрын
Might be helpful to somebody: if you have troubles with unchecked.png not loading (10:55), check the file position in the URL. It has to be relative to the CSS file itself. If they are in the same folder, then it looks like this: background: url("unchecked.png")
@adikacric2024
@adikacric2024 3 ай бұрын
Love the project it was really amazing for the beginner
@GreatStackDev
@GreatStackDev 3 ай бұрын
Glad you liked it! Thank you so much.
@IdowuAyetiran
@IdowuAyetiran 3 ай бұрын
You just saved a brother’s life 😂
@mohamadsuleyman3562
@mohamadsuleyman3562 10 ай бұрын
At 16:19 its better to create text node then append it as a child to the "li", in this way you can ensures that the input is treated as plain text, preventing potential security vulnerabilities (cross-site scripting or XSS attacks).
@mauricechidi4644
@mauricechidi4644 Жыл бұрын
I like that you are doing more JavaScript project now thanks a love, please can you do a project on crud or laravel 🙏🙏🙏🙏🙏
@SaadAli-s5v
@SaadAli-s5v 8 ай бұрын
sir you have found a new loyal subscriber today. loved it sir........make more content like this
@AMAN_BHARDWAJ007
@AMAN_BHARDWAJ007 Жыл бұрын
Thanks ❤ , and you should also write the js code, after enter some text in input field and press enter key on keyboard then the text add automatically
@FXDOVE
@FXDOVE 9 ай бұрын
Thanks so much you video just helped me on my project. GOD BLESS
@aakashrajbhar25
@aakashrajbhar25 Жыл бұрын
great content and you explain every line so nicely
@AdityaSUnboxings
@AdityaSUnboxings 5 ай бұрын
This kind of work is much appreciated sir.
@UmairCh-t8i
@UmairCh-t8i 2 ай бұрын
Very amazing and easy lecture, Thanks for this content
@NahiBah
@NahiBah 7 ай бұрын
Thanks for sharing this! I've been looking for a new way to manage my tasks.
@baharehbazari1756
@baharehbazari1756 10 ай бұрын
"Great! Thank you very much."
@michelleneema8137
@michelleneema8137 11 ай бұрын
thanks for teaching me
@okeanuoluwapo750
@okeanuoluwapo750 3 ай бұрын
Nice delivery but am still having issues with JavaScript. Can you help with a beginner JavaScript class. Thank you sir
@siddharth8911
@siddharth8911 Жыл бұрын
plz do html at once and then do css and js don't make it half it's confusing, and thanks your videos helped me a lot
@studynewthings1727
@studynewthings1727 Жыл бұрын
Thankyou, you are explaining very well
@tmate88-j8y
@tmate88-j8y 6 ай бұрын
Amazing video, my friend! I'm definitely liking and sharing! Thank you so much for sharing with us.
@MrAggelers
@MrAggelers 7 ай бұрын
Nicely done, great sample, thank you very much. In my opinion you could have explained some of the code a bit more in detail, e.g. the eventListeners and function(e) etc. was not easy to understand for me.
@torr5952
@torr5952 5 ай бұрын
This course is great!
@GreatStackDev
@GreatStackDev 5 ай бұрын
Thank you.
@safaroads9504
@safaroads9504 4 ай бұрын
Loved it, very simple To-do App. Thanks a lot.
@ahmedelseiny1113
@ahmedelseiny1113 6 ай бұрын
Thank you so much 😊 Keep going 💪 This video was very helpful❤❤❤
@GreatStackDev
@GreatStackDev 6 ай бұрын
You're welcome. Thank You. 😊
@이재혁-y3d
@이재혁-y3d Жыл бұрын
thank you for your service, for the novice
@nitametkar
@nitametkar Жыл бұрын
U helped me alot with javascript today . Hope u come up with this type of Projects more and help me
@iamuzzalhossen
@iamuzzalhossen 6 ай бұрын
You made it very easy! Thanks man!
@rushabhshah12200
@rushabhshah12200 10 ай бұрын
Sir you are explaining very great. Understanding each and every point clearly
How to Show Category Name in Filament Table
1:37
Code With Jayadev
Рет қаралды 16
Build and Deploy an Apple Website with React | Beginner Three.js & GSAP Tutorial
3:51:37
How Many Balloons To Make A Store Fly?
00:22
MrBeast
Рет қаралды 115 МЛН
How To Make Weather App Using JavaScript Step By Step Explained
41:59
GreatStack
Рет қаралды 1,3 МЛН
Learn to code a to-do list app in JavaScript - Part 2
29:09
Max Sandelin
Рет қаралды 70 М.
10 CSS PRO Tips and Tricks you NEED to know
9:00
Coding2GO
Рет қаралды 99 М.
How I Would Learn Python FAST in 2024 (if I could start over)
12:19
Thu Vu data analytics
Рет қаралды 553 М.
Build this JS calculator in 15 minutes! 🖩
15:20
Bro Code
Рет қаралды 663 М.
How ChatGPT Built My App in Minutes 🤯
8:28
Website Learners
Рет қаралды 2,8 МЛН
Beginner Vanilla Javascript Project Tutorial
1:15:19
developedbyed
Рет қаралды 904 М.
How Many Balloons To Make A Store Fly?
00:22
MrBeast
Рет қаралды 115 МЛН