How to Build a Todo List App with Local Storage for Beginners - HTML, CSS & JavaScript

Sdílet
Vložit
  • čas přidán 12. 09. 2024
  • Learn how to build a todo list web app in HTML, CSS and JavaScript with the ability to display, create, edit and delete your tasks. Task list, to-do list, shopping list.
    CSS code:
    codepen.io/mig...
    GitHub repository:
    github.com/mig...
    Try it live:
    miguelznunez.g...
    Follow my blog:
    / miguelznunez
    Email : mignunez@csumb.edu
    Medium : / miguelznunez
    Codepen : codepen.io/mig...
    GitHub : github.com/mig...

Komentáře • 47

  • @codefoxx
    @codefoxx  Před rokem +7

    Hello, friends, please help me get this video in rotation by commenting (a simple thanks will do) and liking👍

    • @victorbaraka1286
      @victorbaraka1286 Před 9 měsíci

      ive already subscribed and liked thank you for making this video may God bless you😇😀😃😄😁😆😅🤣😂😉😊🤗😜🤪😝

  • @13reath43
    @13reath43 Před rokem +5

    Simple code ( who wants can restucturize to follow don't repeat urself rule)
    Solid explanations ( everyone has google few things can be googled )
    Good and easy design
    Also BIG + for teaching how to use localstorage
    Thanks a lot

  • @SoxPatsCelts1995
    @SoxPatsCelts1995 Před rokem +3

    I've watched a couple todo list tutorials and the logic and explanations on this one really clicked with me. thank you

  • @tonytodd7011
    @tonytodd7011 Před 5 měsíci +1

    Great lesson, I like it! The video is really solid and compact, not like multi-hours todo-list ones I've ever seen!

  • @atinukeadeshola-manuels9364

    Really really really good video especially the localStorage part. Thanks a lot

  • @padmajverma6784
    @padmajverma6784 Před rokem +2

    thank you so so much i was struggling to with a decent todo list tutorial with local storage .... thanks to u i was able to do it.. appreciate it man .

  • @fuadagayev-mg7fk
    @fuadagayev-mg7fk Před 10 měsíci +2

    This is very helpfull me understand "todo" logic. Thank you!!!!

  • @ArslanBekbolotov-wq8hd
    @ArslanBekbolotov-wq8hd Před rokem +2

    this video from local storage really helped me to make the program

  • @JesseJames7
    @JesseJames7 Před rokem +3

    Finally one with an edit button. Thank you

  • @raglarnights
    @raglarnights Před rokem +1

    i been watching to your channel for awhile now. great stuff and easy to understand

  • @tonytony-fc6gq
    @tonytony-fc6gq Před rokem +1

    Thank You , most CRUD on youtube dont have UPDATE which bogs my mind why they calling it CRUD, so Thank you again !! you made it soo simple

  • @agataa.8411
    @agataa.8411 Před rokem +2

    Thank you so much. It was useful for me.

  • @thecoder1694
    @thecoder1694 Před rokem +1

    you taught this lesson fucking cool man thank you for your fucking helpful help!

  • @barbell-dev
    @barbell-dev Před 19 dny

    Thanks buddy ! It helped me big time.

  • @vietmobile159
    @vietmobile159 Před rokem +2

    Very nice tutorial, thank you

  • @Edward_Huraira
    @Edward_Huraira Před rokem +1

    Want more and more projects.
    Take love bro ❣️

  • @edosegheosamagbe9077
    @edosegheosamagbe9077 Před 10 měsíci +1

    Yup, this is the video

  • @YasminMuryadi
    @YasminMuryadi Před rokem +1

    I learned a lot from this. Thanks!

  • @flyflor599
    @flyflor599 Před rokem +1

    Excellent thank you !

  • @nibosvaska6645
    @nibosvaska6645 Před 4 měsíci

    Great work, great code

  • @alfredosancheznava8712
    @alfredosancheznava8712 Před rokem +1

    Really cool tutorial!!

  • @Facts_Agenda
    @Facts_Agenda Před 7 měsíci

    Incredible Video for beginners

  • @MBmysterio
    @MBmysterio Před rokem +1

    Why do you use Div? I'm a beginner so, please excuse my question if it comes across as extremely basic.

  • @Lorry127
    @Lorry127 Před 5 měsíci

    Thanks!

  • @flyflor599
    @flyflor599 Před rokem +1

    thanks

  • @user-tu6zp2tj9q
    @user-tu6zp2tj9q Před rokem +1

    hello sir
    this code is helpful for me but i need in weekly to do list can say process

  • @timokimo8206
    @timokimo8206 Před rokem +1

    Thank you 🌹

  • @commonman8540
    @commonman8540 Před rokem +1

    hi, any idea to add reminder in this todo app

  • @globxoperations2271
    @globxoperations2271 Před rokem +2

    Thanks

  • @judyodiakose6838
    @judyodiakose6838 Před 11 měsíci +1

    Hey man, great video.. I am actually working on something similar, but I have a problem... How can I add to existing list items? When I reload my page, The local storage is displayed but when I try to add another list item, It wipes the previous list items.

  • @Mason-cg2wx
    @Mason-cg2wx Před rokem +1

    Not sure if this will get to you but at 4:50 and everything to do with the date before that i am not able to get the console log to show the date nor the text to show the date, the date part of it is not a deal breaker but its gonna keep bugging me till i figure out why it will not work

    • @Mason-cg2wx
      @Mason-cg2wx Před rokem

      scratch that, i cant get my console to display anything

  • @jimmyjayant8072
    @jimmyjayant8072 Před 5 měsíci

    Excellent Video. Keep it up. I tried your to do list live. And I found a problem. If the original task is "abc". And after editing it to "abcd" we click on cancel then the original task is not shown. Instead the edited task "abcd" is shown. Please correct this one.

  • @reyjanriosa8492
    @reyjanriosa8492 Před 7 měsíci

    Thanks

  • @user-vo9pq4jc4y
    @user-vo9pq4jc4y Před 7 měsíci

    Thanks a lot!!!

  • @ishaa6385
    @ishaa6385 Před 8 měsíci

    Hello sir, i have a question, if i want to do let's say 2 to-do list in a web, how do I use the same CSS and js for that 2 elements?

  • @MrFrankmore
    @MrFrankmore Před rokem

    Hello, thanks for this, it really helped me solve the editing part. One question, please, if I wanted the input to appear above that is the most recent to-do additions showing up first before the rest, how do I go about it?

    • @codefoxx
      @codefoxx  Před rokem +2

      Youll need to create a small algorithm. Perhaps you can delete the item you are editing (you can use the splice function ) from the array and push it back into the array (with the push function) so that it goes to the front

    • @MrFrankmore
      @MrFrankmore Před rokem +1

      @@codefoxx It's not so clear but I think I get the idea.
      Thanks a lot.

  • @atlantic_love
    @atlantic_love Před 8 měsíci +1

    Less than a minute into your tutorial you are using a CDN. Bad idea. That means your app will be broken the moment the CDN goes down.

  • @lollollollol1622
    @lollollollol1622 Před rokem +1

    comment for algo