Build a Todo list app in HTML, CSS & JavaScript in 2024 | JavaScript for Beginners tutorial
Тәжірибелік нұсқаулар және стиль
Learn how to build a todo list web app in HTML, CSS and JavaScript with the ability to display, create, edit and delete your tasks. Task list, to-do list, shopping list.
UPDATED VERSION (With Local Storage): • Build a Todo List App ...
Source code: github.com/TylerPottsDev/yt-j...
// JOIN THE NEW DISCORD SERVER!
/ discord
// MY GEAR FOR CODING AND KZread
Blue Yeti Microphone: amzn.to/3jr3l7T
Microphone Stand: amzn.to/35B9LMN
Chair: amzn.to/3dWds3F
Thunderbolt Dock: amzn.to/3osBF6u
Monitor: amzn.to/37I8KoR
Screenbar Light: amzn.to/3iFRS7w
All of these products I own and have tested!
// FOLLOW ME ON TWITTER
/ tyler_potts_
// INTERESTED IN GAME DEV?
Game development channel: / muddywolf
// CHECK OUT MY GAME
play.google.com/store/apps/de...
// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE
Пікірлер: 450
omg.. spent the last six hours trying to understand a tutorial on how to make a todo list with JS and couldn't figure out lots of stuff. Came here and thats it, half an hour passed and I got it all! 🤣 huge thanks to you Tyler!!!
2:38 html file 7:51 css file 21:26 js file
Thanks for the little pieces here and there that really gave me hopes of making progress!
great video, i love tutorials where i dont just copy but i learn along with it
I've been learning JS for 3 months now and stuck on how to take what I've been learning and create stuff with it. This has been a great intro into it's possibilities. Fun tutorial! Thank you :)
@TylerPotts
2 жыл бұрын
Great to hear!
@alexandrabalanescu8340
2 жыл бұрын
Same here 😩 how are you doing now though?
@kritisrivastava6451
Жыл бұрын
Same!
@jasonlago5129
Жыл бұрын
Im glad im not the only one. I feel like im stuck in "basics Hell" and just need that final push
@PeteGoode
Жыл бұрын
try this: find a record keeping problem in your home to solve Example: A digital book catalog create a book catalog where you can check books in / out tasks: 1. create a new record (book title, author, etc) 2. generate a list showing books in various ways - alphabetically by title - alphabetically by author - alphabetically by subj - alphabetically by genre 3. create check in / out functions - record date & time - record to whom level it up later by scanning the UPC or entering the ISBN to auto populate the book details.
I was trying to practice with several projects, but i was really bored. This was absolutely helpfull and fun, thank you SO MUCH!
@TylerPotts
2 жыл бұрын
Ayy awesome! We all love a fun project! :D
Man i love the way you code, learned a lot of vscode shortcuts along with JS. Great tutorial.
@TylerPotts
Жыл бұрын
Woo happy I could help!
thanks man, this was my first web dev project took me 3 days to finish this video But i did it! appreciate you bro
Very well structured tutorial. Thought I could already do it myself with my basic JavaScript skills. Had no actual problems until I came to the part with deleting posts (I didn't even had an edit function built in.) But this taught me a lot, thanks for that :)
@TylerPotts
Жыл бұрын
Woo! Happy I could help!
it took me more 3 hours to complete the project ,yet i ve learned lots of things .Thanks budddy so much
@TylerPotts
Жыл бұрын
Happy to help!
thank you for not selling any course and giving this for free love you!
Thank you for the tutorial! This was my first js development experience-- I hope to expand on this project!
@TylerPotts
Жыл бұрын
Woo! JavaScript is cool! 😎
Thanks, TYLER POTTS, I fully understood this video, and it really helped me a lot to improve my Javascript Skills.
Great Video!! Helped me understand JS better than i did before
Tyler you are incredible. That was insane buddy!
@TylerPotts
2 жыл бұрын
Thanks, Lucas!
thanks a lot for this video. I have been programing quite long time but still could learn couple of programming techniques that helps me a lot!
This was absolutely helpful. Straight to the point.
@TylerPotts
2 жыл бұрын
Happy to hear that! :D
Best tutorial i've done so far. Thanks Tyler !
@TylerPotts
Жыл бұрын
Glad it helped!
Idk why everyone complains about the speed. Im a beginner too and i find that you explained everything in detail. I love your videos, the styling here is really good, well done🙌👏
@TylerPotts
Жыл бұрын
Thank you Iris!
Thanks for such a great tutorial! Will expand this project
gonna use this video to create my first project, thanks so much!!
Thank you for the video, definitely helped jump start things at the JS side.
@TylerPotts
Жыл бұрын
Glad it helped!
Nice demo to get us to comment and like XD You totally deserve it :)
Thankyou so much for the tutorial, learnt many new things !
for people saying he went too fast: This is supposed to be a very brief tutorial, if you want more details and deeper understanding, don't click on a short video. Thank you Tyler for this! I have a lot of experience with python but I wanted to begin learning javascript so this was an excellent tutorial, please continue!
@TylerPotts
2 жыл бұрын
Thank you, Waqas. I'm happy you enjoyed it! :D
Hey, Thanks for sharing. I really like the way you have explained to create a todo list. Really appreciate your efforts.
As a new developer i must say that you did a good job in breaking down the explanations properly and this video really helped. Good job👍🏾
@TylerPotts
Ай бұрын
Glad it helped!
Great tutorial!! It really helped. Thank you so much!
@TylerPotts
2 жыл бұрын
Glad it helped!
Great tutorial for beginners. Thank you very much!
@TylerPotts
2 жыл бұрын
You're very welcome!
Hi Tyler thanks a lot for this, its been real fun coding with you, though the gradient part failed to work till i used normal colors but i have learned a lot , thanks big deal👌
@TylerPotts
Жыл бұрын
Happy I could help you learn! - Sucks about the gradients!
thank you i learned so much even though you didn't explain much, i searched the terms i didn't know
Very help full and have learnt a lot. Thank you dude :)
Hi Tyler! Thanks for the great video. To do list app is very useful for beginners in Javascript, so your video helped me a lot
@TylerPotts
2 жыл бұрын
You're very welcome!
You are amazing!!! Thank you for this video! It helped me to create a todo list without confusing!!!!
@TylerPotts
2 жыл бұрын
You're very welcome!
Thank you!! This tutorial was awesome!!!!!!!!!!!!!!
Thank you, man. Great job!
@TylerPotts
2 жыл бұрын
Glad it helped!
A million thanks, this was very helpful
Thanks for this, super helpful and informative! I learned a lot from this.
@TylerPotts
Жыл бұрын
Glad it was helpful!
It's a stunning video! Thank you!
@TylerPotts
2 жыл бұрын
Thank you very much!
Thanks for the step-by-step video. Easy to follow.
@TylerPotts
Жыл бұрын
Glad it was helpful!
you are a crazy developer man. Huge respect ❣
@TylerPotts
3 ай бұрын
Thanks a ton!!!
Man, your tutorials are soo helpful. Thanks a lot for that.
@TylerPotts
3 ай бұрын
Glad you like them!
thank you... simple and straight forward
Nice "Tast Lisk". Well done
Amazing Tyler ! thanks bro...
@TylerPotts
2 жыл бұрын
Glad you liked it!
Great vid! :)
Tyler great video. I am not a beginner. However, it showed me how to complete CRUD operation with basic DOM manipulation techniques. Bravo! Great Job!
@TylerPotts
2 жыл бұрын
Glad it was helpful!
Thanks for this , am grateful for your work
This video is just amazing 👏 😍. The way you explain things makes programming easier and more funny to understand.
@TylerPotts
Жыл бұрын
Happy to hear that! Thank you!
Awesome. Thank to you I know how to create a nice Todo by following step by step you explanation in this video. Clear image that I can read even in my cell phone. Thank you much.
loved it. thank you
Thank you so much for this, video! Learned a LOTT!! Thanks!
@TylerPotts
2 жыл бұрын
Happy to help!
@PSProduktions
2 жыл бұрын
@@TylerPotts :)
That was the most epic intro I ever seen. Holy god
@TylerPotts
2 жыл бұрын
Thanks 😅
great video, thank you!
@TylerPotts
Жыл бұрын
Thank you for watching!
Great video, but I think for any future beginner videos, going at a slower pace would help us noobies out a lot!
@TylerPotts
2 жыл бұрын
I'll try to take that into account! Thank you!
@koshobai
2 жыл бұрын
It's super convenient to use the video playback functions like .75x and whatnot
Hi Tyler. Thanks for the lesson, great.
@TylerPotts
2 жыл бұрын
Glad you liked it!
i think this is among the most well explained tutorial
@TylerPotts
2 жыл бұрын
Thank you! :D
Amazing this was amazing I love your tutorial, very helpful
@TylerPotts
2 жыл бұрын
Glad it was helpful!
Thank you, Man; I learned a lot from this video.
@TylerPotts
Жыл бұрын
Glad to hear it!
Thanks man!
This was very helpful. Thank you so much
@TylerPotts
2 жыл бұрын
Glad it was helpful!
I learn a lot. Thanks !
@TylerPotts
2 жыл бұрын
Glad it was helpful!
This video is very helpful. Thank you so much
Really perfect job . Thank very much 🙏. More videos 😁
@TylerPotts
2 жыл бұрын
Thank you! Will do!
I honestly loved how fast you went with this. when stuff goes too slow I end up getting distracted and confused. also you're a css wizard. simple .css code and it looks and behaves great.
@TylerPotts
Жыл бұрын
Haha, honestly, I hate CSS that's why it's simple - the simpler the better in my opinion 🤣- Thanks for the kind words, Inigo!
I really like this video, you can explanation so clearly. Thanks
@TylerPotts
2 жыл бұрын
Glad it was helpful!
Very interesting video, thank you for helping me to fix the bug 🙏
that's really awesome
Wow,this video explains exactly what I didn't understood before and ofcourse I got to learn numerous new methods.🎉 But for now ,I want to know how to add the local storage as continues to this task lists...
hello... It was a knowlegeable video , thank you so much for this .
Thanks man....this helped alot
@TylerPotts
Жыл бұрын
Glad to hear it!
I got lost inside the function when you were creating new elements… Also, copilot was really interfering with your tutorial sadly But thanks for the hints on some features I had no idea existed in css! Keep it up!
Useful,Thank u!
@TylerPotts
2 жыл бұрын
Glad it was helpful!
Useful 👍 Thank you
great, now i gonna try that
Hey, I've never found a video worth commenting on before...until today! I found you so easy to follow! I started coding 8 weeks ago, mainly html and css, but wanted to get to grips with how to use javascript. This video was perfect as I really liked the way you show the divs with the tasks in for the css benefit, then take them away completely, showing us how to then add them with javascript. OK, your javascript part of the video was a little fast but that may well be that I wasn't confident with my code. All I can say is, very much appreciated, great video and thank you!!
@TylerPotts
2 жыл бұрын
Thank you, Julie! That made my day 😁
@juliethomas4826
2 жыл бұрын
@@TylerPotts to be honest, your video made my day because I've been struggling to get to grips with how to combine CSS styling and JavaScript. Your video showed exactly what I needed to see in a way that was understandable! If you get a minute to reply, did you make a video after this one? And if so which video? I've subscribed but haven't had a chance to look through yet.
@TylerPotts
2 жыл бұрын
There's a similar video which covers local storage as well which I've just created it's a task list app but for 2022!
@juliethomas4826
2 жыл бұрын
@@TylerPotts awesome. I'll take a look. Definitely keep posting...you're a great youtuber!
@Cheetohzz
Жыл бұрын
im in the same boat haha. also ya during the javascript part i can confidently say i was just writing what he was and not knowing what i was doing :D
great job very very impressive editing 😍😍😍😍😍
too good and thanks a lot
going to implement back for this
This learn was really helpful. Thank you
@TylerPotts
Жыл бұрын
Glad it was helpful!
Thank you it was helpful
My name is Marcel, I've been learning JavaScript for a while now and I must confess, this video was really helpful
@TylerPotts
2 жыл бұрын
I'm happy to hear it was helpful!
very helpful actually.
very nice teacher. you are my best teacher
Hi Tyler, it was an intersesting project. The "not" condition in css was a bit new and confusing but the project as whole was very interesting and helpful. Thanks again 🙂
@TylerPotts
Жыл бұрын
I'm happy you learned something! The not condition is super powerful! 💪
This was a pretty good build i enjoyed it the only change i made straight away is i named task task_discription , const task_el , create_task and task_content_el, create_task_content.
great, really great !
@TylerPotts
2 жыл бұрын
Thank you!
nice explanation and project
1:54 made me pause the video to make a cup of delicious-looking tea like yours. Hardcore tea lover here Imma continue this tutorial and get back.
@TylerPotts
2 жыл бұрын
Haha, you got to make a good brew!
@tenc6491
2 жыл бұрын
You bet! That said, I loved your video tutorial and narrations. I am still halfway through Js part coz I am trying to sink in everything you teach here. I must say, it's looking beautiful thus far. Thanks for the share mate! Regards from France!
great video and very helpful =]
@TylerPotts
2 жыл бұрын
Glad it was helpful!
Amazing!!!!!
Thanks!
We really need that part two pls
muito bom mano
@TylerPotts
2 жыл бұрын
❤❤
Excelente video, saludos.
Nice video bro
Decent video. That’s a lot of CSS!
@TylerPotts
2 жыл бұрын
It is definitely a lot of CSS 😅
@JonathanLeon
2 жыл бұрын
@@TylerPotts Yeah. I do like the variables however.
It was helpful thanks🤩
@TylerPotts
2 жыл бұрын
You’re welcome 😊
Your colors and UI are always awesome
@TylerPotts
2 жыл бұрын
Thanks I always try to pick out some nice looking colours 😁
@dimitnone6795
2 жыл бұрын
@@TylerPotts Did you pick those colors from a ready pallete ? Very nice choice!
@TylerPotts
2 жыл бұрын
Nope I just created a new palette for the project :)