JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

<div id="errorsun">
<div id="errordot">
</div>
</div>

CSS

#errordot{
    position:absolute;
    top:0;
    left:0;
    width:50px;
    height:50px;
    background:red;
    border-radius:50%;
    font-size:40px;
}
#errorsun{
    width:200px;
    height:200px;
    position:absolute;
    top:50px;
    left:50px;
}
.orbit {
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:orbit;
    -webkit-animation-duration:5s;
}
.paused {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}

@-webkit-keyframes orbit {
from { -webkit-transform:rotate(0deg) }
to { -webkit-transform:rotate(360deg) }
}
@-moz-keyframes orbit {
from { -moz-transform:rotate(0deg) }
to { -moz-transform:rotate(360deg) }
}

JavaScript

function include(arr,obj) {
    return (arr.indexOf(obj) != -1);
}

var hasPaused = false;
document.addEventListener('click', function(e) {

  if (e.target.id == "errordot") {
  	var sun = document.getElementById('errorsun');
    // var classes = sun.className.split(" ");
    
    
    if (sun.className == "orbit") {
      	//sun.className = "";
        sun.setAttribute('class', 'orbit paused');
        e.target.style.backgroundColor = 'green';
        hasPaused = true;
      } else {
      	sun.setAttribute('class', 'orbit');
        e.target.style.backgroundColor = 'yellow';
      }
    }
});