Test Cards with Timer

by Ajay Dubey

HTML

<!doctype html>
<html>
<head>

</head>
<body>

  <div class="cardRow">
    <div id="card1" class="card">
      This is card 1
    </div>
     <div  id="card2" class="card"> 
      <button id="stopTimer">
        Stop the timer
      </button>
    </div>
  </div>
  <div class="cardRow">
   <div class="card">
      This is card 3
    </div>
     <div class="card">
      This is card 4
    </div>
  </div>
</body>
</html>

CSS

.cardRow {
  display: flex;
  flex-flow: row;
  justify-content: center;
 }

.card {
  color: yellow;
  background-color: blue;
  height: 10em; 
  width: 10em;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#stopTimer {
  cursor: pointer;
}

JavaScript

let timer = 1;

const card1 = document.querySelector('#card1');

card1.textContent = timer;

/* const myTimer = setInterval((exitLoop) => {
  timer = timer +1;
  card1.textContent = timer;
}, 1000) */;

const stopper = document.getElementById('stopTimer');
stopper.addEventListener('click', () => {
	clearInterval(myTimer);
})