D4mations.com

Learn to code a to-do list app in JavaScript – Part 1



We’re building a to-do list application from a simple design sketch, using HTML, CSS and JavaScript. This video was meant to introduce you to DOM manipulation and Event handlers in JavaScript, all that while building something cool and useful!

Code repository: https://github.com/themaxsandelin/todo
Design files: https://www.dropbox.com/sh/yq0qm8xtfguufyb/AAB6z26DddNyjbUhlDb12kBNa?dl=0

Hope you learned something new, and if you enjoyed the video and you’d give it a thumbs up I would really appreciate it!

Also if you have any suggestions, feedback or requests I would love to hear it. Blast that comment section or spam me on social media, I love interacting with you guys.

Social links:
Twitter: https://twitter.com/themaxsandelin
Instagram: https://www.instagram.com/themaxsandelin
Facebook: https://www.facebook.com/themaxsandelin
Personal website: https://www.maxsandelin.com/

Original source

d4mer

, , , , , , , , , , , , , , ,

50 responses to “Learn to code a to-do list app in JavaScript – Part 1”

  3. Right I am confused of how we went about centering the svg in the add button. I don't why it was not centered without the "margin: -8px 0 0 -8px". I thought that top 50% and left 50% was enough to center it. Can someone explain why did I need to remove 8 pixels from the top and left? Also is it removing when I do -8px? I dont get how you can do -8px.

  5. Great tutorial! Thank you so much for doing this. This really has helped me with my DOM and javascript knowledge. Love that you included some great CSS and used best practices in your javascript code. And the 2 vids feel like about 3 hours of content so played back at .75 speed it is perfect. Liked and subscribed!

  7. Great video so far, but I'm stuck at 49:16. My SVG is not all on one line (it is on three, and when I try and backspace to fit it onto one line, it doesn't work). When I try to put apostrophes on either side, it highlights all the text red.

  11. Here's slightly modified code from this tutorial:
    http://codepen.io/BartekKwapisz/pen/VbaRvr
    header input {padding: 0 60px 0 0;} and ul.todo li {padding: 14px 100px 14px 14px;}
    caused some weird positioning in my code; wonder if that's the case for sb else
    I needed * { box-sizing: border-box;} for proper positioning and ul.todo li {clear: both; padding-right: 100px;} for "todos" longer than li width. Width properties of header and container are changed from 100% to 50%.

  13. How could I remove the done button once the item goes into the done list?
    This is the code I'm using, but it only removes the button when the item im clicking is already in the done list 🙁

    function removeItem(){
    var item = this.parentNode.parentNode;
    var parent = item.parentNode;
    parent.removeChild(item);
    }

    function doneItem(){
    var item = this.parentNode.parentNode;
    var parent = item.parentNode;
    var id = parent.id;

    var target = (id === "todolist") ? document.getElementById("donelist"):document.getElementById("todolist");

    var btngroup = item.children[0];
    var doneicon = btngroup.children[1];
    btngroup.removeChild(doneicon);

    parent.removeChild(item);
    target.insertBefore(item, target.childNodes[0]);
    }

  23. For the SVG's, couldn't we just put the image directory in an image tag and have a src? The SVG's were still vector. When I changed the vector image size, it still had the same quality.

  25. My Header Is Not Showing Up!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  26. First of all, this was a very good tutorial!
    But I don't get the separation line to work properly:
    The line is still there, when there is no content added.
    I double checked the code/spelling, but I doesn't work lol
    Otherwise the line behaves like it should.

  28. what is the benefit of using the flexible box model over just setting the width of a tag as a %? wouldn't using "width: %" cause the box to adapt equally to browser size?

    thanks

  35. I though you're from the US. Your accent is so cute bro!
    By the way nice tutorial man!

    Of course you can use frameworks like angularjs, bootstrap, coffeescript or sass/less but the old school way is also enough!

    Greets from the Netherlands

  37. Hi, I was meaning to ask, how can I keep the content from the list even if I switch between browsers or devices? For instance I've uploaded the code on an FTP server, however when I switch between devices or browsers it goes blank. Thanks in advance!

  49. Max this video is THE sweet spot for not too basic not too advanced. The way you naturally progress through it is great to watch. You've nailed it. Subscribed. I've got one question though, how long would it take to get to your level. I know it's a bit ambiguous, but let's say I knew html and 60% of css and basic understanding of programming. Would it take me 3 months, 6 months, a year, over a year. Cheers mate.

  50. I am new in Javascript but watching you this video makes me feel more comfortable and able to understand, how and where I can use the functions and another piece of code in different apps. Kindly keep continuing on making such type of apps.

Leave a Reply