JSFiddle - React, Tailwind, and code Playground

by nukeboy212

HTML

<h1>
Spin the Figget Spinner
</h1>

<img src="https://cf1.s3.souqcdn.com/item/2017/03/11/22/19/33/77/item_L_22193377_29699696.jpg" id = "figget">

CSS

#figget {
  width: 350px;
  height: 200px;
  display: block;
  margin: 100px auto;
}
h1 {
  text-align: center;
}
.rotate{
    -ms-transform: rotate(7deg); 
    -webkit-transform: rotate(7deg); 
    transform: rotate(7deg);
 }
 body{
   background-color:white;
 }

JavaScript

var maxSped = 5
var speed = 0
var accelerate = 0
$("#figget").click(function(){
if (accelerate < maxSped){
speed = speed + 1 * 2
accelerate += 1 
console.log(speed)
}
})
setInterval(function(){
if (speed > 0.25){
 accelerate = accelerate * 0.8
}
else {
accelerate = 0
}
console.log(speed)
},1000/1)
setInterval(function(){
$("#figget").css("transform", "rotate("+speed+"deg)")
speed = speed+accelerate;
},100/30)