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
50 responses to “Learn to code a to-do list app in JavaScript – Part 1”
Hi I downloaded your files, but I am having trouble getting them in sync with my other files?
Hey there dude nice project, but I'm having trouble trying to find and see your reset.css, do you think you can reply and direct me to it?
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.
that's very intelligent
please do more videos like this that's helps alot.
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!
this was really helpful.. thanx
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.
How can I make this responsive and look right on mobile??
Awesome video Max! Are you going to upload more JavaScript tutorials? You would help us a lot. Keep it up and good luck with everything.
what keyboard combinations are you using to navigate the cursor so quickly?
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%.
when i open the html it shows nothing in the inspect part :/ i followed your instructions perfectly but nothing shows up.
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]);
}
So helpful! thanks very much
Wow
I'm trying to link the html and css but it doesn't come out anything,
Where did you learn JavaScript
please
I'm having trouble with the SVG displaying when added to the list, any ideas? its just a blank button.
hey are you writing your code in sublime text
Thanks Max very helpful, keep up the great work. Please make more stuff with javascript.
Thanks for the lesson. Where I can download reset.css?
You didn't include the CSS file?
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.
I really need more videos like, creating relatively basic stuff with javascript. Anyone know any other good videos out there?
My Header Is Not Showing Up!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
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.
JEEZ !
Couldn't you be any more slower !
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
kindly make any angula Js1 tuts
great job 🙂
Thank you so much
Good afternoon how I open all list app
Very cool!
awesome video ! if you slowed down alittle and explained alittle more would be better.
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
Hey Max so I tried doing this to do list app coding but when my index.html is not showing anything in browser so what could be the problem?
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!
Hello,
will this video help me create a mobile app for my computing project at university,
thank you
yeah keep doing videos man, i watch these as I fall asleep. I always pick a little something up.
Thank you so muchh
to much css … but it is a good course, tnx
Better Way of doing the JS would be to store them in a array of completed or not completed. Just makes things easier. Anyhow this works just as fine!
i enjoyed this as someone who was looking for reasons to continuing to study js this was cool thanks
@Max Sandelin … why we are using reset.css file? please explain… confused
This is great Max. Thanks so much
GUYS I NEED HELP…What application should i use (and how to download it)???? PLS HELP ME!!! (aside notepad++) Thanks in advance please help….
thanks sir. 🙂
yess cool awesome damn it! ? ?
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.
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.