#12 of 25 Beginner Projects - HTML, CSS, & JavaScript - To-do List ( Responsive Design )

In project 12 of 25 beginner JavaScript projects we teach you how to create a to-do list application.
Try it before you build it ( Hosted with GitHub Pages):
miguelznunez.g...
GitHub Repository ( Don't forget to star !):
github.com/mig...
Sponsor me on GitHub!
github.com/spo...
Follow my blog:
/ miguelznunez
Email : [e-mail]
Medium : / miguelznunez
Codepen : codepen.io/mig...
GitHub : github.com/mig...

[@codefoxx]

Please add border: 1px solid lightgray to the .item class in CSS. I completely forgot, otherwise when you hover the to-do list items they will be a little "jumpy" !

[@celinewu6060]

Thanks for the wonderful video, I learned a lot!

[@mirzahussain3970]

Nice 👍

[@rosen.espinoza9477]

Another great video!!

[@reyhanahashimova1484]

tnx a lot i' so glad that u have made this video thank you so much 😘😘😘😘

[@SignorPao]

thanks dude!

[@kuz9476]

Thank you very much. I almost managed to do it like you did, but for some reason it turned out to be a problem to add two icons at once. But thanks to you I understand how it's done

[@StarWarsKingdom]

Great video, but I seem to be having an issue with the add item function. When I go to add a task I am getting an error stating "addItem is not defined." Can anyone help? thanks

[@joshuasimmons696]

following along, at 15:51, your calling .item in css, but theres no class of item in your html?!?!?!?

[@sqrtye]

why did we create the trashIcon constant?

[@anaswolx6587]

thank you for video

[@codefoxx]

No problem, thanks for watching!

[@razu_]

Hi! Thanks a lot for the video. Do you think its too hard to make the content persistent? (store the changes in a database, like for a particular user, using login)

[@codefoxx]

It's not hard once you know how to do it. If all you know is html,css, and JavaScript, you will have to learn a framework like Spring Tools or Node.js ( which I recommend) and a database like mySQL or MongoDB. So, it will be hard at the beginning to learn those technologies and figure out how to put the whole thing together. Hope that answers your question

[@leezee7980]

Hello sir, thanks for this wonderful tutorial But I can I make it save my records on my local storage?

[@codefoxx]

Absolutely

[@leezee7980]

Please how do I go about it I tried using local storage but didn’t work🙏🏼

[@codefoxx]

@@leezee7980 Please watch project number 11 (the flashcards project). It's part of the same series. That project is very similar to this one and it uses local storage, so it shouldn't be difficult to take what you learn in that one and apply it to this one. Otherwise I would have to redo this video and although I wouldn't mind, I can't at the very moment

[@muizolaore4630]

Pls what's the essence of creating the variable name trashIcon with Id trash. The code works just fine without such

[@johnwood6900]

Thanks for the video! how would you change the check mark back to lightgray if you accidentally clicked it?

[@GuitarHope]

Hi. I might be late but here's how I'd do it. I would create a class for it in CSS file, for example: .color-clicked {color:limegreen} and in the eventListener change checkIcon.style.color ="limegreen" to checkIcon.classList.toggle ('color-clicked'); This will allow you to change the color back once you click it again

[@slammgucci]

how do i create drag drop functionality on the list to switch order of task???

[@codefoxx]

There's a library called Sortable.js that makes that very easy to do. Look into it

[@sasuke7990]

They show me error... And say they cannot read addEventlistener

[@corycarreira9524]

I know this video is old, but how are you seeing the page refresh as you add to your code?

[@codefoxx]

Auto save is on

[@rapidloop]

Great content⚡ I'm building projects for my channel too

[@thearmor9231]

Yey

[@suvojitghosh2774]

Once you click on the check Icon it turns limegreen and doesn't do anything when you click it again. Is there any way to make it toggle?

[@GuitarHope]

Hello. I might be late but here's how I'd do it. I would create a class for it in the CSS file, for example: .color-clicked {color:limegreen;} and in the eventListener change checkIcon.style.color ="limegreen" to checkIcon.classList.toggle ('color-clicked'); This will allow you to change the color back once you click it again Hope this helps!

[@a_yamkin]

Good afternoon, after the introduction of more than 37 characters, item breaks

[@gothfrog69]

I did everything, but my .js file does not seem to work. The html/CSS looks correct. I am linking the .js file by placing in between the HTML header tags. Can someone help me with this?

[@codefoxx]

Try placing the script.js file above your closing body tag

[@gothfrog69]

@@codefoxx I tried that too, but still not working. Is there anyway I can show you?

[@codefoxx]

@@gothfrog69 also try it without type="text/javaScript"

[@gothfrog69]

@@codefoxx I figured it out. It was actually a typo I placed above. Sorry about that. Thank you for the content! :D

[@rayannepp]

Font Awesome does not work, unfornately :(

[@codefoxx]

Are you sure you linked everything correctly? Perhaps you are using a different version of font awesome that is not compatible with certain icons. Please re-check

[@Aby_cat_RedBlitz]

@@codefoxx yes, i did everithing corectly and it doesn't work

[@Aby_cat_RedBlitz]

dont work