JSFiddle - React, Tailwind, and code Playground

Starting and stopping a setInterval

by nilloc

HTML

<ul>
  <li id="tester">A</li>
  <li id= "counter">0</li>
</ul>

<div class="info">Resize this panel to see grids respond</div>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
  background-color: #20262e;
}

ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-gap: 10px;
}

li {
  background-color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
}

.info {
  text-align: center;
  font-size: 13px;
  padding-top: 20px;
  color: #fff;
}

JavaScript

let tester = document.querySelector('#tester');
let counter = document.querySelector('#counter');
tester.addEventListener('mouseover', startCounter);
tester.addEventListener('mouseout', stopCounter);


let count = 0;
function counterer(){
	count ++;
  counter.textContent = count;
}

let countInterval;
function startCounter(){
	countInterval = setInterval(counterer, 6);
}

function stopCounter(){
	clearInterval(countInterval);
}