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 :)
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.
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!
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!!!
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🙌👏
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!
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.
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 :)
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 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.
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...
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.
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 🙂
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👌
Everything works as shown in the video, but I am beyond confused as to why the tasks are truncated instead of properly adjusting vertically to the size of the display. I can't find anything online that has a solution to this.
Hey there, im getting an error when i run it and it doesnt add a task after i coded the JS - 'node' is not recognized as an internal or external command, operable program or batch file
I wish someone explain with a bit more detail what is happening in each line of code at 27:53. I don't understand what all the different lines are doing.
i have very little javascript experience even tho i took classes, but the way you went through things has definitely taught me way more than online classes. I will definitely keep watching videos and code along side you to learn more!
I am new to JS and I am having problem wtih 'Cannot read properties of null (reading 'appendChild')'. I am stuck at 25:49 part. I tried to move js to head at html because it was in the end of the body. I've went throught whole code for whole night and searching online...I even checked your github code. Submit button doesn't add anything .....
Hi I am a beginner and I think I had a problem on the css ( for .task-list h2 ) I did exactly like you but I don't know why I had to put main h2 instead of .task-list 16:31
I had the same problem. Check your html. I had id:'new-task-input' which caused that issue. Once I corrected that as id=(not :)'new-task-input' that problem got solved.
Great video loved it so much. a question though how did you get vs code to suggest multiple lines of the code a if you have written the same lines before.
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!
At around 24:00 I typed test into my input box and my js didn't work because it didn't show 'success' in the console. I even copied your code character for character and it is still not working. I have definitely invoked it into my index.html file, nothing like that because the previous test he did for the js worked. Can anyone help pleaase?
Great video! I love it. Most videos are way to slow, but I think that your video is the exception, it's actually a bit too fast! (Especially in the JavaScript area). Don't get me wrong, I appreciate the too the point and consise nature of the video, but the second half felt more like a lecture than a tutorial.
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)
I tried to make this with localStorage and omg it gets fucked up... saving tasks with an array was ok. saving changes after deleting a task was also ok by getting the index of deleted task and splicing it from the array. but it doesn't work when I edit a task. the index of the edited task always becomes -1 so I can't replace the original task in the array with the edited one. help?? :)
I am also facing problems while trying to make it with localstorage, the rendering and adding to storage work fine but editing the changes is so confusing, btw how did you get the index of the task to delete? can you link the github/code please, ty
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.
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
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👍🏾
Glad it helped!
2:38 html file
7:51 css file
21:26 js file
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!!!
it took me more 3 hours to complete the project ,yet i ve learned lots of things .Thanks budddy so much
Happy to 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
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!
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!
thanks man, this was my first web dev project took me 3 days to finish this video But i did it! appreciate you bro
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!
Man i love the way you code, learned a lot of vscode shortcuts along with JS. Great tutorial.
Woo happy I could help!
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
thank you for not selling any course and giving this for free love you!
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!
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
Thank you for the video, definitely helped jump start things at the JS side.
Glad it helped!
Tyler you are incredible. That was insane buddy!
Thanks, Lucas!
i think this is among the most well explained tutorial
Thank you! :D
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!
Best tutorial i've done so far. Thanks Tyler !
Glad it helped!
Thankyou so much for the tutorial, learnt many new things !
That was the most epic intro I ever seen. Holy god
Thanks 😅
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!
you are a crazy developer man. Huge respect ❣
Thanks a ton!!!
to fast, more explanations.... we get it, you can do it, just explain more, and slow down .... you will have a great channel if you do this !
Noted!
@@TylerPotts You the man !!!
@@ikleveland you tell me how to make it save when i leave tne page plz cant figure it out
@@gamerparadise3694 currently there's a video in the description describing that!
short videos are better !
I have seen some very long videos that never gets completed!
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!
Nice demo to get us to comment and like XD You totally deserve it :)
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
Thanks for the step-by-step video.
Easy to follow.
Glad it was helpful!
@34:00 for delete operation, whats the difference between
1) list_el.remove(task_el) 2) task_el.remove()
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...
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!
Great tutorial for beginners. Thank you very much!
You're very welcome!
Great Video!! Helped me understand JS better than i did before
This video is just amazing 👏 😍. The way you explain things makes programming easier and more funny to understand.
Happy to hear that! Thank you!
Thanks, TYLER POTTS, I fully understood this video, and it really helped me a lot to improve my Javascript Skills.
Man, your tutorials are soo helpful. Thanks a lot for that.
Glad you like them!
Thank you for the tutorial! This was my first js development experience-- I hope to expand on this project!
Woo! JavaScript is cool! 😎
This was absolutely helpful. Straight to the point.
Happy to hear that! :D
Sir, Which extension you are using for code suggestions? Plz 🙏
Decent video. That’s a lot of CSS!
It is definitely a lot of CSS 😅
@@TylerPotts Yeah. I do like the variables however.
thank you i learned so much even though you didn't explain much, i searched the terms i didn't know
gonna use this video to create my first project, thanks so much!!
Thank you, Man; I learned a lot from this video.
Glad to hear it!
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.
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! 💪
Nice "Tast Lisk". Well done
I really like this video, you can explanation so clearly. Thanks
Glad it was helpful!
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!
Very help full and have learnt a lot. Thank you dude :)
Thanks for such a great tutorial! Will expand this project
Everything works as shown in the video, but I am beyond confused as to why the tasks are truncated instead of properly adjusting vertically to the size of the display. I can't find anything online that has a solution to this.
You are amazing!!! Thank you for this video! It helped me to create a todo list without confusing!!!!
You're very welcome!
Hey there, im getting an error when i run it and it doesnt add a task after i coded the JS - 'node' is not recognized as an internal or external command,
operable program or batch file
Hey, Thanks for sharing. I really like the way you have explained to create a todo list. Really appreciate your efforts.
I wish someone explain with a bit more detail what is happening in each line of code at 27:53. I don't understand what all the different lines are doing.
Also define the standard property 'background-clip' for compacbility ... You had it also as warning ... Howto fix ?? Thanks
Amazing Tyler ! thanks bro...
Glad you liked it!
Thank you so much for this, video! Learned a LOTT!! Thanks!
Happy to help!
@@TylerPotts :)
Thank you, man. Great job!
Glad it helped!
i have very little javascript experience even tho i took classes, but the way you went through things has definitely taught me way more than online classes. I will definitely keep watching videos and code along side you to learn more!
can u help me with some thing
my e.preventDefault(); is not working its still refreshing on clicking sumbit
I am new to JS and I am having problem wtih 'Cannot read properties of null (reading 'appendChild')'. I am stuck at 25:49 part. I tried to move js to head at html because it was in the end of the body. I've went throught whole code for whole night and searching online...I even checked your github code. Submit button doesn't add anything .....
can you explain me why you have commented the div @21:19 and how did you access the commented div in JS in the javascript
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 :)
Thank you!! This tutorial was awesome!!!!!!!!!!!!!!
can someone tell me what was the answer to the localStorage question? I didn't understand it.
write the syntax
thanks for the tutorial ,can u tell me What RPM does your channel have?
It's a stunning video! Thank you!
Thank you very much!
Hi I am a beginner and I think I had a problem on the css ( for .task-list h2 ) I did exactly like you but I don't know why I had to put main h2 instead of .task-list 16:31
23:40 const task= input.value; main.js:9 Uncaught TypeError: Cannot read properties of null (reading 'value')
at HTMLFormElement. (main.js:9:28)
why am i getting this error
Did you select the input in js and assign the value attribute in HTML?
I had the same problem. Check your html. I had id:'new-task-input' which caused that issue. Once I corrected that as id=(not :)'new-task-input' that problem got solved.
HI, may i suggest that you do a 2022 one for this year please
Hi,I have a question.What was the purpose of setAttribute (readonly,readonly),while we simply could just set the attribute readOnly in the code?
Amazing this was amazing I love your tutorial, very helpful
Glad it was helpful!
Great video loved it so much. a question though how did you get vs code to suggest multiple lines of the code a if you have written the same lines before.
Thanks and I use Co-Pilot by Github to do the suggestions.
Hi, how would you generate an executable Jar file for the ToDo list program?
Do you have a way to use local storage to make the list persistent?
how did you auto populate section.task-list into
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!
At around 24:00 I typed test into my input box and my js didn't work because it didn't show 'success' in the console. I even copied your code character for character and it is still not working. I have definitely invoked it into my index.html file, nothing like that because the previous test he did for the js worked. Can anyone help pleaase?
A million thanks, this was very helpful
thank you... simple and straight forward
Hi Tyler. Thanks for the lesson, great.
Glad you liked it!
Great video! I love it. Most videos are way to slow, but I think that your video is the exception, it's actually a bit too fast! (Especially in the JavaScript area). Don't get me wrong, I appreciate the too the point and consise nature of the video, but the second half felt more like a lecture than a tutorial.
You change the playback speed of the video, if that helps :)
please what extension are you using using for the copilot
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)
Great tutorial!! It really helped. Thank you so much!
Glad it helped!
hello...
It was a knowlegeable video , thank you so much for this .
very nice teacher. you are my best teacher
Really perfect job . Thank very much 🙏. More videos 😁
Thank you! Will do!
Great vid! :)
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 ❤
Why are we doing task_edit_el.innerText.toLowerCase === "edit"?? didn't understand that.
Please what is the extension that is making does cool preset or demo code
I learn a lot. Thanks !
Glad it was helpful!
Hi mate how do you use the app if you want to use independent of visual basis thank u
I tried to make this with localStorage and omg it gets fucked up...
saving tasks with an array was ok.
saving changes after deleting a task was also ok by getting the index of deleted task and splicing it from the array.
but it doesn't work when I edit a task. the index of the edited task always becomes -1 so I can't replace the original task in the array with the edited one.
help?? :)
I am also facing problems while trying to make it with localstorage, the rendering and adding to storage work fine but editing the changes is so confusing, btw how did you get the index of the task to delete? can you link the github/code please, ty
on 22:50, how do you get that "e"? it is really baffling me