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

Подписаться 15 тыс.

Просмотров 31 тыс.

50% 1

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.github.io/To-do-...
GitHub Repository ( Don't forget to star !):
github.com/miguelznunez/To-do...
Sponsor me on GitHub!
github.com/sponsors/miguelznunez
Follow my blog:
/ miguelznunez
Email : mignunez@csumb.edu
Medium : / miguelznunez
Codepen : codepen.io/miguelznunez
GitHub : github.com/miguelznunez

Опубликовано:

27 апр 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 39

@codefoxx 3 года назад

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!

@rosen.espinoza9477 3 года назад

Another great video!!

@reyhanahashimova1484 Год назад

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

@mirzahussain3970 3 года назад

Nice 👍

@SignorPao 2 года назад

thanks dude!

@StarWarsKingdom 2 года назад

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

@anaswolx6587 3 года назад

thank you for video

@codefoxx 3 года назад

No problem, thanks for watching!

@kuz9476 2 года назад

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

@razu_ 2 года назад

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 2 года назад

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

@johnwood6900 2 года назад

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

@muizolaore4630 2 года назад

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

@joshuasimmons696 3 месяца назад

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

@leezee7980 2 года назад

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

@codefoxx 2 года назад

Absolutely

@leezee7980 2 года назад

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

@codefoxx 2 года назад

@@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

@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

@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!

@rapidloop Год назад

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

@sasuke7990 11 месяцев назад

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

@thearmor9231 3 года назад

Yey

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

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

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

Auto save is on

@gothfrog69 2 года назад

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 2 года назад

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

@gothfrog69 2 года назад

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

@codefoxx 2 года назад

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

@gothfrog69 2 года назад

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

@a_yamkin 2 года назад

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

@rayannepp 2 года назад

Font Awesome does not work, unfornately :(

@codefoxx 2 года назад

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