<div id="activity">
<img src="http://code.quirkbot.com/assets/images/logo/white-outline.svg" width="30%" alt="">
<h1 id="counter"><span class="hits">0</span>
<h1>Keys Hit</h1>
</div>
body {
margin: 0;
font-family: "Open Sans", comic-sans;
position: absolute;
width: 100vw;
height: 100vh;
overflow: hidden;
display: table;
}
#activity {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#activity:before {
content: "Hit Any Key On Your Keyboard";
position: absolute;
top: -1;
left: 0;
width: 100vw;
height: 10vh;
background: rgba(10, 10, 10, 10, 10);
}
#activity:after {
content: "braxtoony";
position: absolute;
bottom: 0;
left: 0;
width: 100vw;
height: 12vh;
}
#result {
text-transform: uppercase;
}
a:link,
a:hover,
a:visited,
a:active {
text-decoration: bold;
}
.hits {
font-size: 5.75em;
font-weight: bolder;
}
var hits = 0;
var hitElement = document.querySelector(".hits");
document.body.onkeyup = function (e) {
if ((e.keyCode == 1, 2, 3, 4, 5, 6, 7, 8, 9, 10)) {
addHit();
}
};
var addHit = function () {
hits++;
renderHits();
};
var renderHits = function () {
hitElement.innerHTML = hits;
};
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.