#JavaScript-30 day -10

Hey fellow learners, how are you going?

Today, I am sharing my experiments with the projects from #JavaScript30 series by Wes Bos.

For today's post, I have chosen the project of day-10 which is on creating a small component in which we can checked multiple checkbox at one click. So lets dive into the code and try to understand the how I approached the problem and (how I am wrong about my approach😂.)

At first the HTML and CSS files are given in the course. We just have to add our logic via JavaScript. But before discussing the solution, first understand what is the problem statement? So, the problem statement is like there are multiple checkbox, after clicking any one checkbox as soon as we click some other checkbox, all the checkbox between the first clicked and second clicked are also checked together with the second checkbox.

So, now discuss, how I approached this problem. First I thought that if somehow we can keep track of index of first and second clicked object than we can checked the checkbox that lie between them. So I created two variables named firstChecked and lastChecked and added two event listener on all the checkbox of the same click event type. And in the first event listener I tried to update the firstChecked variable with the index of first checked checkbox and in the second event listener the same process for the lastChecked.

And then I thought that now I just have to select the indexes between that two checkbox and make it checked. But here is the catch, As I have added two different event listeners on the same object having same type of event behave as a single event, obviously but at that time I did not realised it. So started console logging the values of firstChecked and lastChecked after clicking two different checkbox but it will showing same index. It will show same index as per the code but for me who at that time not understand that logic is frustrating.

I went on debugging it. After some 1 or 2 hours, I realized my mistake and decided to watch the solution given by Wes itself. And got it right. Here is the solution of that problem. (You can download the problem files from this GitHub repo.

const checkboxArray = [...document.querySelectorAll("input[type=checkbox]")];

let lastIndex = null;
checkboxArray.forEach((box) => {
    box.addEventListener("click", handleCheck);
});
function handleCheck(e) {
    let flag = false;
    if (e.shiftKey && this.checked) {
        // console.log(lastIndex, "inside if");
        checkboxArray.forEach((box) => {
            if (box.checked) {
//to check weather the checkbox we are at is working is checked or not.
                flag = !flag;
            }
            if (flag) {
                box.checked = true;
            }
        });
    }
    lastIndex = this;
    console.log(lastIndex);
}

// in the below approach(what I thought) the main fault is that 
//the two separate event lister of the same event type will always 
//take action at simulteneously. so i cannot get the separate 
//value of the last checked checkbox after checking next checkbox.

// let firstIndex = null,
//  secondIndex = null;
// console.log(checkboxArray);
// checkboxArray.forEach((box) => {
//  box.addEventListener("click", firstBox);
// });
// checkboxArray.forEach((box) => {
//  box.addEventListener("click", secondBox);
// });
// function firstBox(e) {
//  firstIndex = checkboxArray.indexOf(this);
//  console.log(firstIndex);
// }
// function secondBox(e) {
//  if (e.shiftKey) {
//      secondIndex = checkboxArray.indexOf(this);
//  }

//  console.log(secondIndex);
// }

You can view the working model here.
So the moral of the story is, please understand the basics of the methods or functions you are using in your code in order avoid this type of fundamental mistakes.