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.

If you want to buy me a coffee: https://ko-fi.com/themaxsandelin

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/

Comments

jitendra sikarwar says:

How to setup this environment. I am a total beginner. Can someone please help me in setting up the environment for this.

Refinnej L says:

anyone else whose css off?

Pradeep Poudel says:

Great video but too fast man.

Eugene Lefter says:

great tutorial, i wish you were a little bit slower

Manuel Rasmijn says:

Hi, great tutorial so far but I am getting this error when I do the step around 50:52 mark.
myscript.js:40 Uncaught TypeError: Cannot read property ‘appendChild’ of null
at addItemTodo (myscript.js:40)
at HTMLButtonElement. (myscript.js:13)

any clue?

Irene Ihnatenko says:

Wow! I love watching it! So clean and beautiful code. Thank you for your videos!

Diaeddine LYAMANI says:

is it only me who’s css doesn’t works the same here in video ??? -_-

MightyArtss says:

One thing that I’ve noticed is that there’s some sort of a bug when removing items. If you have two items, if you delete the one that is on top (at position childNodes[0]), it works fine. But if you click delete on the second item, it will again delete the first item on the list. Looking for a solution to that atm

J Canan says:

This is awesome thank you! Would love to have seen you add an edit button.

Deepak Singh says:

Great Video. Somthing about it is unique and very detailed. May i know what is this graphical measurement like tool name that you are using and if there is any you wanna suggest to me to use in windows.

Fresh Rod says:

Hey Max, how’s the app doing, did you go further in developing it ?
I invite you to have a look at an article we wrote about some features a to-list should have, we’d love your feebacks: https://blog.zenkit.com/7-mistakes-to-avoid-when-tackling-your-to-do-list-acbddbedabf7

jupertrol says:

having a bit of trouble storing the svg as a string in the variable. no matter if i use single of double quotations around it. Even if i copy the source code from github. Is there an easier way to fix this than putting before every quote in the string?

Utsav Goel says:

Which IDE you use max

N H says:

Hey Max, please could you copy the html for the buttons, on github (file index.html) I could found the code only for the add button, also when I open the image of the delete button in Atom, it lacks the

Ahmed Abdel Gadir says:

great video!

Zak Woodward says:

how do i make a reset.css thing like he has

Majo Chaves says:

THIS IS AMAZING. I HAVE BEEN LOOKING EVERYWHERE FOR A VIDEO LIKE THIS!!!!! AND THE CODE WORKS PERFECTLY. THANK U SIR FOR THIS AWESOME CONTENT. <3

Kyle Jennings says:

i love this tutorial so much. Struggled a little bit with how fast you move, but I love not having to sit and wait for info.
Ending had me geeking haah

Ahmet Çağatay says:

very nice

Varalakshmi vara says:

Great work

Marta Wojno says:

We need more people like you in the internet and more videos made by you :)

Shubham Pokhrel says:

can we create this app for android phones using javascript?

Morten Dalsgaard says:

Thanks! This is awsome! Way too quick for me, I have to constantly pause and backtrack to check if I got everything, and I often don’t. But even though it is a difficult and long proces (I use aproximately 6 or 7 times the actual time you use, because I get lost and have to start from an earlier point) it is great. I can’t do 0.5times speed because it makes me very sleepy (: and quite frankly it is humiliating for me to notice that you type quicker than me at half speed (:

I love the feeling of working on something that I can actually use for something (: It is a great practise while i am reading and doing courses on htmlcssjs.

I really-really-really like that you are showing the actual proces and workflow with errorfindings, mockup checking, googlesearchs and everything. Also love the occasional “yes!” or “Nice!” when it works and and and the motivational comments, great, seriously, this is the most fun I have had with coding sofar! (been a hobbycoder for a couple of years now)

I want to have the todolist on my portfolio and I hope to actually use it as a todolist for all the things I need/want to make on my portfolio. I haven’t seen the second part yet. I am hoping it will show how to make the list items permanent when refreshing the page, if not I will just hardcode that and have this as a plaything demo.

Other things I hope will come in the next part is how to make an entry with enter. I also have a little hope about drag and drop functionality. But no matter what I am looking very forward to see what it will contain.

shii adii says:

A good <3 teacher

G21 Studio says:

Please do more project

Faith Freedom says:

this how you should do a video fucking legend

Sweet Sorrow says:

This video looks more about CSS than JS. 45mins for CSS and just 15mins for JS. Dislike

Arman Handa says:

Thank you so much Max!! This was awesome! Please do more projects such as this!

Vela Farquharson says:

This was incredibly helpful. Thank you!!!!

Leon Hoffmann says:

Cool stuff Max! :)

Hassan M. says:

Hi Max. I was trying to test your code in Android Studio. html and css apparently work fine, but there seems to be an issue with the javascript code. If I type in a todo and either press “enter” or click on the button, unfortunately nothing happens. In the browser is was working fine. Do you have an idea, what the problem could be?

Hamza Azeem says:

Best! ..
Please Do more video like these ..

JAro Keraj says:

super tutorial:) congrats:)!!

Jarno Grooten says:

I have no idea whatsoever why javascript isn’t working except for an alert window, I looked it up but everybody suggests a timing issue which it is not since the script is at the bottom within the body tags.The code is correct and the same as in the video, frustrating as hell..

Paiz Hamdani says:

Max you might want to try using Sass. Its save so much time with the “DRY”.

casy azmon says:

thanks dude..

Hassan M. says:

Thanks for this tutorial, Max! I finished part 1 and 2, but I can’t figure out, why the width of my header is wider than my todos, although the settings in style.css are identical. Any idea?

chiel de Leeuw says:

Great video. I managed to get this working but do find a responsive problem. On mobile the to do list does not seem to scale that well.

Write a comment

*

Human Verification: In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.


Do you like our videos?
Do you want to see more like that?

Please click below to support us on Facebook!

Send this to a friend

▷ Other ReviewsVehicles▷ Show Cars▷ Motorbikes▷ Scooters▷ Bicycles▷ Rims & Tires▷ Luxury BoatsFashion▷ Sunglasses▷ Luxury Watches▷ Luxury Purses▷ Jeans Wear▷ High Heels▷ Kinis Swimwear▷ Perfumes▷ Jewellery▷ Cosmetics▷ Shaving Helpers▷ Fashion HatsFooding▷ Chef Club▷ Fooding Helpers▷ Coktails & LiquorsSports▷ Sport Shoes▷ Fitness & Detox▷ Golf Gear▷ Racquets▷ Hiking & Trek Gear▷ Diving Equipment▷ Ski Gear▷ Snowboards▷ Surf Boards▷ Rollers & SkatesEntertainment▷ DIY Guides▷ Zik Instruments▷ Published Books▷ Music Albums▷ Cine Movies▷ Trading Helpers▷ Make Money▷ Fishing Equipment▷ Paintball Supplies▷ Trading Card Games▷ Telescopes▷ Knives▷ VapesHigh Tech▷ Flat Screens▷ Tech Devices▷ Camera Lenses▷ Audio HiFi▷ Printers▷ USB Devices▷ PC Hardware▷ Network Gear▷ Cloud Servers▷ Software Helpers▷ Programmer Helpers▷ Mobile Apps▷ Hearing AidsHome▷ Home Furniture▷ Home Appliances▷ Tools Workshop▷ Beddings▷ Floor Layings▷ Barbecues▷ Aquarium Gear▷ Safe Boxes▷ Office Supplies▷ Security Locks▷ Cleaning ProductsKids▷ Baby Strollers▷ Child Car Seats▷ Remote ControlledTravel▷ Luggages & Bags▷ Airlines Seats▷ Hotel Rooms▷ Fun Trips▷ Cruise Ships▷ Mexico Tours