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>

<div class="timer"><h1><center>0.00</center></h1></div>

<div class="stopbutton"><h1><center>Stop</center></h1></div>

</div>

</div>

<div id="highscores">

	<h1><center>High Scores</center></h1>

</div>

CSS

body{
		background-color:black;
	}

	.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{
		z-index:1;
	}

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

	.stopbutton{
		background-color:red;
		height:100px;
		width:300px;
		border:2px black solid;
		border-radius:10px;
		margin:auto;
		margin-top:0px;
	}

	#highscores{
		background-color:yellow;
		height:600px;
		width:600px;
		margin:auto;
		margin-top:-800px;
		position: relative;
		z-index:9;
		display:none;
	}

	.resetbutton{
		background-color:green;
		height:100px;
		width:300px;
		border:2px black solid;
		border-radius:10px;
		margin:auto;
		margin-top:0px;
		position:relative;
		z-index: 10;
	}

JavaScript

$(document).ready(function(){

var spaceWidth= $(document).width();
var spaceHeight= $(document).height();

var resetButton= "<div class='resetbutton'><h1><center>Play Again</center></h1></div>";

var highScore1= 5;
var highScore2= 4;
var highScore3= 3;
var highScore4= 2;
var highScore5= 1;

$("#highscores").slideUp(1);

$(".space").css({
		"width":spaceWidth,
		"height":spaceHeight
});

var i = 0;
var starttimer= "false";

function timer(){
		if(starttimer=="true"){
			setTimeout(function(){
				i=i+0.01;
				$(".timer").html("<h1><center>"+ i.toFixed(2) + "</center></h1>");
				timer();
			},10);
		};
};

function darken(element){
		$(element).css("opacity", "0.1");
};

function updateScores(newScore){

	if(newScore > highScore1){
		var redScore="score1";
		highScore5=highScore4;
		highScore4=highScore3;
		highScore3=highScore2;
		highScore2=highScore1;
		highScore1=newScore;
	}else if(newScore > highScore2){
		var redScore="score2";
		highScore5=highScore4;
		highScore4=highScore3;
		highScore3=highScore2;
		highScore2=newScore;
	}else if(newScore > highScore3){
		var redScore="score3";
		highScore5=highScore4;
		highScore4=highScore3;
		highScore3=newScore;
	}else if(newScore > highScore4){
		var redScore="score4";
		highScore5=highScore4;
		highScore4=newScore;
	}else if(newScore > highScore5){
		var redScore="score5";
		highScore5=newScore;
	};

	var highScorePlace1= "<div class='score' id='score1'><h1><center>" + highScore1.toFixed(2) + "</center></h1></div>";
	var highScorePlace2= "<div class='score' id='score2'><h1><center>" + highScore2.toFixed(2) + "</center></h1></div>";
	var highScorePlace3= "<div class='score' id='score3'><h1><center>" + highScore3.toFixed(2) + "</center></h1></div>";
	var highScorePlace4= "<div class='score' id='score4'><h1><center>" + highScore4.toFixed(2) + "</center></h1></div>";
	var highScorePlace5= "<div class='score' id='score5'><h1><center>" + highScore5.toFixed(2) +...