HTML

<div id="activity">
 <h1 id="counter"><span class="hits">0</span>
  <h1>Keys Hit</h1>
</div>

CSS

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;
}

Javascript

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;
};

The post Keyboard Counter Using HTML CSS and JS appeared first on csshint - A designer hub.