Day10 of #100DaysOfCode

Hii folks 🙌

Today I have completed the 10th video of JavaScript30!

Project 10: Hold Shift to Check Multiple Checkboxes

Source: https://javascript30.com

Learnings:

Hold Shift to Check Multiple Checkboxes

So, let’s start by logging in to the console!!

• We can console.log what we query selected in order to check if we selected the correct elements

let checkbox = document.querySelectorAll('input[type="checkbox"]');
console.log(checkbox);

• The checkbox is an array of input elements so we can add an event listener for each element by looping through them

checkbox.forEach(input => input.addEventListener('click', handleCheck));

• We can console.log the event to check the event listener

function handleCheck(e){
 console.log(e);
}

• Now we create a variable that stores which element was checked

let lastChecked;function handleCheck(e){
lastChecked = this;
}

• Check if the shift key was pressed down and the checkbox has been checked!!

function handleCheck(e){
 if(e.shiftKey && this.checked){ }lastChecked = this;
}

• Create a checking variable with default value false and loop through each checkbox element.
• If the checkbox element is equal to lastChecked value or the element that was shift clicked, the variable value is set to the opposite value
• If the variable value is true, the checkbox is checked, which is done by the following code!

let lastChecked;function handleCheck(e) {
 let inBetween = false; if (e.shiftKey && this.checked) {  // loop over every single checkbox
  checkboxes.forEach(checkbox => {
   if (checkbox === this || checkbox === lastChecked) {
   inBetween = !inBetween;
   }   if (inBetween) {
   checkbox.checked = true;
   }
  }); }lastChecked = this;
}

Today I learned (T-I-L):

• e.shiftKey && this.checked — THIS WAS JUST AWESOME

That is all for Day10 ✅

Thanks for reading, See you tomorrow!