aaemnnosttv · January 16, 2017 23:20
diff --git a/my-solution.html b/my-solution.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</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;
    }

    .details {
      text-align: center;
      font-size: 15px;
    }


  </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 inbetween should also be set to checked</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Try do it with out 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 boxes = Array.from(document.querySelectorAll('.inbox .item [type="checkbox"]'));
 let lastChecked;

 function changeBox(event) {
  if (event.shiftKey && this != lastChecked) {
    checkIntermediateBoxes(lastChecked, this);
  }

  lastChecked = this;
 }
 boxes.forEach(item => item.addEventListener('click', changeBox));

 function checkIntermediateBoxes(first, second) {
  if (boxes.indexOf(first) > boxes.indexOf(second)) {
    [second, first] = [first, second];
  }

  intermediateBoxes(first, second).forEach(box => box.checked = true);
 }

 function intermediateBoxes(start, end) {
  return boxes.filter((item, key) => {
    return boxes.indexOf(start) < key && key < boxes.indexOf(end);
  });
 }
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</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;
	}

	.details {
	text-align: center;
	font-size: 15px;
	}


	</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 inbetween should also be set to checked</p>
	</div>
	<div class="item">
	<input type="checkbox">
	<p>Try do it with out 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 boxes = Array.from(document.querySelectorAll('.inbox .item [type="checkbox"]'));
	let lastChecked;

	function changeBox(event) {
	if (event.shiftKey && this != lastChecked) {
	checkIntermediateBoxes(lastChecked, this);
	}

	lastChecked = this;
	}
	boxes.forEach(item => item.addEventListener('click', changeBox));

	function checkIntermediateBoxes(first, second) {
	if (boxes.indexOf(first) > boxes.indexOf(second)) {
	[second, first] = [first, second];
	}

	intermediateBoxes(first, second).forEach(box => box.checked = true);
	}

	function intermediateBoxes(start, end) {
	return boxes.filter((item, key) => {
	return boxes.indexOf(start) < key && key < boxes.indexOf(end);
	});
	}
	</script>
	</body>
	</html>