12 - hold shift and check checkboxes/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hold Shift to Check Multiple Checkboxes</title>
</head>

<body>
    <style>
        html {
            font-family: sans-serif;
            background: #ffc600;
        }

        .inbox {
            max-width: 400px;
            margin: 50px auto;
            background: white;
            border-radius: 5px;
            box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.1);
        }

        .item {
            display: flex;
            align-items: center;
            border-bottom: 1px solid #F1F1F1;
        }

        .item:last-child {
            border-bottom: 0;
        }

        input:checked+p {
            background: #F9F9F9;
            text-decoration: line-through;
        }

        input[type="checkbox"] {
            margin: 20px;
        }

        p {
            margin: 0;
            padding: 20px;
            transition: background 0.2s;
            flex: 1;
            font-family: 'helvetica neue';
            font-size: 20px;
            font-weight: 200;
            border-left: 1px solid #D1E2FF;
        }
    </style>
    <!--
   The following is a common layout you would see in an email client.

   When a user clicks a checkbox, holds Shift, and then clicks another checkbox a few rows down, all the checkboxes inbetween those two checkboxes should be checked.

  -->
    <div class="inbox">
        <div class="item">
            <input type="checkbox">
            <p>This is an inbox layout.</p>
        </div>
        <div class="item">
            <input type="checkbox">
            <p>Check one item</p>
        </div>
        <div class="item">
            <input type="checkbox">
            <p>Hold down your Shift key</p>
        </div>
        <div class="item">
            <input type="checkbox">
            <p>Check a lower item</p>
        </div>
        <div class="item">
            <input type="checkbox">
            <p>Everything in between should also be set to checked</p>
        </div>
        <div class="item">
            <input type="checkbox">
            <p>Try to do it without any libraries</p>
        </div>
        <div class="item">
            <input type="checkbox">
            <p>Just regular JavaScript</p>
        </div>
        <div class="item">
            <input type="checkbox">
            <p>Good Luck!</p>
        </div>
        <div class="item">
            <input type="checkbox">
            <p>Don't forget to tweet your result!</p>
        </div>
    </div>

    <script>
        const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
        console.log(checkboxes);

        let lastChecked;

        function handleCheck(e) {
            let inbetween = false;

            //check if the user has her shift key down and is checking the box
            //we do not care if his shift key is down but she is not checking any box.

            //strategy - [false...true...true...true.........false]
            if (e.shiftKey && this.checked) {
                //do whatever is needed
                // we will loop over all the checkboxes and find all the inbetween ones

                checkboxes.forEach(checkbox => {
                    console.log(checkbox);
                    if (checkbox === this || checkbox === lastChecked) {
                        inbetween = !inbetween;
                        console.log("Starting to check them in between !");
                    }
                    if (inbetween) checkbox.checked = true;
                });
            }
            lastChecked = this;
        }


        //change event works only for mouse clicks on checkbox, but click responds even to keyboard
        checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));
    </script>
</body>

</html>