JSFiddle - React, Tailwind, and code Playground

by nbsteuv

HTML

<div class="space">

<div class="screen">

<div class="startbutton"><h1><center>Click When Ready.</center></h1></div>

CSS

.screen{
		background-color:#FFEBCD;
		height:700px;
		width:1000px;
		border:2px black solid;
		margin:auto;
		margin-top:100px;
		z-index:2;
	}
	
	.startbutton{
		background-color:blue;
		height:100px;
		width:300px;
		border:2px black solid;
		border-radius:10px;
		margin:auto;
		margin-top:250px;
	}
	
	h1{
		color:black;
	}

	.circle{
		background-color:blue;
		height:100px;
		width:100px;
		border-radius:50px;
		position:absolute;
		z-index:3;
	}

	.space{
		height:900px;
		width:1200px;
		border:1px black solid;
		margin:auto;
		z-index:1;
	}

	.redcircle{
		background-color:red;
		height:100px;
		width:100px;
		border-radius:50px;
		position:absolute;
		z-index:3;
	}

JavaScript

var circleNumber= 0;
var circleMove= "true";

function createCircle(){
	circleNumber++;

	var circleName= "circle"+ circleNumber;
	var bodyWidth= $("body").width() - 100;
	var bodyHeight=$("body").height() - 100;

	var circlePositionLeft= (bodyWidth * Math.random()).toFixed();
	var circlePositionTop= (bodyHeight * Math.random()).toFixed();

	var newCircle= "<div class='circle' id="+circleName+"></div>";
	$("body").append(newCircle);
	$("#"+circleName).css({
		"top" : circlePositionTop+"px",
		"left" : circlePositionLeft+"px"
		});
	var circleMoveLeft= (bodyWidth * Math.random()).toFixed();
	var circleMoveTop= (bodyHeight * Math.random()).toFixed();
	$("#"+circleName).mouseenter(function(){
		$(this).attr("class", "redcircle");
		});
	animateCircle(circleName, 5000, circlePositionTop, circlePositionLeft);
	setTimeout(function(){
		createCircle();
		},4000);
	};

function animateCircle(circleId, speed, downStart, rightStart) {
	var bodyWidth= $("body").width() - 100;
	var bodyHeight=$("body").height() - 100;
	var circleMoveLeft= (bodyWidth * Math.random()).toFixed();
	var circleMoveTop= (bodyHeight * Math.random()).toFixed();
	if(circleMove=="true"){
		$("#"+circleId).animate({
			left:circleMoveLeft,
			top:circleMoveTop
			},speed, function(){
				circleMoveLeftNext= (bodyWidth * Math.random()).toFixed();
				circleMoveTopNext= (bodyHeight * Math.random()).toFixed();
				animateCircle(circleId, speed, downStart, rightStart)
					});
				};
			};

$(".startbutton").click(function(){
		createCircle();

	});