JSFiddle - React, Tailwind, and code Playground

by leopoldthecuber

HTML

<button id="button">start</button>
<div id="test">TEST</div>

CSS

div {
  transition: .3s;
  font-size: 40px;
  color: black;
}

JavaScript

const btn = document.querySelector('#button')
const target = document.querySelector('#test')
let changeCount = 0
let transitionEndCount = 0

btn.addEventListener('click', _ => {
  changeCount++
  target.style.color = 'red'
  setInterval(_ => {
    changeCount++
    target.style.color = target.style.color === 'red' ? 'black' : 'red'
  }, 1000)
})

target.addEventListener('transitionend', _ => {
  transitionEndCount++
  target.innerHTML = `change: ${changeCount}, transitionend: ${transitionEndCount}`
})