Тёмный

How to Code A Better To-Do List - Tutorial 

Web Dev Simplified
Подписаться 1,6 млн
Просмотров 155 тыс.
50% 1

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: ru-vid.com?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

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

 

16 июл 2019

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 212   
@KevinPowell
@KevinPowell 4 года назад
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 😁
@AnnieTaylorChen
@AnnieTaylorChen 4 года назад
Awesome, definitely subbed :D
@KevinPowell
@KevinPowell 4 года назад
@@AnnieTaylorChen Thanks!
@pieter-venter
@pieter-venter 4 года назад
@@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
@Billy-kd4jh
@Billy-kd4jh 2 года назад
@Pieter Venter I don’t think anyone cares enough about this specific project to go do that
@Coding_Asmr_PraDev
@Coding_Asmr_PraDev 4 года назад
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
@MotiviqueStudio
@MotiviqueStudio 2 года назад
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.
@sahilbani7020
@sahilbani7020 8 месяцев назад
just completed both the videos, extremely thankful to both of you
@zoshida4160
@zoshida4160 3 года назад
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!!
@kostiantynkarzhanov9216
@kostiantynkarzhanov9216 Год назад
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!👍
@pieter-venter
@pieter-venter 4 года назад
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!
@WebDevSimplified
@WebDevSimplified 4 года назад
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.
@nsharma4981
@nsharma4981 3 года назад
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 💝
@adamclasic
@adamclasic 3 года назад
rails, Laravel uses it. but he's still a genius
@nsharma4981
@nsharma4981 3 года назад
@@adamclasic Oh, I'm not familiar with those languages, still a noob. Thanks for letting me know!
@TomkinsOkello
@TomkinsOkello 4 года назад
Was waiting for this tutorial, and the design looks much better. Thank you Kyle.
@WebDevSimplified
@WebDevSimplified 4 года назад
I'm really glad you enjoyed it. Kevin did a great job on the design.
@TomkinsOkello
@TomkinsOkello 4 года назад
@@WebDevSimplified Big thanks to him for the great job.
@brighga33
@brighga33 4 года назад
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!
@WebDevSimplified
@WebDevSimplified 4 года назад
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.
@coffeeandtalk
@coffeeandtalk Год назад
man this was hard on the brain , need to watch this multiple times ig, good value
@shuvajitmohanty9595
@shuvajitmohanty9595 4 года назад
I got notification from both the channels...n confused which one to watch first...n then happy to know both of u have collaborated...
@WebDevSimplified
@WebDevSimplified 4 года назад
It was a ton of fun working with Kevin. He is amazing!
@KevinPowell
@KevinPowell 4 года назад
Haha! Glad that it made the decision of which to watch first easier 😁
@callmeFernie
@callmeFernie 3 года назад
I'm trying, man, but it's hard to get out of tutorial hell when there's someone like Kyle making these tutorials
@callmeFernie
@callmeFernie 3 года назад
@Lil Gravy News i meant that ppl like him explain so well that it's hard to leave tutorial hell 😂
@danisob3633
@danisob3633 2 года назад
@sushi817 lol. "tutorial hell" means not being able to stop watching tutorials, and so not practising all by yourself
@PabloSanchez-zf1lw
@PabloSanchez-zf1lw 3 года назад
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!
@WebDevSimplified
@WebDevSimplified 3 года назад
Thanks. I actually have a 3 way vollaboration coming up in the next month so hopefully you like that as well.
@PabloSanchez-zf1lw
@PabloSanchez-zf1lw 3 года назад
@@WebDevSimplified looking forward to it!
@uncleslo910
@uncleslo910 28 дней назад
Thanks for this amazing tutorial.
@topsportscoverage9257
@topsportscoverage9257 2 года назад
Thanks man, another great tutorial!
@colinzhou9560
@colinzhou9560 3 года назад
Thanks for this great collaboration!
@oluwatobifalola387
@oluwatobifalola387 4 года назад
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.
@MrWrklez
@MrWrklez 3 года назад
Great tutorial, thanks!
@LorenHelgeson
@LorenHelgeson 4 года назад
Fantastic tutorial. Lots of new stuff to unpack here.
@WebDevSimplified
@WebDevSimplified 4 года назад
Thank you! I really hope you learn something new from it.
@santiagopabloortiz6322
@santiagopabloortiz6322 2 года назад
Amazing! Thanks for putting this content out
@Iwtfgege
@Iwtfgege 4 года назад
this is awesome! looking forward to more colabs with Kevin! :)
@WebDevSimplified
@WebDevSimplified 4 года назад
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.
@KevinPowell
@KevinPowell 4 года назад
It was a ton of fun, and I'd love to do more in the future!
@meandraccoon
@meandraccoon 3 года назад
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?
@dieuvu1668
@dieuvu1668 2 года назад
Thanks for this great tutorial 👏👏
@osikemhekhaigodsfavourbrun2645
@osikemhekhaigodsfavourbrun2645 4 года назад
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
@WebDevSimplified
@WebDevSimplified 4 года назад
I'm really glad I could help!
@osikemhekhaigodsfavourbrun2645
@osikemhekhaigodsfavourbrun2645 4 года назад
@@WebDevSimplified I love you and may God bless you with many more blessings and knowledge in Jesus Christ Name!
@th35kyb0y7
@th35kyb0y7 3 года назад
love the way you code.
@fluntimes
@fluntimes 4 года назад
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!
@ManishKarki
@ManishKarki 4 года назад
Sweet! Gonna watch both videos now. Thanks
@WebDevSimplified
@WebDevSimplified 4 года назад
You're welcome! I really hope you enjoy them both.
@ManishKarki
@ManishKarki 4 года назад
@@WebDevSimplified I will!
@join_devhub
@join_devhub 2 года назад
You are just an amazing person mate!
@deveren
@deveren Год назад
thank you guys so much!
@pieter-venter
@pieter-venter 4 года назад
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
@WebDevSimplified
@WebDevSimplified 4 года назад
Such a good point. I cannot believe I forgot that 🤦‍♂️
@yadneshkhode3091
@yadneshkhode3091 3 года назад
can you send code please
@trieuthuan8995
@trieuthuan8995 4 года назад
Thanks Web Dev Simplified
@jacobanderson10
@jacobanderson10 4 года назад
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.
@WebDevSimplified
@WebDevSimplified 4 года назад
I appreciate the feedback. This is something I have actively tried to improve in my newer videos.
@imagineabout4153
@imagineabout4153 4 года назад
Dear boi, do you realize that trought theese videos you are changing people's life, mine included? I LOVE YOU
@matthewreid1580
@matthewreid1580 Год назад
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!
@topellasrinivasarao1125
@topellasrinivasarao1125 4 года назад
Someday I wish I could have his brain.
@JayRGabz
@JayRGabz 4 года назад
so fast.. so amazing.. i have subscribed
@WebDevSimplified
@WebDevSimplified 4 года назад
Thanks! I'm glad you enjoyed it.
@talkwithibrahimsan3488
@talkwithibrahimsan3488 2 года назад
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.
@kimshares1487
@kimshares1487 3 года назад
Thanks bro! I have like subscribbbbbbbed!! Great Tutorial!!
@dotsona07
@dotsona07 4 года назад
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)
@WebDevSimplified
@WebDevSimplified 4 года назад
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.
@HayeulTanjibRupok
@HayeulTanjibRupok 2 года назад
Thanks Man
@thoinguyen750
@thoinguyen750 4 года назад
This is awesome.Thanks you somuch.Hope u will create series about some small project in Angular
@WebDevSimplified
@WebDevSimplified 4 года назад
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.
@bikramchettri9405
@bikramchettri9405 4 года назад
Thank you both.
@WebDevSimplified
@WebDevSimplified 4 года назад
You're welcome!
@KevinPowell
@KevinPowell 4 года назад
Glad you enjoyed it!
@3MILFOR3VER
@3MILFOR3VER Год назад
You're the goat bro 🐐
@NoudvD63
@NoudvD63 4 года назад
Great tutorial, and at the same time set a new Olympic record at 39:15 for fastest tutorial ever! I need a drink now.
@vedantsingh6966
@vedantsingh6966 3 года назад
Dude that was fast!!!.. i had to watch at .75 x speed.
@cyunkM
@cyunkM 3 года назад
Hi, I want to ask whether all the checklist that has been created can be saved to the database?
@akshay__sood
@akshay__sood 4 года назад
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.
@avneet12284
@avneet12284 4 года назад
Awesomeness. WOW !
@WebDevSimplified
@WebDevSimplified 4 года назад
I'm glad you enjoyed it!
@avneet12284
@avneet12284 4 года назад
@@WebDevSimplified you are an inspiration dude
@dayanafulla3125
@dayanafulla3125 4 года назад
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)
@WebDevSimplified
@WebDevSimplified 4 года назад
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
@optimusprime699
@optimusprime699 4 года назад
is it possible to limit who can edit or create lists and tasks? How can I stop a viewer editing the list and task?
@sam_leishman
@sam_leishman 3 года назад
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?
@dmxd
@dmxd 4 года назад
Is it a good practice to select elements by data attribute instead of class or id?
@WebDevSimplified
@WebDevSimplified 4 года назад
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.
@kidpesto
@kidpesto 2 года назад
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?
@nahidemdad5887
@nahidemdad5887 3 года назад
Nice TeamWork.
@michaelwautier4113
@michaelwautier4113 3 года назад
Thanks for the great tutorial ! Is it possible to store the list of tasks in a separate JSON file instead of inside the browser ?
@dannyinformal
@dannyinformal 2 года назад
@Computer Queen how would you do this?
@wojciechwinnicki9714
@wojciechwinnicki9714 4 года назад
Hi, could you explain why you use data attribute instead of class to select element your js file?
@WebDevSimplified
@WebDevSimplified 4 года назад
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.
@wojciechwinnicki9714
@wojciechwinnicki9714 4 года назад
@@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 :)
@bk._550
@bk._550 3 года назад
Why do you use [data-selector] instead of getElementById
@dannyinformal
@dannyinformal 2 года назад
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?
@jamesloterina1792
@jamesloterina1792 3 года назад
what if edit button is added? what will be the code?
@charlesxavier77
@charlesxavier77 4 года назад
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.
@WebDevSimplified
@WebDevSimplified 4 года назад
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.
@charlesxavier77
@charlesxavier77 4 года назад
@@WebDevSimplified Thx man !
@IreneSmith
@IreneSmith 4 года назад
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.
@Sifu26
@Sifu26 4 года назад
hello Kyle, I wonder how is it that you're code executes on refresh without calling an even like on DOM Content Loaded.
@yadneshkhode3091
@yadneshkhode3091 3 года назад
use live server on vs code google it
@tanvirchowdhury1451
@tanvirchowdhury1451 3 года назад
I think there is a bug or only my problem. When we delete all list. Then refresh the browser, the app is stopped working.
@krishnanarasimha1243
@krishnanarasimha1243 2 года назад
Hej kevin, I have a question how you run this project?
@rizkallahsalloum
@rizkallahsalloum 4 года назад
Great video I'm working on a To-Do app also. Can you please consider for future videos to use comments.
@WebDevSimplified
@WebDevSimplified 4 года назад
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.
@nathancornwell1455
@nathancornwell1455 4 года назад
@@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
@topellasrinivasarao1125
@topellasrinivasarao1125 4 года назад
From where did you learn this coding Please reply me?
@sahilarora7186
@sahilarora7186 3 года назад
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
@K-IT-SubhanshiRawat
@K-IT-SubhanshiRawat 3 года назад
does this code use the concept of linked lists?
@lightningresaba146
@lightningresaba146 4 года назад
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?
@WebDevSimplified
@WebDevSimplified 4 года назад
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.
@b0red7
@b0red7 3 года назад
hi ... question ... how can you make a clone of notion or taskade.com ?
@juhiyaafreen2422
@juhiyaafreen2422 4 года назад
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.
@xXHelsingGamingXx
@xXHelsingGamingXx 3 года назад
Could you do the same app in react?
@xl8134
@xl8134 2 года назад
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?
@xl8134
@xl8134 2 года назад
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.
@krishnanarasimha1243
@krishnanarasimha1243 2 года назад
Hello, can some please tell me how to up the node serve here it is rasing error to me?
@perfectlearners2052
@perfectlearners2052 Год назад
kindly also use to store and show on output differrent images for differrent tasks
@perfectlearners2052
@perfectlearners2052 Год назад
take images as input when clicking on ( + ) button of my lists
@charlesxavier77
@charlesxavier77 4 года назад
Can I ask when you have to use e and when you have to use just a normal function?
@WebDevSimplified
@WebDevSimplified 4 года назад
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.
@charlesxavier77
@charlesxavier77 4 года назад
@@WebDevSimplified Ohhh so eventListener is an event and for it, you need the e? I finally got it.
@pieter-venter
@pieter-venter 4 года назад
@@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. RU-vid comments don't support markdown.
@whitepanth3r
@whitepanth3r 4 года назад
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?
@whitepanth3r
@whitepanth3r 4 года назад
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
@news_daily_live
@news_daily_live 4 года назад
Hey Brandon, Do you mind sharing your code on Github please? For me, I'm entering the task but its not visible
@meganallred1915
@meganallred1915 4 года назад
@@whitepanth3r Thanks Brandon I was just trying to fix that you helped big time!
@ms77grz
@ms77grz 3 года назад
@@whitepanth3r God bless you!
@PreethiSastry
@PreethiSastry 4 года назад
Hi, I'm at 4:51, and I can't seem to render the list.
@mausumimdas9372
@mausumimdas9372 Год назад
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
@shivaxxx2147
@shivaxxx2147 Год назад
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
@news_daily_live
@news_daily_live 4 года назад
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.
@moussaabdillahi9652
@moussaabdillahi9652 4 года назад
You always explain fast way
@Sahee122
@Sahee122 4 года назад
what exacly return at the end of if statement does in 9:10?
@WebDevSimplified
@WebDevSimplified 4 года назад
It is the same as doing if (something) { return } It just lets us exit out of the function early without continuing further.
@Sahee122
@Sahee122 4 года назад
@@WebDevSimplified thanks for answer. great turtorial I had to watch it twice to completely understood what is happening here ;p
@Kevin-yx2mv
@Kevin-yx2mv 3 года назад
How i can storage data on database with mysql
@alinamarasca2
@alinamarasca2 2 года назад
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?
@trueblue2714
@trueblue2714 2 года назад
I'm trying to add the ability to edit tasks by double clicking but I can't get it to work.
@squeige
@squeige 4 года назад
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?
@WebDevSimplified
@WebDevSimplified 4 года назад
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.
@squeige
@squeige 4 года назад
@@WebDevSimplified thanks for the reply, awesome tutorial.
@vinikett9114
@vinikett9114 4 года назад
@@WebDevSimplified i am able to add a new list to the list of lists but selectedListId is not working,please help!!!
@harjitkainth8525
@harjitkainth8525 2 года назад
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?
@harjitkainth8525
@harjitkainth8525 2 года назад
I understand when it's set to a value, but here it's just being used to select elements.
@mausumimdas9372
@mausumimdas9372 Год назад
It is to set the css related things and js code separate so that if css things change the code doesn't break
@pakoti96
@pakoti96 3 года назад
Why do all that computation in clearElement() instead of just .innerHTML = ""?
@MaksymMinenko
@MaksymMinenko 3 года назад
Using just innerHTML = ' ' is not recommended because it doesn’t remove the event handlers of the child nodes.
@pakoti96
@pakoti96 3 года назад
@@MaksymMinenko Wow - that's a BIG reason. Thanks for answering. I will definitely avoid innerHTML from now on!
@mr.professional8945
@mr.professional8945 4 года назад
Bro can you please make a video on how to make a android app using html source codes
@joabutt
@joabutt 2 года назад
Can you make a login part, so that when you login, you can access your own files
@eurus7539
@eurus7539 2 года назад
yes there are authenticator videos out there
@vinikett9114
@vinikett9114 4 года назад
listsContainer does not somehow grab the selectedListID even when my code matches letter to letter to your code
@vinikett9114
@vinikett9114 4 года назад
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!!
@sandoxs
@sandoxs 4 года назад
For non-english native people I think it would be better to watch this video at playback speed 0.75
@nathancornwell1455
@nathancornwell1455 4 года назад
wow, i have a lot to learn still .......
@jamilamahamed2602
@jamilamahamed2602 2 года назад
are you allergic to semi-colons how come you dont use them
@bogdanmateas255
@bogdanmateas255 4 года назад
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"
@WebDevSimplified
@WebDevSimplified 4 года назад
Is your code the same as the code linked in the github?
@bogdanmateas255
@bogdanmateas255 4 года назад
​@@WebDevSimplified yeah. Now i realized that it s happening only when i do not select a list. Does it have sense?
@WebDevSimplified
@WebDevSimplified 4 года назад
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.
@bogdanmateas255
@bogdanmateas255 4 года назад
@@WebDevSimplified Yeah. And do you have any suggestion for debugging? Thank you
@WebDevSimplified
@WebDevSimplified 4 года назад
@@bogdanmateas255 I have a video on debugging tips you can checkout.
@ThePuskas19
@ThePuskas19 Год назад
I get ”undefined tasks remaining” when i try have it count remaining tasks, any idea why?
@Unurinen
@Unurinen 7 месяцев назад
Did you figured it out? I have the same problem right now. Edit: Ah, nevermind. I wrote "lenght" instead of "length" :D
@frannyglass61
@frannyglass61 4 года назад
the e.preventDefault() does not work for me, i've been frustrated for the past 5 hours :(((
@frannyglass61
@frannyglass61 4 года назад
i figured it out! the 'submit' event listener doesn't work with the input, it only works with the form!
@derricktay1538
@derricktay1538 3 года назад
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!
@kunnargrupp3948
@kunnargrupp3948 4 года назад
Close your statements with a semicolon.
@femaledeer
@femaledeer 4 года назад
Perhaps down the road, you could make a tutorial on displaying a list of news articles (www.fool.com/investing-news/?page=1) or videos (youtube.com) where a number of articles headlines /videos are shown initially and then as you scroll down, additional article headlines are automatically displayed or has a button on the bottom to "show more"
@WebDevSimplified
@WebDevSimplified 4 года назад
That is a good idea. Thanks!
@JayRGabz
@JayRGabz 4 года назад
nice hair man
@WebDevSimplified
@WebDevSimplified 4 года назад
Thanks
Далее
How To Build A Simple Card Game With JavaScript
43:04
Просмотров 151 тыс.
Build a To-Do List in 20 MINUTES with JavaScript
22:29
Build A Password Generator With JavaScript - Tutorial
27:53
Learn DOM Manipulation In 18 Minutes
18:37
Просмотров 1 млн
Odin Project: Restaurant Page & To-Do List
22:12
Просмотров 5 тыс.
Learn CSS transformations in 9 minutes! 🔄
9:01
Просмотров 16 тыс.
ASMR Programming - Build a Todo List App - No Talking
26:05
Build A Speed Typing Game With JavaScript - Tutorial
26:36