Build a Todo list app in HTML, CSS & JavaScript in 2024 | JavaScript for Beginners tutorial
HTML-код
- Опубликовано: 1 окт 2021
- 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 RUclips
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 
Хобби
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!
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!!!
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 :)
Great to hear!
Same here 😩 how are you doing now though?
Same!
Im glad im not the only one. I feel like im stuck in "basics Hell" and just need that final push
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.
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 :)
Woo! Happy I could help!
great video, i love tutorials where i dont just copy but i learn along with it
Man i love the way you code, learned a lot of vscode shortcuts along with JS. Great tutorial.
Woo happy I could help!
I was trying to practice with several projects, but i was really bored. This was absolutely helpfull and fun, thank you SO MUCH!
Ayy awesome! We all love a fun project! :D
thank you... simple and straight forward
thanks man, this was my first web dev project took me 3 days to finish this video But i did it! appreciate you bro
Thank you for the tutorial! This was my first js development experience-- I hope to expand on this project!
Woo! JavaScript is cool! 😎
Thank you!! This tutorial was awesome!!!!!!!!!!!!!!
Thank you for the video, definitely helped jump start things at the JS side.
Glad it helped!
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!
Thanks, TYLER POTTS, I fully understood this video, and it really helped me a lot to improve my Javascript Skills.
gonna use this video to create my first project, thanks so much!!
Great Video!! Helped me understand JS better than i did before
Best tutorial i've done so far. Thanks Tyler !
Glad it helped!
This was absolutely helpful. Straight to the point.
Happy to hear that! :D
Thanks for such a great tutorial! Will expand this project
Tyler you are incredible. That was insane buddy!
Thanks, Lucas!
thank you for not selling any course and giving this for free love you!
Hey, Thanks for sharing. I really like the way you have explained to create a todo list. Really appreciate your efforts.
thank you i learned so much even though you didn't explain much, i searched the terms i didn't know
Thankyou so much for the tutorial, learnt many new things !
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👌
Happy I could help you learn! - Sucks about the gradients!
Great vid! :)
Great tutorial for beginners. Thank you very much!
You're very welcome!
it took me more 3 hours to complete the project ,yet i ve learned lots of things .Thanks budddy so much
Happy to help!
Great tutorial!! It really helped. Thank you so much!
Glad it helped!
Thank you, man. Great job!
Glad it helped!
This video is very helpful. Thank you so much
great video, thank you!
Thank you for watching!
Nice demo to get us to comment and like XD You totally deserve it :)
Very help full and have learnt a lot. Thank you dude :)
Thanks for the step-by-step video.
Easy to follow.
Glad it was helpful!
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🙌👏
Thank you Iris!
It's a stunning video! Thank you!
Thank you very much!
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
You're very welcome!
Thank you so much for this, video! Learned a LOTT!! Thanks!
Happy to help!
@@TylerPotts :)
A million thanks, this was very helpful
Man, your tutorials are soo helpful. Thanks a lot for that.
Glad you like them!
You are amazing!!! Thank you for this video! It helped me to create a todo list without confusing!!!!
You're very welcome!
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.
Thanks for this , am grateful for your work
Amazing Tyler ! thanks bro...
Glad you liked it!
Thanks man....this helped alot
Glad to hear it!
you are a crazy developer man. Huge respect ❣
Thanks a ton!!!
very nice teacher. you are my best teacher
Thanks for this, super helpful and informative! I learned a lot from this.
Glad it was helpful!
Nice "Tast Lisk". Well done
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!
I learn a lot. Thanks !
Glad it was helpful!
going to implement back for this
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...
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!
Thank you, Waqas. I'm happy you enjoyed it! :D
Hi Tyler. Thanks for the lesson, great.
Glad you liked it!
Thanks man!
Great video, but I think for any future beginner videos, going at a slower pace would help us noobies out a lot!
I'll try to take that into account! Thank you!
It's super convenient to use the video playback functions like .75x and whatnot
This learn was really helpful. Thank you
Glad it was helpful!
This video is just amazing 👏 😍. The way you explain things makes programming easier and more funny to understand.
Happy to hear that! Thank you!
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.
This was very helpful. Thank you so much
Glad it was helpful!
Thank you, Man; I learned a lot from this video.
Glad to hear it!
loved it. thank you
I really like this video, you can explanation so clearly. Thanks
Glad it was helpful!
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.
Haha, honestly, I hate CSS that's why it's simple - the simpler the better in my opinion 🤣- Thanks for the kind words, Inigo!
Amazing this was amazing I love your tutorial, very helpful
Glad it was helpful!
that's really awesome
nice explanation and project
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!!
Thank you, Julie! That made my day 😁
@@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.
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!
@@TylerPotts awesome. I'll take a look.
Definitely keep posting...you're a great youtuber!
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
too good and thanks a lot
Really perfect job . Thank very much 🙏. More videos 😁
Thank you! Will do!
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.
Haha, you got to make a good brew!
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!
very helpful actually.
Useful,Thank u!
Glad it was helpful!
i think this is among the most well explained tutorial
Thank you! :D
hello...
It was a knowlegeable video , thank you so much for this .
Useful 👍 Thank you
great job very very impressive editing 😍😍😍😍😍
Loved this tutorial! Thanks for the help, I was stuck trying to build my own but came here and it was clear as the water, amazing explanation!
One question tho, whould it any different it you didn't create the task_content_el? (div inside task_el)
That was the most epic intro I ever seen. Holy god
Thanks 😅
Very interesting video, thank you for helping me to fix the bug 🙏
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 🙂
I'm happy you learned something! The not condition is super powerful! 💪
Hi Tyler great project, it made me understand a couple of things I was struggling with in the past. Could you please help out with the assignment and complete that part of the project for us. I've tried all I could possibly think of but still not getting it right.
Thank you it was helpful
great, now i gonna try that
Your colors and UI are always awesome
Thanks I always try to pick out some nice looking colours 😁
@@TylerPotts Did you pick those colors from a ready pallete ?
Very nice choice!
Nope I just created a new palette for the project :)
great video and very helpful =]
Glad it was helpful!
great, really great !
Thank you!
Hi Tyler! This was a great video and I hope you are doing well. Is vanilla javascript still used in the industry or is everyone using js frameworks? Thanks
Vanilla JavaScript is widely used still! We use it at our place of work alongside other languages like php and css
Decent video. That’s a lot of CSS!
It is definitely a lot of CSS 😅
@@TylerPotts Yeah. I do like the variables however.
Yo how do you get the auto suggestions for Javascript in VS Code where it suggests the next line for you? Great video btw thanks ❤
We really need that part two pls
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!
Glad it was helpful!
thank you so much sir
It was helpful thanks🤩
You’re welcome 😊
Amazing!!!!!
My name is Marcel, I've been learning JavaScript for a while now and I must confess, this video was really helpful
I'm happy to hear it was helpful!