Today we learn all about Local Storage in the browser and how to use something called Event Delegation to handle events on elements created in the future. Grab all the exercises and starter files over at JavaScript30.com
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.
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.
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); }
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.
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.
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.
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
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
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 🤔
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
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.
@ 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
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?
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')
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(); }
