Beginner Vanilla Javascript Project Tutorial

No video

Beginner Vanilla Javascript Project Tutorial

Рет қаралды 899,577

Күн бұрын

Get The Full Javascript Course Here!
developedbyed....
In this episode we are going to cover a small project of the full Creative Javascript Course, a todo list in vanilla js.
We are going to put together all the fundamental javascript techniques including local storage.
Check out the javascript course in the link above to create more complex javascript projects and understand complex topics.
🎁Support me on Patreon for exclusive episodes, discord and more!
/ dev_ed
🛴 Follow me on:
Twitch: / developedbyed
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/dev...
Microphones I Use
Audio-Technica AT2020 - geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - geni.us/AcbCpd9 (Amazon)
Camera Gear
Fujifilm X-T3 - geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - geni.us/sztaN (Amazon)
PC Specs
Kingston SQ500S37/480G 480GB - geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - geni.us/YAtI (Amazon)
DeepCool ATX Mid Tower - geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - geni.us/bilekX (Amazon)
Logitech G305 - geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - geni.us/YBsCVX0 (Amazon)
DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
#programming #javascript

Пікірлер: 1 800

@briandesign 4 жыл бұрын

Dope! Already got in the course and built a few of the projects

@jamesfowler6343 4 жыл бұрын

How are you finding the course ?

@user-vk4pk7pd4v 4 жыл бұрын

The link is in the video's description.

@justClip_GossipGal 4 жыл бұрын

this course is not available to free.

@ricardosilva-bp7un 4 жыл бұрын

@@justClip_GossipGal No

@hammadhassanhashmi 4 жыл бұрын

@@justClip_GossipGal Bro can you share this course with me?

@developedbyed 4 жыл бұрын

Thanks for everyone who joined The Creative Javascript Course!

@giiipfel 4 жыл бұрын

Thank you for making this courses, you are the best!

@journey_to_100 4 жыл бұрын

Thanks

@dadan.dahman.w 4 жыл бұрын

Luar biasa

@thorwd 4 жыл бұрын

I'm really enjoying your course, even for an intermediate JS developer, I did learn new things 😃

@nocode659 4 жыл бұрын

PLEASE UPLOAD COURSE IN UDEMY, MANY WILL ENROLL PLS

@tonybalde4298 2 жыл бұрын

The fact that he makes mistakes, identifies them and explains how to solve them, makes this video more incredible!

@sabertoothwallaby2937 Жыл бұрын

Exclamation points

@naidenmatyas925 4 жыл бұрын

man, you're great!even if you sayd that you're not gonna give the course for free you're still posting some of you're hard work for free!keep the hard work

@kachisideo6001 4 жыл бұрын

So true

@LuBre 4 жыл бұрын

"That's not a fart, that's the chair" *Subscribed*

@elyordoniyor4061 4 жыл бұрын

"Ok"

@shawnbeans7389 3 жыл бұрын

hahha

@drakecoleman9364 3 жыл бұрын

same lmao

@iamtharunraj 2 ай бұрын

lmao 😂 I'm laughing even after 4 years

@ghoulishwargamer 4 жыл бұрын

Another way you could save the items into local storage is saving them as objects, along with the status i.e, {'text': 'todoText', 'status': 'complete'}. With some additional work you can then save the state of each todo item and set the necessary styling when refreshing the page. Great tutorial!

@michaelvigato3228 4 жыл бұрын

It would be very cool to see a follow up to this tutorial in which you show how to save stuff on firebase, instead of local storage :)

@cansatc5873 3 жыл бұрын

If you're getting the cannot read/set display or contains error for the filterTodo function after the 54th minute, you can change the code as follows: function filterTodo(e) { const todos = todoList.childNodes; todos.forEach(function (todo) { const mStyle = todo.style; if(mStyle != undefined && mStyle != null){ switch (e.target.value) { case "all": mStyle.display = "flex"; break; case "completed": if (todo.classList.contains('completed')) { mStyle.display = 'flex'; } else { mStyle.display = "none"; } break; case "uncompleted": if (todo.classList.contains('completed')){ mStyle.display = 'none'; } else{ mStyle.display = "flex"; } break; } } }) } Although I struggled for a long time, I could not solve this problem and my developer friend offered this solution. Thank you again here.

@bearchemist2286 3 жыл бұрын

Thank you for this so much. Can you explain why this fixes the issue? To me this just looks like a check to see if todo.style is undefined and if not, continues to the switch.

@ponderingPenguin02 2 жыл бұрын

Thank you for saving me loads of head ache :)

@gamalabdu8374 2 жыл бұрын

Thank you! I spent an hour trying to figure out why my code was exactly what he typed but didn't work. Do you know why this was an issue? I didn't have an issue until then.

@zakur0hako 2 жыл бұрын

thanks a lot. now somebody needs to find the reason why it works like this

@MuhammadJaved-bb4cx 2 жыл бұрын

Thanks! your method works.

@yakimura96 4 жыл бұрын

I bought the course, but I am very proud of you sharing this project, knowledge for everyone.

@jamesfowler6343 4 жыл бұрын

Tony can I ask how you are finding the course ?

@yakimura96 4 жыл бұрын

@@jamesfowler6343 I haven't finished the course yet

@umeraftab6494 4 жыл бұрын

can you share project :( i cant buy man :( very poor but love to learn if you can i will be glad :( umeraftab4422@gmail.com

@tshaylatte9502 4 жыл бұрын

I like the fact you make errors and show how to search for them 👍🏾

@arwahsapi 4 жыл бұрын

Pandemic ends. Everyone turns programmer.

@damyandimitrov611 4 жыл бұрын

if (turns === 'knowing much more than before') { jobAfterCovid = true; }

@tomisinergy4963 4 жыл бұрын

Dont judgement by the comments, likes and wives on youtube

@patriceammah1117 4 жыл бұрын

Damyan Dimitrov hahahahaha

@amongdoomers9464 4 жыл бұрын

🤣🤣🤣Possibly

@howtocutatreewithaherring82 4 жыл бұрын

Do you think it's a joke? Be prepared for when this COVID ends the competition in this field is getting barbaric!

@techcanyon411 4 жыл бұрын

It is a blessing and a thing of joy to meets someone who want you to grow.

@ShadowHeroo 4 жыл бұрын

I already know some JavaScript, but I bought this course to skill myself up. So far this course is awesome and worth the money. You nice, keep going my gorgeous teacher :))))))

@mdshahab8507 4 жыл бұрын

JS code is not wroking in my sublime 3.2.2, please help

@AbbasAli-ep3kb 4 жыл бұрын

bro can you plz give me this course that you bought I'll be thankful for this favor

@vietanhhoang2642 3 жыл бұрын

bạn có thể chia sẻ cho tôi được không

@duplicpapers8753 3 жыл бұрын

@@mdshahab8507 sublime is better for stuff like HTML and css try VS code :D

@emarroqu100 3 жыл бұрын

To DevEd: Thank you, mon ami. Your tutorials are awesome. Learning a lot from you. JS is new to me as I come from legacy/mainframe development. To: Byron Jones: Thank you, brother. Your alternate approach to solve ["cant read property contains of undefined"] works well. I spent a couple of hours troubleshooting on my own w/o success.

@tanvirashraf728 4 жыл бұрын

Beother Ed i was confused about whether i am gorgeous or not , but you have cleared my confusion....

@alisher8289 3 жыл бұрын

Oh damm really

@duplicpapers8753 3 жыл бұрын

Same

@dipokchandra264 2 жыл бұрын

I just found a brand new tutorial in skillshare about the "Complete and Creative Javascript Course." That's the great tutorial I have seen ever. I am in class 23. Thank you so much, man! You are great.

@sambathadev 4 жыл бұрын

Yeeeeeeeee another one from my fav developer.... Love from the smallest country in West Africa, The Gambia

@sunnydivino 2 жыл бұрын

Thank you so much, Ed! I learned a lot from this video. I got stuck by the minute 48 when toggling the completed to-dos, for a reason the children in the nod list were undefined. After hours of checking my code line by line, I solved it by replacing my HTML body with the one from your repo. Although it was the very same code, except for one space between the footer and the script tag. Didn't know what could have been wrong with mine. Great video!!! I enjoyed it so much.

@thecoderguy2566 2 жыл бұрын

yes , right , I too got there stuck , and after formatting it , the code worked perfectly fine , I had to console log again and again and got white space as well , but it is not clearly mention that why this issue happened , for anyone facing this problem can select all and press shift + alt + f , in short : " ctrl + a " and then " shift + alt + f " do check if it works

@domenicocucinotta2720 3 жыл бұрын

Thanks Ed for your time and for this fantastic tutorial! I have learned tons! The last part (local storage bit) was quite tricky for me as beginner so I had to go through it multiple times! Cheers!

@sergiorejtman 3 жыл бұрын

Hey guys, there is a small LOGIC GAP here, if you set the filter to "uncompleted" and check a new item, that item will not hide immediately, as it should. The fix is simple: Inside function filterTodo(), instead of doing switch(e.target.value) you should do switch(filterOption.value). That will allow function filterTodo() to be called anytime, not only inside the 'click' event. Then you just add filterTodo(); as the last line inside the block "if (item.classList[0] === 'complete-btn')" inside function deleteCheck(). That will call funtion filterTodo() right after the item is checked, updating the screen!

@GamestarsBulgaria 2 жыл бұрын

doesnt work :(

@zyx138 2 жыл бұрын

thank you so much!!

@anjanipriyanka7575 Жыл бұрын

😇thanks

@utsavkashichhwa Жыл бұрын

There is still another problem. When you set filter to 'complete' then add a new item, the item will not hide immediately. The first thing is to modify the filterTodo() function, like mentioned above, so it can be used without the event argument. Then make sure to call the filter funtion when you change the filter, add a new todo, or change the state of a todo by adding event listeners to the relevent elements: [filterOption, todoButton, todoList].forEach((element) => element.addEventListener('click', filterTodos));.

@danielmbirch Жыл бұрын

This works great, thank you. The only issue I'm having is the select field only actions the second time you click it. Click once to get the drop down, select an item (nothing happens yet) but click on the select element again and the selection you previously made actions. Anyone have any ideas? My code is the same as the tutorial, checked many times over, I'm thinking since this tutorial was made 2+ years ago, there have been browser or JS changes which is causing this??

@journey_to_100 4 жыл бұрын

Was going to start TODO list before 7hours .. but i saw your new video is up and luckily it was todo list.. i am gonna start right now.. i love your sense of humour 😂😂.. keep going broo.. ❤ From INDIA

@flatlinejimbob 3 жыл бұрын

Currently studying web development and my local government institute of learning, this has been way more engaging and easy to follow than anything they have thrown at us this year. Thank you! I have signed up for the course :D

@JohnyFretka 3 жыл бұрын

When selecting 'all', 'completed' or 'uncompleted' I found that click event in filterOption eventlistener works only in Firefox for me. To make it work in Chrome as well I needed to put 'change' instead of 'click'.

@JordanKimsey 3 жыл бұрын

Thank you so much! I was going crazy trying to figure out why it was behaving like this.

@diegofernandez6082 3 жыл бұрын

Thank you man, i was wondering if it was just me lol

@khaledlakehal5450 3 жыл бұрын

😳Thank you

@chonka_poodge 3 жыл бұрын

thanks worked for me!!

@nefeles5615 3 жыл бұрын

Thank you so so much!!! I spent a whole hour checking the code over and over to see what was wrong.

@michaelhajny783 4 жыл бұрын

I appreciate your attention to make everything clear enough and also that you teach us something about what are you actually do console and vs code. I realy like contents that you produce. It is a clear understandable and also funny. THANK YOU a lot.

@Anderzon1994 4 жыл бұрын

Hey Ed ! Thanks for sharing your knowledge man. I'm learning a lot of things with your videos. Your explanations are amazing and I have fun watching your videos! Most of the JS that I know it's because of you bro I love you man, thanks for everything.

@antipusrises 3 жыл бұрын

I love how you leave in the "why is this happening???" moments. It shows good problem solving strategies.

@CarlosGoncalves-mb9cy 4 жыл бұрын

Amazing tutorial, thanks man the way you explain makes everything so clear.

@joshterryplays 4 жыл бұрын

This was great. Thank you. I went through the whole thing with you on my own editor. Really appreciate it.

@mattyxow 3 жыл бұрын

Something: **doesn't work** Him: **visible panic** Something: **doesn't work** Me: ah shit, here we go again

@melania239 2 жыл бұрын

this is really the best begginers Javascript course on the whole KZfaq. Ill buy the course :)

@BasedGob 3 жыл бұрын

In the filtering part, for some reason my todoList.childNodes contained an extra "text" node in addition to the various divs representing todo items. This was causing it to break so I added an additional if statement to filter those out: todos.forEach(function(todo) { if (todo.nodeType == Node.ELEMENT_NODE) { switch(e.target.value) { ...

@klaudiaa483 3 жыл бұрын

I had the same problem. Now that I've added the line of code you've written it works. Thanks for sharing! :)

@curtishenley3538 2 жыл бұрын

Thank you!!! I was debugging for soooo long.

@frmcf Жыл бұрын

Thank you! I had the same problem, and almost got to the same solution as you, I was just missing the '.nodeType'!!!

@dr.rishitulsian2377 3 жыл бұрын

This video is so helpful and I am so much enjoy this video. Thanks for this so much interesting project.

@alicemorgan9424 2 жыл бұрын

For those who can't do the filter function at 53:34 Here is the code ```HTML Code DS Todo List All Completed Uncompleted ```JS Code filterOption.addEventListener('click', filterTodo); function filterTodo(e) { const todos = todoList.childNodes; todos.forEach(function(todo) { if (todo.nodeType == Node.ELEMENT_NODE) { switch(e.target.value) { case "all": todo.style.display = "flex"; break; case "completed": if (todo.classList.contains('completed')) { todo.style.display = 'flex'; } else { todo.style.display = "none"; } break; case "uncompleted": if (todo.classList.contains('completed')){ todo.style.display = 'none'; } else{ todo.style.display = "flex"; } break; } } }) } Possible errors on your side: 1) The space in can cause error. Remove the space between the and 2) For filterOption.addEventListener('click', filterTodo); some said changing from 'click' to 'input' or 'change' helps. Click works just fine for me tho. 3) Add extra code to your function filterTodo(e), add this : if (todo.nodeType == Node.ELEMENT_NODE) { full code is as shown as above. If above method does not work, could be just a type error. Try copy and paste my code and see if it works. Hope this helps. Happy Coding guys =)

@rawforlife_ 2 жыл бұрын

you are a life saver Alice! this is literally my first js project. if you may, would you explain why adding the line if (todo.nodeType == Node.ELEMENT_NODE) makes the difference? it was not working for me without this line and the console said there was a type error

@developpement8000 2 жыл бұрын

thanks

@scottonanski4173 Жыл бұрын

Was totally the space in the that I had. I wouldn't been able to catch that in a million years.

@yr4753 Жыл бұрын

Your possible errors point 2) is a great help i just change 'click' to 'input' and now my list is working fine. Thx

@SerhiiParkhomenkoFingerstyle Жыл бұрын

Thank you! You saved my nerves! In my case it was space between tags. But why??? I don't get it...

@mikelesterconstantinovinoy5807 3 жыл бұрын

You are unleashing my talent! Thank youuu Sir. Your fan here from the Philippines

@SmeSSS 4 жыл бұрын

Thank you for this small little project Ed. Much appreciated!

@ujjwal5051 2 жыл бұрын

Honestly he's my fav tech youtuber out there. Half the people out there teaching like robots. This is something different and better.

@shivani9840 2 жыл бұрын

Hey Ujjwal! Have you ever taken the help of any tutorial to do a project? Would you be interested exploring opportunities in web development?

@GaLaVrAmOv 4 жыл бұрын

Hey, awesome video, But I also wanna talk about a little problem that I saw. At 1:10:33 you're deleting a "todo" element by looking for it by the element text, and if you'd have the same element twice then it's gonna remove the very first element. My solution for that is to delete a text from the todos array by the index of the element, which is supposed to be with the same index in the todos array, just like that: const todoIndex = Array.from(todosList.childNodes).indexOf(todo); todos.splice(todoIndex, 1); And now, even if you had the same text in the todos list, it would delete the specific todo element that you have clicked on.

@markokafor7432 4 жыл бұрын

or simply add an id to each todo an then use the filter() to remove it would have been easier

@spectruum 4 жыл бұрын

Or realistically why would you add the same task twice

@GaLaVrAmOv 4 жыл бұрын

I don't know, maybe you'd want to go to the gym twice a day

@stevieholland3579 2 жыл бұрын

@@markokafor7432 This makes sense to me. Curious, would I also use this to somehow get it to save the line through when I refresh, or is that harder to do? Sorry if this sounds dumb. I don't have much experience

@markokafor7432 2 жыл бұрын

@@stevieholland3579 the only way to save it so it doesn’t disappear when you refresh is to either save it to local storage or implement a database. If you are not saving it anywhere then it’ll disappear when you refresh

@zrebec 2 жыл бұрын

Absolutly best vide which learned me lot of things. But anyway.... I have some improvements of application. But the problem is, that you compare value of "li" element with the actual "todo" when you're getting indexOf if you're removing todo from totos (splice of array). The problem is when you have 2 todo's with the same name. Probably ID or data-label can resolve this problem. data-label could be UUID or just some ID. But, really hard work and very good course. Thanks a lot

@nehakumar9889 4 жыл бұрын

Thank you so much Ed Sir ❤ I actually don't have enough pocket money left and due to ny degree expenses and other stuffs.My parents won't be able to give me extra bucks for online courses. Thanksss a lott for putting this online :) for free.... I wish majority of the learners enroll into this course because you're awesome professor Ed :)

@MohamedAli-gs9ug 3 жыл бұрын

Thus application is very hard

@_aguskhaer 4 жыл бұрын

In the beginning of this video, i've got entertained while i'm super dizzy to start learning javascript. Thanks for this entertaining + educating video, you're awesome!

@parsa6043 4 жыл бұрын

I'll wear some shades next time, when I build a todo list for the 1000th time

@namoudnormand3048 4 жыл бұрын

😂😂😂😂😂😂😂😂

@modestpelicanprogramming6370 4 жыл бұрын

boomers be like HAHAHHAKHSAGsipdgu:owefinhwnjl;

@duplicpapers8753 3 жыл бұрын

@@modestpelicanprogramming6370 you: 👦

@tariqbailey8943 3 жыл бұрын

Great Course!! i enjoyed it. For those who may have issues with the "click" event for choosing All, Completed or Incomplete. This may require a "change" rather than "click". Some think of this as a keyboard event rather than a mouse event. So you may get a little buggy on using "click".

@frmcf Жыл бұрын

Yaaaassss! Thanks Tariq

@mohamedmidou3494 4 жыл бұрын

Thank you so much this Tutorial really helped me practicing my JS knowledge ♥

@sowmyarr5705 3 жыл бұрын

Where you learnt js

@jkovert 4 жыл бұрын

Hint/tip: make sure there are no white spaces in the . That will mess up the childNode thingy.

@RyanMcGuinne55 4 жыл бұрын

This caught me out, thanks for the suggestion, it fixed the errors I was getting!

@jkovert 4 жыл бұрын

:) I Stared at the code for like an hour, and then I was like "duh" LOL

@RyanMcGuinne55 4 жыл бұрын

@@jkovert Glad you shared your finding, it saved me a lot of head scratching

@gookanga 4 жыл бұрын

Ed and De Gea look so much alike, especially when he put those glasses on.

@fhkodama 3 жыл бұрын

Ed, thank you very much! My first project. It was incredible to organize my thoughts on how to use HTML, CSS, and JS, all together! :) Perfect!

@mikebrown8239 4 жыл бұрын

Thank you so much for this. I appreciate you giving some of your paid courses for free. Keep up the good work! You're AWESOME!!!

@jayakumar9976 2 жыл бұрын

Greats difference between this channel compared to others, is He actually debug the problem. most of the other youtuber don't. but for new student who is just learning to code it is really important to know where are the mistake are going to happen and how to rectify it.

@nitishroat 3 жыл бұрын

2:47 START

@Agustin-jo8mv 3 жыл бұрын

hahahahaha. I was like for fuck sakes, when is the video starting. lolololollolololololol. It's a free lesson though no complaints. Just funny though. haha

@riku2837 4 жыл бұрын

thanks, you're amazing, clean english, i'm a non english native and was not hard to understand what you speak, and this is rare to me, i don't understand anything when someone speak.

@maayanzakuta5328 Жыл бұрын

If you're getting the cannot read/set display or contains error for the filterTodo function after the 54th minute it's bc you have to check if the starting "ul" and the closing "ul" in line 30 of the index IS IN THE SAME LINE and that the closing ul is not a line below bc if it is it'll take "text" as first child and mess up the childNodes which is why u get this error.

@tanmay6207 Жыл бұрын

was stuck at this! :') Thanks a lot

@diamondsinyoureyes Жыл бұрын

omg thank youuuu. I was up to the filter option and nothing was changing when changing the select dropdown. I went through the video again and again! adding into my html made everything work properly. Never would have found this without your comment!

@aviraljain8785 Жыл бұрын

great eye u got. Thanks !

@doniyorabduvokhidov1706 4 жыл бұрын

Tons of thanks , I just intended to learn Vanilla JS but I also learnt CSS, it was incredible

@muhammadans7071 4 жыл бұрын

i am facing problem in filtration and also display property can't set todo.style.display = "flex"; Uncaught TypeError: Cannot set property 'display' of undefined

@arpantimsina1805 4 жыл бұрын

for the people that are getting the error of ["cant read property contains of undefined"] you have to check if you left space in the tag and because of that when you get the list of nodes you always get a "Text" node with no class and that causes the problem.

@andyjohn907 4 жыл бұрын

@@arpantimsina1805 thanks was having same problem

@youssefbaaziz3673 3 жыл бұрын

@@arpantimsina1805 thankssssss

@rain-techstudio2567 2 жыл бұрын

@@arpantimsina1805 wow you Rock!

@jonathankibet9750 Жыл бұрын

its amazing how you can squeeze so much content into an hour of video. Nice stuff man .Found my GRIT again!!

@flaviusmiron4041 3 жыл бұрын

"EH, why u do this to me" lmaoo 49:12

@atifaslam2965 3 жыл бұрын

gorgeous brother, you taught me well . i came for the local storage part but after watching full video.. i learned many new concepts. thnx

@serousetrick 2 жыл бұрын

Great tutorial Ed, it was fun doing this project. The only problem that I have is when I delete todo, instead of it there will be blank space. For example, if I want to delete only the first "todo" by clicking on the trash button, after animation on its position there is an empty row and the second "todo" won't climb up. Any help with this?

@mateuszzielinski 3 жыл бұрын

Hello Ed! I am beginner and challenged myself to save "checked" status also. It took me about one day but I managed to do that. It wouldn't be possible without your great tutorial about localStorage. It was a great splice(), indexOf(), includes() training also! Thank you for sharing knowledge!

@shantisuma7738 Жыл бұрын

can you share that code for checked in local storage

@trystandbannon 4 жыл бұрын

For some reason my todos filter doesnt update until i click on it again, how do I make it happen right when i click the option i choose?

@0rdsec 4 жыл бұрын

just had this same issue. in the event listener for filterOption, use 'input' instead of 'click'

@mimkii8369 4 жыл бұрын

@@0rdsec Thanks for the solution! I had the same issue..why was that happening?

@0rdsec 4 жыл бұрын

@@mimkii8369 i'm no expert, but i think it's because a click listener doesn't provide the behaviour we need, which is displaying certain todos based on what we select in the dropdown, upon selection. the click listener only cares about whether something's been clicked, whereas we need things to filter when the selected option in the dropdown CHANGES. dropdowns seem like a dark art :)

@flo_dev 4 жыл бұрын

You rock !

@aakashkharche9429 4 жыл бұрын

I am getting 4 in nodelist even if 3 are added and first is text and due to this getting error.Can u help

@Amar11115 Жыл бұрын

I don't know how I should thank you. Really enjoyed the tutorial. Learned a lot. Of course there are 1-2 things I haven't comprehend properly but I will clear them up. Just want to say, you are awesome!

@alexandros6453 4 жыл бұрын

Great tutorial Ed! I faced an error in the filter function and don't know exactly what went wrong :( Where can i find the source code to check the issue? Thanks again!

@HermanRas 4 жыл бұрын

anyone completed the project ? please share Code :)

@harshmellow3549 4 жыл бұрын

@@HermanRas from a comment above you : for the people that are getting the error of ["cant read property contains of undefined"] you have to check if you left space in the tag and because of that when you get the list of nodes you always get a "Text" node with no class and that causes the problem.

@alexandros6453 4 жыл бұрын

@@harshmellow3549 that was the problem! you are great:)

@rayhanmahmud6589 3 жыл бұрын

@@harshmellow3549 Thank you so much! This problem was driving me crazy!

@victorramirez5605 2 жыл бұрын

@@harshmellow3549 wow such a small detail was creating a huge problem. thanks.

@VHCreator 4 жыл бұрын

56:44 this guy turns off caps lock with a voice command, pretty cool imo. Just finished this video, amazing. Im coming from Java and need to do a project in web dev course im enrolled in collage. You are providing very helpful videos, thank you.

@longingbydesign 2 жыл бұрын

While I value you teaching people web development, you really should make sure you don't teach people bad practices. div cannot be a child of ul, that's invalid HTML. ul can only have li, template, and script children. textContent should always be preferred over innerText unless you need the specific, white-space preserving behaviour of innerText. Also you should stick to one style of denoting strings, either double or single quote. For HTML strings I recommend to use template literals so you don't have issues with quotes inside the string (which seems to be the reason you're using single quotes for those).

@BoisNation 4 жыл бұрын

Exactly what I have been looking for. I just started learning some JavaScript after finishing HTML and CSS. This project was perfectly fit for me and it was very nice of you to post some of your hardwork for free on KZfaq. Keep it up!

@mohamadnagiebrahim 4 жыл бұрын

thanks for the effort! the event.preventdefault(); does not work, and the page keeps on refreshing, any help please ?

@finchaser 4 жыл бұрын

i have the same problem

@shafnisha1171 9 ай бұрын

Loved this explanation, thankyou ed!

@katianddav 4 жыл бұрын

Could you put readyproject to download ? I have some problems...

@vaniad555 4 жыл бұрын

yes, copy & paste at the end messed up my entire js , wish I had the full page of code to see where I missed a dot, hard to read the lines after hours of following that handsome guy...:)

@kramyshan8121 2 жыл бұрын

Excellent work here, you rock! The local storage part is the best on the internet so far. Keep it up and thank you very much!

@alivakili2770 4 жыл бұрын

Thank you for the amazing tutorial. I appreciate it. just one concern! after loading again the page, the items which checked or completed before would not be checked or completed anymore. how to fix it?

@yltfy 3 жыл бұрын

Basically, it's not sufficient to store only the todo content to the local storage. You'll also have to store a boolean indicating whether it is completed, and then render the style accordingly. Instead of storing todos = ["learn javascript", "get up early", "hello"], you need to store something like todos = [{content: "Learn javascript", completed: false}, {content: "get up early", completed: true}, {content: "hello", completed: true}].

@supsaifi4042 4 жыл бұрын

You are the first guy i want to make mentor in web development course

@pradeepkumarreddykondreddy7048 3 жыл бұрын

Anybody interested in implementing how to persist completed and uncompleted list to local storage, then you can check my repository github.com/kpradeepkumarreddy/todo-list At the end of the video Dev Ed said it is difficult to implement. But it is not so difficult. Instead of storing the item text alone to local storage, i'm storing the following object, where status is completed/uncompleted. class TODOItem { constructor(text, status) { this.text = text; this.status = status; } }

@adao5308 2 жыл бұрын

Checking this out. Thanks!

@harshwebdeveloper 2 жыл бұрын

thanks sir this was helful i was facing some problems

@nadinandfamily6201 3 жыл бұрын

Thanks so much for such great project. It took me several days to understand each part of it, to make a lot of notes and even to add some new features!!! You are going a great job! Will be waiting new projects

@Webbi_Trax Жыл бұрын

Hey guys! Im having a bug, maybe you could help. When I press one of the options in the select dropdown menu, the todo list does not update. Only when I press the select menu again it updates..... ....UPDATE: I just cloned the repo from Dev ED, and his code has the same bug. It could have something to do with my Browser. I am running Chrome.... The problem seem to be that. the filterToDo function does not fire when i press the options in the drop down menu, only when I press the select element does the function fire UPDATE: Found the solution: use the 'change' eventlistener, instead of 'click' on the filterOption function :-)

@tanmay6207 Жыл бұрын

thank you so much for this! :)

@kendimce3309 3 жыл бұрын

This is the first time that I watched your todo project. I appreciate the way you are teaching. Perfekt

@callmeFernie 3 жыл бұрын

Really? Like this tutorial is on my watch later playlist for a few days now. I haven't followed it yet because I was afraid that I wouldn't understand why this do that, you know what I mean? I'm very interested tho. It's just like kinda a fear that following a tutorial would hinder my learning since i'm a beginner

@kendimce3309 3 жыл бұрын

@@callmeFernie I am beginner too. The good thing is he teaches something by doing. You should have prior knowledge of html css and Javascript though. Then jump into projects. I recommend the 50 project of Brad Traversy on Udemy as well if you are interested

@callmeFernie 3 жыл бұрын

@@kendimce3309 html and css i'm quite familiar with. I just finished Sololearn's JavaScript course and I'm taking the same course from other sources because I don't trust my brain to remember stuff lol Imma check it out Udemy's. thanks for answering :) happy coding!

@vijethrevankar7937 4 жыл бұрын

When filterind, i get this error. Can help me out? TypeError: todo.classList is undefined TypeError: todo.style is undefined

@hemantjain8777 4 жыл бұрын

check if you have left blank space between the ul tag () . Get rid of the space and your problem will be solved, hopefully

@vijethrevankar7937 4 жыл бұрын

@@hemantjain8777 yeah that was the issue

@kinglebron5437 4 жыл бұрын

@@hemantjain8777 wow it fixed it, may i ask why is this the reason of the error?

@hemantjain8777 4 жыл бұрын

@@kinglebron5437 when we get the list of the nodes, the empty text is returned without any class. This gives rise to the error.

@m.rohith1821 4 жыл бұрын

If you don't mind can you please share the code . I am not able to get the part at 23:42 . I am not able to find the mistake.

@sibusisosiyabongandaba698 2 жыл бұрын

This was hello of a session, did every line with you. 🙂 Great stuff, keep it up

@MinecraftVinesFHAM 4 жыл бұрын

Is anyone having trouble with filtering the completed/uncompleted tasks? I'm copying the code straight from him and it doesn't seem to work for me. I noticed this error I'm receiving in the console.log whenever I click the dropdown box. Uncaught TypeError: Cannot set property 'display' of undefined at app.js:77 at NodeList.forEach () at HTMLSelectElement.filterToDo (app.js:72) Would love some help if possible! Thank you

@SmeSSS 4 жыл бұрын

I have the same problem. I think the error occurs, because if you check what console.log(todos) does after the "const todos = todoList.childnodes;" line, then you'll see, that we have an unneccesary element in the NodeList. Even though you add 0, 1, 2 or 3.... items, there will be always 1 more in the NodeList, because the first one will be a 'text' element, like this: NodeList(3) [text, div.todo, div.todo] I'm not sure why does it gets added. It has a wholeText: "↵↵ ". I'd also appreciate some insight if someone has. :)

@hwangdoo5515 4 жыл бұрын

me too, I need to some helps @@

@hwangdoo5515 4 жыл бұрын

@@SmeSSS I think i can fix it, try remove all spaces in ul in html. code: ""

@SmeSSS 4 жыл бұрын

@@hwangdoo5515 You are absolutely spot on. Nice thinking, good job! =]

@ThatGuyDownInThe 4 жыл бұрын

@@hwangdoo5515 yo HOW did you figure that out??

@RicardoSilvaTripcall 4 жыл бұрын

Amazing project and Channel, Congrats!!! I've been long years away from the front end and Java Script an this was an amazing refresh. Going to explore and study the code more thorough now.

@minstreet_studio6265 3 жыл бұрын

2:08 IS THE REASON WHY THIS VIDEO IS 1 HOUR LONG😂😂😂😂😂

@SusheelKumar-pt7tw 2 жыл бұрын

Thanks bruh... I did your creative html and css course via udemy that's cool thing I learnt alot from that. between you are so fast even I put 0.50x speed placback of video you are switching the frame like magic 🥳🥳🤯... Thanks 🌹 for your valuable info looking for more support from you ahead 😍😍

@shivani9840 2 жыл бұрын

Hey Susheel! Have you ever taken the help of any tutorial to do a project? Would you be interested exploring opportunities in web development?

@pradeepkumarreddykondreddy7048 3 жыл бұрын

Please explain each line of code that you type, including CSS, otherwise it is difficult to follow for beginners like me.

@sahilnambiar2594 3 жыл бұрын

its a javascript tutorial he expects u to know css and html

@fernandocorenstein6531 4 жыл бұрын

Hi Ed, I know your channel from a few months back when I started learning Python. Just purchased your courses for HTML,CSS & JS. Thank you for the great content!

@TipsyRiver 3 жыл бұрын

Had some trouble with an error that said "Uncaught TypeError: Cannot read property 'addEventListener' of null" and none of the google/comment fixes did it for me. So, for anyone out therre with the same issue here's my fix: 1. Go to index.html and add ithe "id" property to your main divs/buttons/lists. Set them equal to their class. 2. Then go to the top of your app.js file. Use getElementById instead of querySelector when creating the todoInput/todoButton/etc variables. 3. It should be working now. Dunno if it's an issue with JJ, chrome or something else, but querying for IDs is the only solution that worked for me after hours of trying things and searching SO.

@captainpeen9880 3 жыл бұрын

i dont understand why is this happening

@srivatsajoshi 3 жыл бұрын

It happened to me as well. That s because i forgot to add "dot" in querySelector('.todo-input'); . May be the same thing happened to you.

@severussin 3 жыл бұрын

@@srivatsajoshi I have not forgotten the dot but by app.js file doesn't work even though I've ensured its identical to whats in the video, any pointers?

@andreguimaraes9347 2 жыл бұрын

You just saved me a lot of headache. Thank you so much!

@YesUssy 3 жыл бұрын

I purchased the JavaScript course recently but not started it until I have finished my learning of HTML and CSS but after watching this episode I’m super excited to start the course! How is this only worth $18 especially with all the information your providing and not only that this is only 1 of the few projects in this course! 😱 I’m super excited to start this course very soon!!

@utkarshgupta3209 4 жыл бұрын

23:44 my program is not working, nothing is happening when I click the 'plus' sign. Please help.

@guithegood87 4 жыл бұрын

I have the same issue, when cliecked the chrome console warns about a "Uncaught TypeError: todo.classList.toogle is not a function at HTMLUListElement.deleteCheck".

@carlosantoniomarroquin5520 4 жыл бұрын

@@guithegood87 It's not toogle is toggle, you have two o's instead of two g's . That's why it says that is not a function.

@00el04 4 жыл бұрын

have you fixed the problem?

@severussin 3 жыл бұрын

@@00el04 My JS doesn't appear to run on my page after literally copying and pasting his JS code into my editor. Any ideas?

@basscoversimulation3167 10 ай бұрын

Amazing project, it truly demonstrates DOM manipulation using JavaScript. It has a design flaw, the green button is always checked, it should initially be unchecked then checked when clicked after a task is completed.

@wayupthep0unds 2 жыл бұрын

For anyone getting the 'TypeError: Cannot read properties of undefined' error when trying to get the 'completed' filter to work, change: function filterTodo(e) { const todos = todoList.childNodes; todos.forEach(function (todo) { with: function filterTodo(e) { const todos = [...todoList.children]; todos.forEach(function (todo) { childNodes returns a collection of - as it sounds like - child 'nodes'. Some of these nodes may not be elements, but text nodes - and text nodes have no classList property. Use .children instead, which will retrieve only child 'elements'.

@trudeauokech2234 2 жыл бұрын

Thank you so much for this! It is really helpful

@Tc-hs8rp 2 жыл бұрын

What do the "..." do?

@adept9162 2 жыл бұрын

This hasnt worked for me.

@richochet 11 ай бұрын

Thanks, but this didn't work for me, same error message "Uncaught TypeError: todo.children is undefined"

@ol1175 3 жыл бұрын

after watching 100 of ToDos , your explanation is TOP. btw got your SCC and JS courses. Thanks man

@joshuachisunka5887 4 жыл бұрын

Thanks for the course Dev Ed, I love your tutorial videos. They are good for practice and the results are awesome. I had a problem with making the list appear when I click the add button. My page keeps refreshing each time I click the add list button. Where could I have gone wrong?

@severussin 3 жыл бұрын

Having a similar issue with the javascript elements on this tutorial.

@hariprasad467 2 жыл бұрын

Use prevent default method

@pvd4170 Жыл бұрын

Thank you for a great tutorial! Decided to learn all html, css and js stuff by doing, and you are helping a lot!!!!🔥🔥🔥

@mariamaharlikamahajon9583 2 жыл бұрын

Bookmark for whenever I come back: 0:00 Intro 3:00 Start Project 9:54 CSS - styling the HTML Elements 15:00 JavaScript (Part 1) 23:50 CSS - styling the JavaScript Elements 30:45 JavaScript (adding the delete functionality) 42:27 adding filters

@pweezy001 2 жыл бұрын

Thank you soooooo much for this video Ed, I've been struggling with this code for the past hour! You're a life saver!

@sakshilalchandani7944 4 жыл бұрын

23:41 why can't I see the li's on the page, when I hit submit button

@TheShowTimeElites 4 жыл бұрын

im having the same problem

@ThomasWilliamson 4 жыл бұрын

I am also having the same problem, anyone figured it out?

@notonlymusicmixes181 4 жыл бұрын

Same here. My page refreshes when I click the button, but nothing else happens. I also added event.preventDefault(); .....feels bad

@joshgordon7299 3 жыл бұрын

i fixed my problem i figured out i had mine todoDiv.classList() instead of todoDiv.classList.add('todo-item')

@nigelpallatt 2 жыл бұрын

Love this follow along with thing, everything I have known for years but it feels fresh somehow ...

@voidshard4053 3 жыл бұрын

For anyone that gets this error: Uncaught TypeError: Cannot read property 'addEventListener' of null , try putting your script tag right before the end of your tag.

@nivellen1168 3 жыл бұрын

Or put a defer attribute in the script tag

@voidshard4053 3 жыл бұрын

@@nivellen1168 yes i actually today learned what defer does didnt knew it when i written the comment... thanks :)

@nivellen1168 3 жыл бұрын

@@voidshard4053 no problem ^^

@sayana7620 3 жыл бұрын

Defer doesn’t work for me. Can you please help me to fix the problem?

@voidshard4053 3 жыл бұрын

@@sayana7620 yeah. Please mail the code morrissmit.dev@gmail.com ill take a look

@johnatteo822 2 жыл бұрын

Ed you are my favorite person. I'm buying your Javascript course so I can do more projects. Thank-you for sharing your knowledge to help others like me strive! 👍

@tim.bogdanov 4 жыл бұрын

at 52:30 im getting this error: Uncaught TypeError: Cannot set property 'display' of undefined at app.js:69 at NodeList.forEach () at HTMLSelectElement.filterTodo (app.js:66) (anonymous) @ app.js:69 filterTodo @ app.js:66

@eric-hsueh 4 жыл бұрын

Tim Bogdanov me too😭

@vganesh5528 4 жыл бұрын

@vedran brendy your gineus .. how it is possible

@nicholasng1443 4 жыл бұрын

This works for me: The problem is occurred at this line in index.html. Make sure between opening and closing tag of is EMPTY as in no space, no enter, just leave it blank. or can copy this and replace the code: Hope this helps.

@byronjones5713 4 жыл бұрын

I ended up testing the type of element in the list to look for Element node types before performing any operations. When a text node (or any node other than Element node) is encountered, it skips processing. function filterTodo(e) { const todos = todoList.childNodes; todos.forEach(function (todo) { //ignore text and other non-element nodes if (todo.nodeType === Node.ELEMENT_NODE) { // console.log(e.target.value); switch (e.target.value) { case "all": todo.style.display = "flex"; break; case "completed": if (todo.classList.contains('completed')) { todo.style.display = "flex"; } else { todo.style.display = "none"; } break; case "uncompleted": if (!todo.classList.contains('completed')) { todo.style.display = "flex"; } else { todo.style.display = "none"; } break; } } }) }

@MichaelWeston82 4 жыл бұрын

@@byronjones5713 this helped me a ton! Thanks for posting. I couldn't understand why the switch statement wasn't filtering. It was so frustrating. Then i added the if statement u provided plus the extra part for "uncompleted" case and Boom! Magic happens! Thanks again!

@priscilliahillion4256 3 жыл бұрын

I'm a french and I like a lot your tutorial. Good job ! Thanks.

@topellasrinivasarao1125 4 жыл бұрын

33:09 just incase If I forget, so a Note to myself I had to watch netflix sorry Ed but I'll BRB.

@samuelrodrigues175 3 жыл бұрын

So you are using this as your to do list, 🤣

@technonessteam7511 3 жыл бұрын

Thank you so much for creating this tutorial. You have done an amazing job. Really impressive. Please bring more Vanilla JavaScript projects with such great detailing. Really thank you. stay blessed