ES6 Array From

by Ford Heacock

HTML

<div class="block">

</div>

<div class="block">

</div>

<div class="block">

</div>

<div class="block">

</div>

CSS

.block {
  background-color: red;
  margin: 2em;
  height: 100px;
  width: 100px;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

.bg {
  transition: .5s;
  top: 100%;
  background-color: blue;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

JavaScript

const block = document.querySelectorAll('.block');

Array.from(block).forEach(function(element) {
      element.addEventListener('click', doTheThing);
    });
    
function doTheThing(){
	this.classList.toggle('bg');
}