How LocalStorage and Event Delegation work.

[@julianstorm7722]

Why did I not do this series when I started with js....came here to review some concepts and found out there's fair a few things I haven't covered...Thanks for this great series....You deserve way more subs.

[@WesBos]

Thank you!

[@frankiev1785]

One of my favorite videos on LocalStorage so far. Thanks Wes!

[@hibritusta2642]

Greetings from Turkey. You have a very good expression. The subject is well understood with real life applications! Congratulations and thanks!

[@alexandera6012]

Thanks a lot, Wes! This video and the whole JS30 series are super useful and fun. Learned a lot from just watching your step-by-step building process.

[@1lucas132]

Several very important concepts applied in practice ... Thanks Wes

[@gothamfury]

Thank you for this video! I'm just getting into JavaScript and learning about LocalStorage and this has been very helpful. I like the editor you're using too. The cursive script for properties is cool.

[@Ludo045]

this is helpful as a beginner ? it's a bit complicated i think... This is a changelle and i could have never ever be able to do this alone.

[@ArifBasri]

timeless tutorial! thanks very much Wes!

[@lukasluftlaufer1093]

This is so clever! Learned a lot! Thanks Wes.

[@avi12]

12:10 Or, just wrap the input and the text in and you don't need to do that you did. I.e. ${place.text}

[@nathancornwell1455]

still best practice to link them together .....

[@polmeep9484]

Hi, how did you configure autocomplete of html tags in backticks? I'm using a VS Code but for me it's not working.

[@shimphillip]

Priceless Tutorial. Thanks!

[@akramadil7502]

I don't clearly understand why you called"populateList" again in the end at line 60. 19:17

[@julianstorm7722]

Without calling it again the saved keys in localstorage would only show up on submit and not on every page load.

[@wentingsong9435]

How do you type the taco or the poop icon there?

[@giadungtienichnoha9288]

My solution for the challenge (It can toggle between check all & clear all). // Create a button with class check-all in HTML and select it const checkAll = document.querySelector('.check-all'); // Add click event checkAll.addEventListener('click', handleCheckAll); // Function handle event function handleCheckAll(e) { const allCheck = items.every((item) => item.done === true); if (allCheck) { items.forEach((item) => (item.done = false)); } else { items.forEach((item) => (item.done = true)); } localStorage.setItem('items', JSON.stringify(items)); populateList(items, itemsList); }

[@erikhendin3459]

Thank you for sharing this! I was struggling with this, I got select all working in separate examples but not in this code context with local storage. Nice work, you helped me out.

[@trophydevice7624]

Has anyone tried adding a delete button? I am struggling on that one..

[@Bajdster]

I have a problem, 13:53 when I try to check checkbox it isn't working, checkbox doesn't responding, there is no error on console.Help

[@anokhps3088]

same problem,have you solved it out?

[@ahherewhatsthestory]

Does anyone know how I can add a button to each item to delete it from the list? Any help is much appreciated.

[@丶-s3u]

while input has display : none how can he detected if is checked or not ? didn't work for me so I add this code position: absolute; opacity: 0; cursor: pointer; I just wanna know how it's work for him 🤔

[@fespamo]

i'm still a beginner , i realise this as i need to watch an practice this video 2 or 3 times

[@mirage4731]

I didn't understood the need of ${plates.done ? 'checked' : ''} Why we use it ??

[@WesBos]

If the plate has a property of done, it returns a string of “checked” which causes the HTML of the input to make it checked. Otherwise we return an empty string, which is not checked

[@mirage4731]

@@WesBos thanks a lot 😁, this playlist is amazing, i loved it

[@MarcelRobitaille]

You don't need to re-render the html when you check/uncheck because you don't call preventDefault. It also might be a good idea to use el.checked rather than !items[index].done just in the off chance that this got messed up somehow.

[@kissu_io]

You need something like 'itemsList.children[0].children[0].checked' to use the checked method ? Didn't achieved to make it that way but if it's indeed using the DOM, it's pretty meh.

[@AhmedSamir-hx3ip]

@ 10:25 , when i try & type something & submit it, the Loading Tapas... disapear & nothing added, then when i try to add something one more time it adds what i typed pervious, my code is just like yours thanks

[@AbsarNaeem1]

You have to place your populateList() function after the items.push() function.

[@ClevertonHeusner]

Excelent job.

[@peterchen1774]

Really a nice video tutorial! Thanks～

[@talhaabbas1816]

what an amazing way to teach event delegation 😂😂😂

[@dentistasenciudadjuarezchi1154]

done lol, i finally got a delete button to work on the list, but the only problem is that it deletes everything, instead of a single item. So i named that button delete all lmao

[@burhaanhassan5498]

use reduce Function and set the index !=plate.i.

[@francissicnarf4707]

i got same result without calling populateList when clicking checkbox 29:05

[@avi12]

In localStorage, instead of localStorage.setItem("name", "value") - you could just: localStorage.item = "value" Also, note that there's a limit to how many strings can be stored in MBs, according to developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria

[@amitpurohit8816]

Which editor is this??

[@TheRuky]

AWESOME! Can you please tell me which text editor or IDE are you using? Thanks.

[@julianklumpers]

Renato Ruškan SublimeText with the cobalt2 theme and the font is Operator Mono

[@okoiful]

its actually vs code i think....

[@yordangalabov2113]

Wes is using Sublime. He even has a book on it. More info here: wesbos.com/?s=sublime

[@michaeldpadilla]

Wes is using VSCode with a converted Cobalt theme. That link you gave us is almost 3 years old already which is eons in the world of development. He explains this in his Syntax podcast which you all should be listening to if you haven't already! Yes, I know this video is from September 2017... He still was using VSCode then.

[@yordangalabov2113]

Michael Padilla Agreed. Thanks for your reply.

[@mdsagorahmed2546]

How Can I get source file?

[@WesBos]

JavaSCript30.com

[@Mustafaismail22]

Great video, Thank you 😘

[@bendude]

getting this error when i open the index-START.html file: 'Failed to load resource: the server responded with a status of 404 ()' anybody know how to fix this?

[@chiragmehta84]

The error is caused because the background url in style.css is set to wes.io/hx9M/oh-la-la.jpg which no longer exists. Replace it with this and it'll work fine background: url('source.unsplash.com/N_Y88TWmGwA/640x426')

[@kissu_io]

As you're a daddy, I liked the way you explained the event delegation. :P

[@mikolwski]

Instead of 'click' I listen to the 'change' and i think it works fine too

[@NitinGoyal-tf8tz]

I have a better method in O(n) time complexity function addItem(){ e.preventDefault(); const text=(this.querySelector('[name=item]')).value; const newLi=document.createElement('li'); newLi.innerHTML=text; itemsList.appendChild(newLi); this.reset(); }