exercises/10 - Hold Shift and Check Checkboxes/index.html

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <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;
    }

    .details {
      text-align: center;
      font-size: 15px;
    }
  </style>
</head>

<body>
  <!--
   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" id="0">
      <p>This is an inbox layout.</p>
    </div>
    <div class="item">
      <input type="checkbox" id="1">
      <p>Check one item</p>
    </div>
    <div class="item">
      <input type="checkbox" id="2">
      <p>Hold down your Shift key</p>
    </div>
    <div class="item">
      <input type="checkbox" id="3">
      <p>Check a lower item</p>
    </div>
    <div class="item">
      <input type="checkbox" id="4">
      <p>Everything inbetween should also be set to checked</p>
    </div>
    <div class="item">
      <input type="checkbox" id="5">
      <p>Try do it with out any libraries</p>
    </div>
    <div class="item">
      <input type="checkbox" id="6">
      <p>Just regular JavaScript</p>
    </div>
    <div class="item">
      <input type="checkbox" id="7">
      <p>Good Luck!</p>
    </div>
    <div class="item">
      <input type="checkbox" id="8">
      <p>Don't forget to tweet your result!</p>
    </div>
  </div>

  <script>
    // Wrap JS code in an IIFE, creating a closure so as to not pollute the global namespace
    (() => {

      // Declare variable that will be defined later as the input that the user
      // most recently selected
      let lastSelected;

      // Declare & define constant as a reference to all inputs of type checkbox
      // that are children of the 'inbox' class
      const checkBoxes = document.querySelectorAll('.inbox input[type="checkbox"]');

      // Event Handler function
      const multiCheck = (el, e) => {

        // If the lastSelected variable is defined and the shift key was pressed
        // when this event triggered...
        if (lastSelected && e.shiftKey) {

          // Set checked property of checkbox to be the same as the
          // checked property of the last selected input
          el.checked = lastSelected.checked;

          // If the ID of the checkbox is greater than the ID of the last selected input...
          const [startIdx, endIdx] = el.id > lastSelected.id ?
            // ...define variable startIdx as last selected input ID and endIdx as checkbox ID
            [lastSelected.id, el.id] :
            // ...if not, switch variable definitions
            [el.id, lastSelected.id];

          // Declare & define constant as an array of inputs between the last selected input
          // and the checkbox input
          const middleInputs = [...checkBoxes].slice(parseInt(startIdx) + 1, endIdx);

          // Set checked property of each input to match checked property of checkbox input
          middleInputs.forEach(checkbox => checkbox.checked = el.checked);
        }

        // If no lastSelected or shiftKey was not pressed, entire if statement is skipped
        // Define lastSelected as the input that was the checked which triggered the event handler
        lastSelected = el;
      }

      // Add event listener to each input that will call multiCheck function on the 'click' event
      checkBoxes.forEach(checkBox => {
        checkBox.addEventListener('click', multiCheck.bind(null, checkBox));
      });
    })();
  </script>
</body>

</html>