Spinner

by Gass_snippets

HTML

<div class='box' id='figure'>
  <div>
    <div class='shape-one top-left'></div>
  </div>
  <div>
    <div class='shape-two top-right'></div>
  </div>
  <div>
    <div class='shape-two bottom-left'></div>
  </div>
  <div>
    <div class='shape-one bottom-right'></div>
  </div>
</div>
<button id='btnOne'>
  spin forward
</button>
<button id='btnTwo'>
  spin backward
</button>

CSS

*{aspect-ratio:1}
.shape-two{
  height:100px;
  width:55px;
}
.shape-one{
  height:55px;
  width:100px;
}
.top-left{  
  border-radius:1in 1in 0 7px;
  transform:translateY(45px);
	background:#34A7B2;
}
.top-right{
  height:100px;
  width:55px;
  border-radius:7px 1in 1in 0;
	background:#A0E418;
}
.bottom-left{
  border-radius: 1in 0 7px 1in;
  transform:translateX(45px);
	background:#F59AA3;
}
.bottom-right{
  border-radius:0 7px 1in 1in;
	background:#FEB062;
}
.box{
  height:200px;
  width:200px;
  display:grid;
  grid-template-columns:auto auto;
  grid-template-rows:auto auto;
  transition:500ms;
}
.box > div{
  height:100px;
}
.rotate{
  transform:rotate(720deg);
}
button{
  margin-top:30px;
  height:30px;
  width:120px;
}

JavaScript

const figure = document.getElementById('figure')
const btnOne = document.getElementById('btnOne')
const btnTwo = document.getElementById('btnTwo')
let degrees = 0;

btnOne.addEventListener('click', () => spinForward())
btnTwo.addEventListener('click', () => spinBackward())

function spinForward(){
	degrees += 720; 
	figure.style.transform = `rotate(${degrees}deg)`
}

function spinBackward(){
  degrees -= 720; 
  figure.style.transform = `rotate(${degrees}deg)`
}