How to Code A Better To-Do List - Tutorial
HTML-код
- Опубликовано: 16 июл 2019
- In this video we will be coding all of the JavaScript for a multi-list to-do list application. If you want to see the HTML/CSS portion of this application make sure to checkout Kevin Powell's video ( • Creating a better todo... ).
This is a long video, so we will be covering a ton of useful JavaScript information. We also will be using no frameworks in this video, so you can truly understand how the JavaScript is working. To store all of the data for our application we will be using localStorage since it is easy to setup and incredibly powerful. I will also explain every line of code as I go so you have a complete understanding of everything our application does.
🚨 IMPORTANT:
Kevin Powell's Video (HTML/CSS): • Creating a better todo...
Kevin Powell's Channel: ruclips.net/user/KevinPowell?s...
📚 Materials/References:
Initial GitHub Code: github.com/kevin-powell/todo-...
Final GitHub Code: github.com/kevin-powell/todo-...
🧠 Concepts Covered:
- Dynamic re-rendering without a framework
- Adding dynamic event listeners
- How to use localStorage to persist website data
- Advanced JavaScript array methods
- Code organization best practices
🌎 Find Me Here:
My Website: webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#ToDoList #WDS #JavaScript
A big thanks to Kyle for reaching out to me and getting this off the ground.
It was a ton of fun to put together and it's so great seeing my design be fully functional like this! Had a blast making it and the final result is awesome, thanks Kyle 😁
Awesome, definitely subbed :D
@@AnnieTaylorChen Thanks!
@@KevinPowell check this video at 38:53
When the tasks are empty the buttons jump up into the white area. Also check the grid layout on his small viewport. The 1fr on the left and right end up being 0px. Might want to add some margin or something, or if grid supports it do a Calc with 1fr + 2rem or something
@Pieter Venter I don’t think anyone cares enough about this specific project to go do that
I cant express my happiness bro i just requested you to make local storage and here you are. So thankful to you bro i never thought great people like you listened to my request
Thank you both of you guys, im starting with html/css/js now and i see that these videos that you guys did are amazing, so much content in only one hour and a half, im probably gonna watch this soo many times, and now im subbing for both of you.
Again, thank you both for coming together to provide this incredible content!!
just completed both the videos, extremely thankful to both of you
Very cool idea to work together on the same app whilst keeping the videos separate. There are so many videos out there where people simply copy the css into the tutorial and don't discuss it at all and then there are even more that do js and css together in one video but the video gets super long and the css ends up being pretty bad quality. That's why I watch Kevin's content specifically to get an understanding of the advanced css tricks out there, but sometimes one just wants to see his css solution in action in a fully fledged app with JS.
This is a great way to tick off all the boxes and keep the video lean and to the point with the option to expand. Big thumbs up!
Thank you so much. You are right that Kevin has incredible CSS and frontend skills. I love watching his videos, because I always seem to find something new to learn. I also agree that long videos are just not good. I generally try to keep my videos under 30 minutes if possible. I find it much easier to digest and learn from if a video is shorter. Kevin and I love how this collaboration went and are actually planning to do another collaboration sometime in the future. It won't be soon since I am super busy with my upcoming course and vacation, but it will definitely happen.
You're really a genius Kyle. Who could have thought of using the Date as id! It's incredibly rare to find someone who is both an amazing coder AND an amazing teacher! Thank you for everything 💝
rails, Laravel uses it. but he's still a genius
@@adamclasic Oh, I'm not familiar with those languages, still a noob. Thanks for letting me know!
I changed a lot of the variables/markup in the first video to personalize it. It was quite a trek through this one to make sure everything hooked up correctly. I'll be doing a bunch more of ya'lls tutorials. Fantastic stuff.
Thank you very much for the lesson! At first time it was a bit complex for me, but later after watching it a few more times I understood almost everything!👍
Thank you very much for this tutorial! I have learnt so much from it. I especially appreciate you explaining your codes in such good details. I can tell you must have put in so much effort in the making of this video. Really high-quality. I am looking forward to another one coming from you. Thank you again!
Thank you. I do put a ton of effort into the production of these videos and I really appreciate that you are enjoying the video and learning from it. I hope you like my other videos just as well.
I got notification from both the channels...n confused which one to watch first...n then happy to know both of u have collaborated...
It was a ton of fun working with Kevin. He is amazing!
Haha! Glad that it made the decision of which to watch first easier 😁
man this was hard on the brain , need to watch this multiple times ig, good value
Was waiting for this tutorial, and the design looks much better. Thank you Kyle.
I'm really glad you enjoyed it. Kevin did a great job on the design.
@@WebDevSimplified Big thanks to him for the great job.
Really good video and collaboration. I hope you do more like this, it was very useful not only to learn a ton of new code and structures, but also it was great to see how two coders might collaborate on a project. Thanks!
Thanks. I actually have a 3 way vollaboration coming up in the next month so hopefully you like that as well.
@@WebDevSimplified looking forward to it!
Thanks man, another great tutorial!
I'm trying, man, but it's hard to get out of tutorial hell when there's someone like Kyle making these tutorials
@Lil Gravy News i meant that ppl like him explain so well that it's hard to leave tutorial hell 😂
@sushi817 lol. "tutorial hell" means not being able to stop watching tutorials, and so not practising all by yourself
Thanks for this amazing tutorial.
Hey Kyle, really appreciate this video and collaboration with Kyle. I hope that this isn't taken the wrong way, because youtube comments can be mean and I hope to see more of your videos, but in the spirit of improvement the video was very fast and hard to digest at the speed that you're talking for newbies.
I appreciate the feedback. This is something I have actively tried to improve in my newer videos.
Amazing! Thanks for putting this content out
Great tutorial, thanks!
Hi! Thank you so much for this tutorial. This is my third one from you.
I like your generic approach and the clear separating of concerns: the presentation and the logics are nicely isolated from each other.
I wonder, if it's possible to make selectedList a global variable exactly as selectedListId, because you need to find it in the lists array almost in every function. Or is there a reason why you didn't save it in the local storage?
Fantastic tutorial. Lots of new stuff to unpack here.
Thank you! I really hope you learn something new from it.
love the way you code.
Thanks for this great collaboration!
Thanks for this great tutorial 👏👏
Someday I wish I could have his brain.
this is awesome! looking forward to more colabs with Kevin! :)
Me too. It was so fun being able to create a project where we both could bring our own specialties together to make something even better than we could alone.
It was a ton of fun, and I'd love to do more in the future!
Sweet! Gonna watch both videos now. Thanks
You're welcome! I really hope you enjoy them both.
@@WebDevSimplified I will!
Thanks Web Dev Simplified
Learnt a lot from this video. Thank you so much for the time and effort you put into this. I was wondering though, about how long did it take you to come up with a working solution to the project ignoring recording time and editing etc?
Once again, thank you very much.
thank you guys so much!
You are just an amazing person mate!
Dear boi,
do you realize that trought theese videos you are changing people's life, mine included?
I LOVE YOU
so fast.. so amazing.. i have subscribed
Thanks! I'm glad you enjoyed it.
Toggling a task should not use a click event listener. User can tab through the checkboxes and toggle by keyboard. It's better to use a change event listener
Such a good point. I cannot believe I forgot that 🤦♂️
can you send code please
The humble task list app is actually quite rich in JS features and this tut just takes everything to the next level. I'm going to be using data attributes a lot more and had no idea about the tag. Great stuff man, I'll be combing through this tutorial for the entire week!
This is awesome.Thanks you somuch.Hope u will create series about some small project in Angular
I'm glad you enjoyed it. React and Vue are higher up on my list than Angular right now but I plan to get to them all.
Following you as one of my best tutor has make me more creative than before and now I do not depend on frameworks any Longer. I can boldly say that I am increasing my coding capacity. Thanks to Kelvin Powell my second mentor. I love you the Simplifies! good goooooooooooooooood. Thanks
I'm really glad I could help!
@@WebDevSimplified I love you and may God bless you with many more blessings and knowledge in Jesus Christ Name!
Thanks bro! I have like subscribbbbbbbed!! Great Tutorial!!
Great video! It would be cool if you could create a video like this but show how you would break this up into multiple classes/files to make it easier to read and such. That is one thing I have a lot of trouble with (project structure)
I have a few videos in a playlist focused on refactoring/review of code which could be useful. In this particular project I would keep everything in this one file since it is all fairly tightly coupled. The only things I would think about moving out would be the save/load from localStorage.
You're the goat bro 🐐
Thanks for this awesome video mate. I have learned a lot from it, I am specially amazed about how you structured the project. Just wanted to ask a small question man; When it comes to big projects, or even small ones, how do you know how to structure the project or where to start. For instance, how would know that you will need an ID for the list in order to connect it with the its items. Stuff like that, how do you learn that mate? It will be awesome to know about that man. Like I have the syntax down, but when it comes to implementing the ideas I always feel like I have started the wrong way around, and I end up over complicating simple things, and skipping things that I will need later on, and once I need it, it becomes super hard to implement it because of the amount of complexity I have added to the project. Thanks a lot man and sorry for the long question man hahah.
Amazing. This helped me with regards to something similar that I am trying to put together. One question: regarding storage in the browser, how much space is there in localStorage?
Started using this app and I'm thinking about how to add notes/progress to the tasks. Thanks again!
Thanks Man
Thank you both.
You're welcome!
Glad you enjoyed it!
Hi, I want to ask whether all the checklist that has been created can be saved to the database?
Great tutorial, and at the same time set a new Olympic record at 39:15 for fastest tutorial ever! I need a drink now.
Thanks for the great tutorial !
Is it possible to store the list of tasks in a separate JSON file instead of inside the browser ?
@Computer Queen how would you do this?
Can someone explain at 10:19 what adding task. to lists does and what he's saying? just making it more unique so it doesn't conflict with anything else from other sites that might be interacting with his local storage?
I don’t know if I should be asking questions in the comment section, but if I wanted to delete a task without checking it off, how would I do that?
is it possible to limit who can edit or create lists and tasks? How can I stop a viewer editing the list and task?
Awesomeness. WOW !
I'm glad you enjoyed it!
@@WebDevSimplified you are an inspiration dude
Namespace created in the local storage with name tasks.lists need to have the same name as the list that we defined when we parse the String from local storage using JSON.parse.
I mean same name as let lists.
what if want to store the items in a file, so that the information is persistent over different apps and even after clearing browser data?
Is it a good practice to select elements by data attribute instead of class or id?
I generally like to select by something other than class since usually I use classes for my CSS and if I also select my elements in JS by class then whenever I want to change my CSS I have to also change my JS. By using data-attributes instead I can keep my CSS selectors separate from my JS selectors.
what if edit button is added? what will be the code?
I think there is a bug or only my problem. When we delete all list. Then refresh the browser, the app is stopped working.
Brother need help. My data is not saved in local storage I've written the same code and when I call the function saveandrender.. and in browser its still not saving the lists
hello Kyle, I wonder how is it that you're code executes on refresh without calling an even like on DOM Content Loaded.
use live server on vs code google it
hello, you are a excellent coder, i think that some of us need a little of guide about organitation, because usually we let all the work for the last moment. I'm just a student but, i'm begining to work and i don't know how can i organized my life and all my friends in the area has the same problem. Please get us tips. (i'm sorry for my english, i'm learning the lenguage)
Organization and time management are some of the hardest skills to learn in my opinion. One of the things I do to keep myself on track is to use a weekly plan which prioritizes exactly what I want to accomplish on each day of the week. On top of that I use a calendar to keep track of when things need to be complete as well as a reminder for me to do things. Lastly, I use a 6 month/5 year goal system where I set myself goals to achieve for every 6 month period as well as 5 year goals. These help me to prioritize my weekly tasks to hit those longer term goals. If you want to see an example of how I plan my weeks. I have just started posting my weekly plans to my Patreon for everyone to see for free. www.patreon.com/posts/weekly-plan-july-28224824
Why do you use [data-selector] instead of getElementById
Hi,
could you explain why you use data attribute instead of class to select element your js file?
I like to keep my JS selectors separate from my CSS selectors so that I can change my CSS class names without breaking my JS.
@@WebDevSimplified thanks for your answer. This is the first time I've seen someone uses data attributes, therefore I was curious. I'll definitely try it :)
Dude that was fast!!!.. i had to watch at .75 x speed.
Hey, I'm getting stuck at 13:13. The values are not getting entered into the list. Once I press enter, the page is getting refreshed. Can someone please help.
Nice TeamWork.
Hej kevin, I have a question how you run this project?
hi ... question ... how can you make a clone of notion or taskade.com ?
does this code use the concept of linked lists?
Could you do the same app in react?
I noticed at the end of the video 38:54, a bug that I duplicated when i followed along, that the clear completed tasks and delete list buttons move up and disappear. I think it is an issue caused by the lengthening of the of background of the tasks area when adding many lists to the list area. It seems to stretch it down. Is there a way to fix this issue?
I figured it out. Move "background: var(--clr-light);" from ".todo-list" class to ".todo-body" in main.scss. Hope this helps somebody. Also, thanks for the great tutorial
Hey Brandon,
Do you mind sharing your code on Github please?
For me, I'm entering the task but its not visible
@@whitepanth3r Thanks Brandon I was just trying to fix that you helped big time!
@@whitepanth3r God bless you!
Hello, can some please tell me how to up the node serve here it is rasing error to me?
Hi, I'm at 4:51, and I can't seem to render the list.
From where did you learn this coding Please reply me?
Can anyone share full working code. Would be really grateful.
Mine is not showing task once its entered and pressed enter but task remaining is updated.
Damn, I was starting to feel good about my javaScript skills and then I did this tutorial and reality hit me like a truck xd.
I would have to do this one, one more time. Maybe I would memorize something if I'll do it again. I started coding from mid-April, shouldn't I be already familiar with those things? It feels like I keep forgetting stuff.
It is perfectly normal to forget things, especially as you are learning. There are many things that I have to look up every single day since I forget how to do them or the syntax for particular things. Programming is not at all about memorization. It is purely about problem solving. If you just started in April then you have only been programming for a few months, so I would not expect you to know everything, especially since some of the concepts in this tutorial are more advanced. Don't let seeing something you don't understand discourage you. Use it as an excuse to learn the stuff you do not understand.
@@WebDevSimplified Thx man !
At least you have learned how to look up what you need! I aced a C# job interview once because the hiring manager asked me to write some code to do something that I had never done before and I was able to look up how to accomplish it and write working code. I think knowing how to do things off the top of your head is less important than knowing what search queries to use when you get stuck.
How i can storage data on database with mysql
while checking if (selectedListId == null ) for making taskContainer display as null, am getting "false" always (in my if condition) as in my local storage selectedListId's value is stored as 'null' (string). I understand localstorage stores value as string. but why is this working here and not working in my case.. could you please help
i think im getting the same problem unfortunately i just stopped working on it after a while. im able to console log the list id and it is null but for some reason it goes straight to the else statement. i wish we could ask questions rather than have to copy and past to get it to work
Great video I'm working on a To-Do app also. Can you please consider for future videos to use comments.
I don't generally comment my code since I explain it as I talk in the video and writing comments would just make the videos much longer without giving any extra information.
@@WebDevSimplified possibly add comments after the fact when you post to github or codepen? You are pretty descriptive but you do go pretty fast too. just a thought. appreciate the video though
Hi, I am new to programming. Please help me understand this: why did you name the LOCAL_STORAGE_LIST_KEY in all caps? Is this a naming convention?
I googled it, and it seems like a naming convention for fixed values. It tells other developers that the value stores in such variables is never changed. It differentiates values assigned to const that can be chanced.
I keep trying to follow the tutorial, I even tried to grab it off git. But I keep getting an error saying "TypeError: selectedList is undefined" any ideas?
I think this is because in my code I forgot to account for when the user has no selectedLists yet. You should be able to fix this by just creating a list and selecting it.
@@WebDevSimplified thanks for the reply, awesome tutorial.
@@WebDevSimplified i am able to add a new list to the list of lists but selectedListId is not working,please help!!!
I have a bug, and I've cloned the repo and seems it is there as well. If I delete all the lists, close the app and open it - I see the tasks list div with 3 remaining tasks. If I just delete all the lists - all good. Anyone else has it? Any ideas how to fix it?
what exacly return at the end of if statement does in 9:10?
It is the same as doing
if (something) {
return
}
It just lets us exit out of the function early without continuing further.
@@WebDevSimplified thanks for answer. great turtorial I had to watch it twice to completely understood what is happening here ;p
I'm trying to add the ability to edit tasks by double clicking but I can't get it to work.
Can I ask when you have to use e and when you have to use just a normal function?
e is just an argument to the function. You only need to include e when you actually want the event argument. If you are not using e then you do not need to include it.
@@WebDevSimplified Ohhh so eventListener is an event and for it, you need the e? I finally got it.
@@charlesxavier77 I think you confusing the e argument with the type of function. E (some people type out ev or event) is the event (e.g. Click event) that happens on the DOM (the rendered elements).
What you are referring to (without knowing) is wether to use an arrow function or a regular function. There are quite a few videos on arrow functions out there. I'm sure Kyle also has one somewhere.
He could very easily have written
function myFunc(e) { ... }
instead of
const myFunc = e => { ... }
Sorry if it's hard to read. RUclips comments don't support markdown.
listsContainer does not somehow grab the selectedListID even when my code matches letter to letter to your code
i just tried putting an alert in the listsContainer's addEventListener and the alert does pop up but the selected list is not highlighted somehow!..So that means the addEventListener is executing. i am not able to understand where the problem is!!
i want to see the full stack version of this app because you know... from no stack to full stack? i don't mind watching 1 hr long video because i know I am going to learn something new and it would be a cool to add databases in this project, a follow up video perhaps?
I didn't want to add a bunch of bloat to this video since I have many other videos specifically on databases and backend technology. I even have a full course on full stack Node.js with MongoDB in a playlist if that interests you.
kindly also use to store and show on output differrent images for differrent tasks
take images as input when clicking on ( + ) button of my lists
You always explain fast way
Can someone explain the usage of the data attribute in HTML. What makes it useful to use that, and then use querySelector to access that element, instead of selecting by ID or by class?
I understand when it's set to a value, but here it's just being used to select elements.
It is to set the css related things and js code separate so that if css things change the code doesn't break
I get ”undefined tasks remaining” when i try have it count remaining tasks, any idea why?
Did you figured it out? I have the same problem right now.
Edit: Ah, nevermind. I wrote "lenght" instead of "length" :D
Why do all that computation in clearElement() instead of just .innerHTML = ""?
Using just innerHTML = ' ' is not recommended because it doesn’t remove the event handlers of the child nodes.
@@MaksymMinenko Wow - that's a BIG reason.
Thanks for answering. I will definitely avoid innerHTML from now on!
👍
the e.preventDefault() does not work for me, i've been frustrated for the past 5 hours :(((
i figured it out! the 'submit' event listener doesn't work with the input, it only works with the form!
This might be very late but you can move your script file in your HTML downwards to below the last of the . It worked for me!
Bro can you please make a video on how to make a android app using html source codes
Can you make a login part, so that when you login, you can access your own files
yes there are authenticator videos out there
i cannot link css to html file plz help
Sometimes i am receiving this error, but still the app is working : "Uncaught TypeError: Cannot read property 'tasks' of undefined
at renderTasks (todo-script.js:135)
at render (todo-script.js:129)
at todo-script.js:179
renderTasks @ todo-script.js:135
render @ todo-script.js:129
(anonymous) @ todo-script.js:179"
Is your code the same as the code linked in the github?
@@WebDevSimplified yeah. Now i realized that it s happening only when i do not select a list. Does it have sense?
That makes sense. If you have no list selected and it tries to check the tasks of the selected list it will fail. That sounds like a bug with my code.
@@WebDevSimplified Yeah. And do you have any suggestion for debugging? Thank you
@@bogdanmateas255 I have a video on debugging tips you can checkout.
wow, i have a lot to learn still .......
Close your statements with a semicolon.
33:00
28:35