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

Поділитися
Вставка
  • Опубліковано 28 лис 2024

КОМЕНТАРІ • 848

  • @GreatStackDev
    @GreatStackDev  2 місяці тому +4

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

  • @RitikaSah-q8s
    @RitikaSah-q8s 6 місяців тому +159

    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 місяців тому +18

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

    • @Ali.asjads
      @Ali.asjads 4 місяці тому +1

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

    • @RaahimAzfar
      @RaahimAzfar 3 місяці тому

      @@Ali.asjads control + s saves in vscode

    • @shivangtiwari8651
      @shivangtiwari8651 3 місяці тому

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

  • @amalayakin4411
    @amalayakin4411 Рік тому +16

    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

  • @Daemusa
    @Daemusa 10 місяців тому +51

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

    • @yousefkhaled5758
      @yousefkhaled5758 7 місяців тому

      I love you

    • @universalcosmologist3675
      @universalcosmologist3675 6 місяців тому

      ​@@yousefkhaled5758 I love you too 😘

    • @atlantic_love
      @atlantic_love 5 місяців тому +2

      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 Місяць тому +1

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

  • @AbisolaIbukunoluwaLufadeju
    @AbisolaIbukunoluwaLufadeju 5 місяців тому +15

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

    • @GreatStackDev
      @GreatStackDev  5 місяців тому +2

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

  • @nehalpradhan2229
    @nehalpradhan2229 Рік тому +69

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

  • @vikramnena4648
    @vikramnena4648 Рік тому +10

    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
    @Jack-CS Місяць тому +1

    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 місяців тому +4

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

  • @anstorm_dev
    @anstorm_dev 9 місяців тому +258

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

    • @coding688
      @coding688 8 місяців тому +28

      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 місяців тому +12

      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 місяців тому +9

      But now you can use chat gpt to find errors

  • @archiestudy288
    @archiestudy288 Рік тому +52

    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 10 місяців тому

      @@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 9 місяців тому

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

  • @educationalpoint2017
    @educationalpoint2017 8 місяців тому +9

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

  • @JalalOsamaa
    @JalalOsamaa 3 місяці тому +5

    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.

  • @sehrishmalik4655
    @sehrishmalik4655 8 місяців тому +2

    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 місяців тому +1

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

  • @sreedinesh7270
    @sreedinesh7270 8 місяців тому +6

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

  • @learnwithnagma
    @learnwithnagma 8 місяців тому +4

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

  • @leulsegedtekle309
    @leulsegedtekle309 Рік тому +95

    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
      @VsEdits59 Рік тому +3

      @@CrazyAshu34 suggest some 🙂

    • @CrazyAshu34
      @CrazyAshu34 Рік тому +3

      @@VsEdits59only Dom manipulation is 🥷 Worthy 🦆

    • @DelancyRoxella
      @DelancyRoxella 11 місяців тому +2

      There are like thousands of videos like that on UA-cam.

  • @victorbaraka1286
    @victorbaraka1286 11 місяців тому +5

    this tutorial helped me so much may God bless you

  • @yt_paperHANk
    @yt_paperHANk 2 місяці тому +2

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

    • @GreatStackDev
      @GreatStackDev  2 місяці тому +1

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

  • @genxgamer777
    @genxgamer777 5 місяців тому +1

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

  • @techieee17
    @techieee17 5 місяців тому +12

    very rare to see such explanation sir , thank you

    • @GreatStackDev
      @GreatStackDev  5 місяців тому +1

      Glad to hear that. Thanks for your comment. 😊

  • @AnupumPant
    @AnupumPant Рік тому +8

    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

  • @shreyakdev
    @shreyakdev Місяць тому

    Best series for Javascript and learning CSS.. Best tutorials

  • @RTech0223
    @RTech0223 5 місяців тому +2

    most fav. channel on youtube is greatstack

  • @trainerdevesh
    @trainerdevesh 2 місяці тому +2

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

  • @sogenohata1948
    @sogenohata1948 Рік тому +16

    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
    @HoucemEddineAdjerid 9 місяців тому +3

    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

  • @MatematicaTel
    @MatematicaTel 11 місяців тому +1

    Excellent tutorial. Thanks very much, greetings from Brasil

  • @kevindong4303
    @kevindong4303 6 місяців тому +6

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

  • @BalochScripter
    @BalochScripter 5 місяців тому +2

    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

  • @escape2music
    @escape2music Рік тому +1

    Successfully I created my first project using this tutorial..🤗♥️thank you so much

  • @Jordanrobinson88
    @Jordanrobinson88 4 місяці тому +1

    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.

  • @MrMrDEADCELL
    @MrMrDEADCELL Рік тому

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

    • @anekechinaemerem6601
      @anekechinaemerem6601 11 місяців тому +1

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

  • @Swapnil-Prakash
    @Swapnil-Prakash 7 місяців тому +8

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

  • @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💀

  • @dcman8382
    @dcman8382 4 місяці тому +2

    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!

  • @josyafritudemedia551
    @josyafritudemedia551 7 місяців тому +1

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

  • @FrontDevDude
    @FrontDevDude 23 дні тому

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

  • @deangeloaviles639
    @deangeloaviles639 Рік тому +31

    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 Рік тому +2

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

    • @deangeloaviles639
      @deangeloaviles639 Рік тому +1

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

    • @manueldinisjunior
      @manueldinisjunior Рік тому +1

      Where do I place it ?

    • @UchihaItachi-ep6ue
      @UchihaItachi-ep6ue Рік тому

      where should i place this in the js code?

    • @brannon1030
      @brannon1030 Рік тому +6

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

  • @SanthoshSanthosh-cx4yn
    @SanthoshSanthosh-cx4yn 3 дні тому

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

  • @md.nissanali
    @md.nissanali 6 місяців тому +2

    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.

  • @Codepro1992
    @Codepro1992 4 місяці тому

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

  • @Tajkia-Sharmi
    @Tajkia-Sharmi 7 місяців тому

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

  • @ronaldbrammer1823
    @ronaldbrammer1823 8 місяців тому +1

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

  • @pranavnene5638
    @pranavnene5638 3 місяці тому

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

  • @jagdishjena9058
    @jagdishjena9058 7 днів тому

    very easily explained , Thank you so much

  • @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.

  • @ravishbisht502
    @ravishbisht502 Рік тому +2

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

  • @medard3489
    @medard3489 Місяць тому +1

    Great tutorial, you’re explaining it perfectly

  • @IroniQ2611
    @IroniQ2611 8 місяців тому

    Great video.. really easy to understand.

  • @ranvirkumar1472
    @ranvirkumar1472 Місяць тому

    You are a great teacher sir ...❤

  • @ThunderGaming-sy7fh
    @ThunderGaming-sy7fh Рік тому +1

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

  • @SaadAli-s5v
    @SaadAli-s5v 8 місяців тому

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

  • @NLSkeletor
    @NLSkeletor 3 місяці тому +1

    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 2 місяці тому

      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.

  • @atifbashir1214
    @atifbashir1214 6 місяців тому +1

    so easy your teaching method is very nyc

  • @gamingtechnology6025
    @gamingtechnology6025 5 місяців тому +1

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

  • @technoprime835
    @technoprime835 Місяць тому

    Thank you for such a clear explanation!

  • @PeterKayinga-c1o
    @PeterKayinga-c1o Рік тому

    Am now one step closer to getting my front end job

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

  • @Mohamood_jama
    @Mohamood_jama Рік тому +1

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

  • @amer-pt7nw
    @amer-pt7nw Рік тому +3

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

  • @daniellyra9199
    @daniellyra9199 6 місяців тому

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

  • @johnrendellcanteras7681
    @johnrendellcanteras7681 Рік тому

    ur the best teacher man.

  • @mohamadsuleyman3562
    @mohamadsuleyman3562 10 місяців тому +1

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

  • @raffi164
    @raffi164 8 місяців тому

    THANKSS BROTHERR!! YOUU SAVEE MY LIFEEE😁

  • @nukhaimongmarma5789
    @nukhaimongmarma5789 Рік тому +1

    It's an amazing tutorial. I just built my very first project To-Do-List App. Thank you so much for the tutorial.😁

  • @baharehbazari1756
    @baharehbazari1756 11 місяців тому

    "Great! Thank you very much."

  • @akanbidiekola8643
    @akanbidiekola8643 Рік тому +4

    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 Рік тому +3

      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

  • @ChinaMary279
    @ChinaMary279 Рік тому +4

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

  • @shadowslayer2248
    @shadowslayer2248 Рік тому +29

    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 місяців тому +1

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

  • @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.

  • @adikacric2024
    @adikacric2024 3 місяці тому +1

    Love the project it was really amazing for the beginner

    • @GreatStackDev
      @GreatStackDev  3 місяці тому

      Glad you liked it! Thank you so much.

  • @AdityaSUnboxings
    @AdityaSUnboxings 5 місяців тому

    This kind of work is much appreciated sir.

  • @PandaOG92
    @PandaOG92 Місяць тому +1

    Very helpful video THANKYOU BHAI

  • @santoshdas5433
    @santoshdas5433 11 місяців тому

    Brother, I have been watching your videos since few days mainly react or javascript videos and 30 days javascript projects.Thank you for creating such valuable content. Happy coding 🙂

  • @studynewthings1727
    @studynewthings1727 Рік тому +1

    Thankyou, you are explaining very well

  • @michal2135
    @michal2135 Рік тому

    even though the project seems to be and actually is very easy there are many extremly useful solution included, Thank You

  • @shaheerhere
    @shaheerhere Рік тому +2

    honestly this is the best explaination one could give. dude emm literally proud of you. keep it up!!

  • @torr5952
    @torr5952 5 місяців тому +1

    This course is great!

  • @parthib.1555
    @parthib.1555 7 місяців тому +1

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

  • @UmairCh-t8i
    @UmairCh-t8i 2 місяці тому

    Very amazing and easy lecture, Thanks for this content

  • @williamkakooza4603
    @williamkakooza4603 6 місяців тому

    Thank you Professor GreatStack

  • @srinivaspagidi5764
    @srinivaspagidi5764 6 місяців тому

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

  • @rushabhshah12200
    @rushabhshah12200 10 місяців тому

    Sir you are explaining very great.
    Understanding each and every point clearly

  • @Blackdiamond929_
    @Blackdiamond929_ 4 місяці тому +2

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

    • @GreatStackDev
      @GreatStackDev  4 місяці тому

      Glad to hear that. Thank you. 😊

  • @safaroads9504
    @safaroads9504 4 місяці тому

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

  • @이재혁-y3d
    @이재혁-y3d Рік тому

    thank you for your service, for the novice

  • @franciscogiancoli93
    @franciscogiancoli93 9 місяців тому +1

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

  • @michelleneema8137
    @michelleneema8137 11 місяців тому +1

    thanks for teaching me

  • @umairriyas
    @umairriyas Рік тому

    Thank you very much sir you deserve more🤩❤

  • @Alearner-world
    @Alearner-world Рік тому +1

    Thanks for this grwat work, you are making life of many by giving free education.
    Big thanks 🙏

  • @GressIsLive
    @GressIsLive Рік тому

    Thanks a lot from Indonesia

  • @kasamalimukhi8473
    @kasamalimukhi8473 7 місяців тому

    step by step very simple to understand for to do list project.

  • @erkrishnapandit
    @erkrishnapandit Рік тому +8

    Very nice and clear explanation with simple and clean code.. very helpful for beginners Thank you so much for such a wonderful tutorial..

  • @ForTech-rt6qi
    @ForTech-rt6qi 6 днів тому

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

  • @hassankamal8529
    @hassankamal8529 Рік тому +1

    best video for a beginner

  • @iamuzzalhossen
    @iamuzzalhossen 6 місяців тому

    You made it very easy! Thanks man!

  • @yahmidarlington6522
    @yahmidarlington6522 7 місяців тому

    Such a wonderful tutorial 👏🏾👏🏾 Thank you

  • @ahmedelseiny1113
    @ahmedelseiny1113 6 місяців тому +1

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