Skip to content

Instantly share code, notes, and snippets.

@Terron23

Terron23/index.html

Created October 16, 2017 17:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Terron23/a851f1c04d661892b14a64da14109659 to your computer and use it in GitHub Desktop.
Save Terron23/a851f1c04d661892b14a64da14109659 to your computer and use it in GitHub Desktop.
Download ZIP
Test Your Reaction Time
Raw
index.html
<body id='random'>
<center>
<h1>Test Your Reaction</h1>
<p>Click on the boxes and circles as quickly as you can.</p>
<h2><b>Your Time: <span id="react">0.000</span></b></h2>
<div class="container" id='div1'>
<br>
<br>
</div></center>
</body>
Raw
script.js
var whenClicked;
var timeCreated;
var reactTime;
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function makeCircle() {
var circ = 80;
return circ + 'px';
}
function appear(){
var time = Math.random();
time = time * 4000;
setTimeout(function() {
if(Math.random() > 0.5) { document.getElementById('div1').style.borderRadius = '150px';
}
else {
document.getElementById('div1').style.borderRadius = '0px';
}
var top = Math.random();
top = 200 * top;
var left = Math.random();
left = 200 * left;
var right = Math.random();
right = 600 * right;
var bottom = Math.random();
bottom = 800 * bottom;
document.getElementById("div1").style.top = top + 'px';
document.getElementById("div1").style.left = left +'px';
document.getElementById("div1").style.marginLeft = right + 'px';
document.getElementById("div1").style.marginBottom = bottom +'px';
document.getElementById("div1").style.display = "block"
timeCreated = Date.now();
}, time);
}
document.getElementById("div1").onclick = function (){
whenClicked = Date.now();
reactTime = (whenClicked - timeCreated) / 1000;
if(isNaN(reactTime)===true) {
document.getElementById("react").innerHTML = 'Click Again';
}
else {
document.getElementById("react").innerHTML = reactTime + "s";
}
this.style.display = "none";
this.innerHTML = "";
appear();
document.getElementById('random').style.background = getRandomColor();
}
Raw
scripts
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Raw
style.css
body {
font-family: sans-serif
}
#div1{
border: solid 2px black;
height: 300px;
width: 300px;
background-color: red;
position: relative;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment