Project 10: Press shift to check multiple boxes

Welcome to my "Build 30 Js Projects in 30 Days" Series .This is day 10 and project 10. If you haven't read the other articles in this series please check them out first. I'll list them at the end of this article.

As mentioned in my previous article. This is the Day 10 challenge of Wes Bos Javascript30 course.

Final result:

In this project we will focus on how to select multiple checkboxes by using shift.This is a very common features in website now a days. You can further add features to this and create a to-do-list project.

My source code

As always before starting download the starter files from here. I've made a separate article on how to download starter files, you can check it out here.

PART 1:HTML

I've used a little bootstrap here. All you have to do is go to Bootstrap input groups and copy paste the code for checkbox along with input field format or you could copy it from my codepen. I wanted to focus on the js part for this challenge.
As you can see I've created input group and the thing to notice here is that I've given same id and class to radio and text box respectively.You will see it's use later.

PART 2:CSS

Now we are going to style our project.
Here we have just made checkbox and text input box inline. We have also centered the container horizontally and vertically.

PART 3:JAVASCRIPT

The idea is to check all the items between last checked item and the one clicked after pressing shift.
Now we will simply check for click event on radioboxes and call linethrough function for each element.

linethrough function will simply set the style of the id element to line-through.

function linethrough(id){
    value=id;
    document.querySelector(`.${value}`).style="text-decoration:line-through";
    console.log(value)
}

We will store id of checked element only if flag is false. This is used to make sure shift hasn't been pressed by user before checking radiobox.

for(radio of radioboxes){

    radio.addEventListener('click',(e)=>{
        id=e.target.id;
        linethrough(id);
        if(flag==false) last=e.target.id;
        //flag=false means shift is not pressed hence value of last is updated.
    })

If user presses shift then we will handle it separately.

Let' handle the shift case now. The idea is that we will store the id of the radio checked by user and then call linethrough function for each item.

document.addEventListener('keydown',(e)=>{
    if(e.key==='Shift')
    {   flag=true; //set flag to true
        Array.from(radioboxes).forEach(radio=>{
            //now we will store the index of radio to the current.
            radio.addEventListener('click',(e)=>{
                current=e.target.id;
                selectMultiple();

            })
        })
    }
})

function selectMultiple(){
    //this will take numeric value in index. 
    currindex=current[current.length-1];
     lastindex=last[last.length-1];
     //start will take the smaller value of both index numeric part. Loop will begin from here
    start=(currindex<lastindex?currindex:lastindex);
    //end takes the larger value
    end=(currindex>lastindex?currindex:lastindex);
    //loop over each element.Check and line through each element.
        for(i=start;i<=end;i++)
        { id=`group-${i}`;
          document.getElementById(`${id}`).checked=true;
           linethrough(id);
        }  
}

Since our index is of format group-1,group-2 etc so we will take the last char of these strings to use them to compare their values and to iterate through loop.
Since user can click above or below the previously checked element, so we will initiate the smaller value to start and larger to end ,to iterate through loop.

Things I learnt:

I didn't learn anything new as such, but this one was a bit tricky as compared to previous ones.

Previous article from this series:

Day 9 Project 9, in this project I discussed about some dev tool tricks that one should know about. Do check it out if you haven't yet.

Conclusion

That's it for today's project.Next project will be HTML5 Video Player.

If you have any doubts or suggestions please do let me know in the comment section. I'll be more than happy to interact with you.

If you like this series and want to be a part of it, do consider following me at @prachigarg19

Thanks for reading. :)