Build a To-Do List in 20 MINUTES with JavaScript

Поделиться
HTML-код
  • Опубликовано: 8 янв 2023
  • In today's video, I'll show you how easy it is to build a To-Do List App using HTML, CSS & JavaScript. No frameworks are involved in this project and it's great for beginners who want to learn Local Storage and how to build user interfaces for the web.
    🏫 My Udemy Courses - www.udemy.com/user/domenic-co...
    🎨 Download my VS Code theme - marketplace.visualstudio.com/...
    💜 Join my Discord Server - / discord
    🐦 Find me on Twitter - / dcodeyt
    💸 Support me on Patreon - / dcode
    📰 Follow me on DEV Community - dev.to/dcodeyt
    📹 Join this channel to get access to perks - / @dcode-software
    If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
    #dcode #javascript

Комментарии • 36

  • @BMikel
    @BMikel Год назад +20

    Nice tutorial. To do list is an absolute must for every beginner. It allows to work and understand literally all basic JS concepts: DOM, manupultaing DOM, functions, arrays, scope, loops, state and many other basic stuff.

  • @ghostrAider98
    @ghostrAider98 Месяц назад

    Great Tut, pretty quick solution. Just an FYI: This solution will create individual event listeners for each todo item, which can be a bottleneck. Of course for a small todo app, it not going to matter. But if you use this technique in a different more heavy app. I surely will cause issues

  • @legendaizy482
    @legendaizy482 Год назад +1

    Am from pakistan a web developer and still a student but following you in time of needs … Good keep it up

  • @abubalo
    @abubalo Год назад

    Greate tutorial as usual. Todo list project is always interesting with so much nuances. Looking forward to more intermediate and advance Javascript projects this year.

  • @karlstenator
    @karlstenator Год назад

    This is such a great tutorial!!! Thanks so much - great way to spend my Sunday morning coffee ☕

  • @storytimewithamy
    @storytimewithamy Год назад +1

    Thank you so much. You just gave me ideas and better way to finish my project

  • @user-sb8lj2ly3h
    @user-sb8lj2ly3h 2 месяца назад

    thank you 🎉

  • @fabiennedallau968
    @fabiennedallau968 Год назад

    Really good and clear explanation. Just what I needed. Keep going with these super videos

  • @intc21
    @intc21 Год назад

    Great videos, thank you. Really like your teaching style.

  • @mrneedful8886
    @mrneedful8886 3 месяца назад

    follow all steps, but at the end i get my list, but they never swap the done to the end with the others they just stay there, and when reload i get a tons of to do boxes.. is that normal or they supposed to restart so i can have an empty list??

  • @venusstrange8754
    @venusstrange8754 Год назад

    Waouh ! You, sir, are a great teacher! Thank you!

  • @christinerobinson3626
    @christinerobinson3626 Год назад

    It's too good brooo🔥❣️

  • @benjamincoros7355
    @benjamincoros7355 Год назад

    Great tutorial!

  • @hassaneoutouaya
    @hassaneoutouaya Год назад

    Thank you so much !

  • @ramzanrazashaikhahmad2143
    @ramzanrazashaikhahmad2143 Год назад

    It' awesome. Thank you for making this video. It really helps a lot. What is the logic to removed the item which is marked as completed/checked.

  • @hectorsevilla7335
    @hectorsevilla7335 5 месяцев назад +1

    Almost perfect. Even though you can cross out an item, it would be great if you can also remove an item on the list via a 'remove button'.

    • @l-fitness3590
      @l-fitness3590 3 месяца назад

      Did you figure out how to do this

  • @steveh8204
    @steveh8204 Год назад

    Great tutorial, a very good intro to local storage for me personally. Only problem I have is when I click add button I have to refresh the browser for it to appear in Chrome and Edge. Is this just me?

  • @gesong789
    @gesong789 6 месяцев назад

    Thanks! Great tutorial and very easy to follow! However, the last part with the sorting didn't work for me.

  • @user-fj7tr3ub3f
    @user-fj7tr3ub3f Год назад

    thanks a lot! but what about the remove function?

  • @sirp9721
    @sirp9721 Год назад +1

    I have a question though
    Why do you have to get the items first in the local storage when they're not even there yet?

    • @dcode-software
      @dcode-software  Год назад

      In order to know there are no items, you must fetch the items 🙂

    • @sirp9721
      @sirp9721 Год назад

      @@dcode-software thank you 😀

  • @sebastiansobik7845
    @sebastiansobik7845 Год назад

    Hello, can you explain to me why we do not update local storage when user exits/refresh page? Isn’t it waste of resources to update it and refresh each time? I am noobie, so if it’s obvious don’t be mad on me

  • @DJDELLANNIE
    @DJDELLANNIE 8 месяцев назад

    i have one question but what theme is that? I like that a lot lol

  • @commonman8540
    @commonman8540 10 месяцев назад

    hi, how to add remainder in this todo app

  • @Montieken1
    @Montieken1 Год назад +1

    thx !! next time type a bit slower had to pause the video after every line :)

    • @jacoboferkalfa3476
      @jacoboferkalfa3476 7 месяцев назад

      There is a function in YouTub settings to set video on a slower mode

  • @user-zu8xn3lj8k
    @user-zu8xn3lj8k 5 месяцев назад

    why innerHtml uncaught typeError cannot set properties?

  • @chriswalker2562
    @chriswalker2562 Год назад

    I can't get it to work on Google Chrome. I need assistance.

  • @Poifix
    @Poifix Год назад

    "Simple ToDo list". 💀

  • @penguinxed
    @penguinxed Год назад

    you're very underrated sir, I've been watching your tutorials since I started learning Javascript and I can say that you're style of teaching is much easier to understand and follow. Thank you :)

  • @tdog7925
    @tdog7925 Год назад +2

    dislike this is not functional

  • @h051n
    @h051n 7 месяцев назад

    Lol is this for beginners???