JSFiddle - React, Tailwind, and code Playground

by nukeboy212

HTML

<h1>
Spin the Figget Spinner
</h1>

<img src="https://cdn1.bigcommerce.com/server4500/12psl01c/product_images/attribute_rule_images/846_std_1495563376.png" id = "figget">

CSS

#figget {
  width: 220px;
  height: 200px;
  display: block;
  margin: 50px auto;
}
h1 {
  text-align: center;
}
.rotate{
    -ms-transform: rotate(7deg); 
    -webkit-transform: rotate(7deg); 
    transform: rotate(7deg);
 }

JavaScript

var maxSped = 10
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 - 1
}
console.log(speed)
},1000/1)
setInterval(function(){
$("#figget").css("transform", "rotate("+speed+ accelerate+"deg)")
},100/30)