I recently undertook a tutorial challenge to create:
- Tick ALL boxes - Taco Everything
- Untick ALL boxes - Untaco Everything
- Delete ALL boxes - Eliminate all the 'dishes' in the menu added
I am grappling with this. While my code successfully adds items to the list when entered, the functionality for any of the above commands is not working. How can I achieve this using JavaScript?
const addItems = document.querySelector('.add-items'); //selects all form items
const itemsList = document.querySelector('.plates'); // selects plates area
const checkboxes = document.querySelector('.check__all'); // selects check all button
const uncheckboxes = document.querySelector('.uncheck__all'); // selects uncheck all button
const clearBoxes = document.querySelector('.clear__all'); // selects remove/clear all button
const items = []; // empty array to store passed data
function addItem(e){
e.preventDefault();
const text = (this.querySelector('[name=item]')).value;
const item = {
text,
done: false
};
items.push(item);
populateList(items, itemsList);
localStorage.setItem('items',JSON.stringify(items));
this.reset();
}
function populateList(plates = [], platesList){
platesList.innerHTML = plates.map((plate,i)=>{
return `
<li>
<input type = "checkbox" data-index = ${i} id = "item${i}" ${plate.done ? 'checked' : ''} />
<label for="item${i}">${plate.text}</label>
</li>
`;
}).join('');
}
function toggleDone(e){
if(!e.target.matches('input')) return;
const el = e.target;
const index = el.dataset.index;
items[index].done = !items[index].done;
localStorage.setItem('items',JSON.stringify(items));
populateList(items, itemsList);
}
addItems.addEventListener('submit', addItem);
itemsList.addEventListener('click', toggleDone);
populateList(items, itemsList);(CSS CODE SNIPPET)(SVG IMAGE CODE)I have attempted different approaches but none seem to be effective.