random animation

by Nabaraj Saha

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<div id="result">test</div>

CSS

#result{
  width:120px;
  height:120px;
  background-color:green;
  transition:all 1s linear;
  position:absolute;
  text-shadow:0px 0px 0px 4px #000000;
  color:#ffffff;
}

JavaScript

function sleep(duration) {
	return new Promise(resolve => {
		setTimeout(() => {
			resolve()
		}, duration * 1000)
	})
}
function randomNo(){
return Math.floor(Math.random()*100)
}
function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
async function runDiv(){
	let top = randomNo(), left=randomNo(), color=`${getRandomColor()}`;
  
  
	$("#result").css({"left":left+"%","top":top+"%", "background-color":color}).text(`left:${left}%, top:${top}%, ${color}`);
  
  await sleep(5);
  /* $("#result").css({"left":"0"} );*/
  /* await sleep(1) */;
  runDiv();
}
runDiv();