JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="content/css/main.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script>
</script>
</head>
<body>
<div id="wrapper">
<div id="timer"><span id="time"></span></div>
<div id="playArea">
<div id="target" class="rand"></div>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0px;
padding: 0px;
}
#wrapper{
width: 100%;
height: 100vh;
background-color:#1b1b1b;
padding-top: 150px;
}
#playArea{
width: 720px;
height: 560px;
background-color:#f2f2f2;
margin-left: auto;
margin-right: auto;
position:relative;
}
#timer {
background-color: red;
width: 720px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#timer span{
padding: 20px;
color: white;
text-align: center;
font-size: 2rem;
}
#target{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
}
JavaScript
$(document).ready(function test () {
$(document).on('click', '#target', function clicker() {
$('#target').css('left', randPosX);
$('#target').css('top', randPosY);
clearInterval(fire)
timeLeft = 2;
});
//Random
var bodyWidth = $("#playArea").width();
var bodyHeight = $("#playArea").height();
var randPosX = Math.floor((Math.random() * bodyWidth / 1.1));
var randPosY = Math.floor((Math.random() * bodyHeight / 1.1));
//TIMER
var timeLeft = 2;
var elem = document.getElementById('time');
var timerId = setInterval(countdown, 1000);
function countdown() {
if (timeLeft == 0) {
doSomething();
timeLeft = 5;
} else {
elem.innerHTML = timeLeft + ' seconds remaining';
timeLeft--;
}
}
function doSomething() {
$('#target').css('left', randPosX);
$('#target').css('top', randPosY);
clearInterval(timerId);
}
var fire = setInterval(test, 2000);
});