grid_wave

automate propagating attributes... well..thats the idea =)

by trentHarlem

HTML

<main>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div class="cell">
  </div>
  <div...

CSS

body {
   margin: 0;
   padding: 0;
   background-color: #3b404e;
   display: flex;
 }

 main {
   height: 100vh;
   width: 100vw;
   display: grid;
   grid-template-columns: repeat(10, 1fr);
   grid-template-rows: repeat(10, 1fr);
   grid-gap: 1px;

 }

 .cell {
   background-color: dodgerblue;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
   color: #fff;
   border: 2px solid #171717;
   transition: all 0.3s ease-in-out;
 }

 .change {
   background-color: indigo;
 }

JavaScript

const cells = document.querySelectorAll('.cell')
const l = console.log
// l(cells.length)
// counter var to increase delay time
let counter = 0
// ( 0 * 500, 1 * 500, etc)
let delay = 300


function changeColor(div) {
  //l('click', this) 

  setTimeout(function() {
    div.classList.add('change')
    sendEcho(div)
    setTimeout(function() {
      div.classList.remove('change')
    }, delay)
  }, counter * delay)
}


cells.forEach(c => c.addEventListener('click', function() {
  /* l('click', this)*/

  //this.classList.add('change')
  changeColor(this)
  // sendEcho(this)

  /*  setTimeout(function() {
     c.classList.remove('change')
   }, 500) */
}))


function sendEcho(source) {
  //l('source', source)

  const echoUP = source.nextElementSibling
  const echoBACK = source.previousElementSibling
  counter += 0.5
  changeColor(echoUP)
  changeColor(echoBACK)

  // l('echoUP', echoUP)
  /*   echoUP.classList.add('change')
    echoBACK.classList.add('change')
    
     setTimeout(function() {
      c.classList.remove('change')
    }, 500) */
}