Keyboard Hit Counter |  Keyboard Counter Using Html Css javascript 

Welcome🎉 to Code With Random blog. In this blog, we learn that how we create a Keyboard Hit Counter. We use HTML, Css, and javascript for this Keyboard Hit Counter. Hope you enjoy our blog so let’s start with a basic HTML structure for a Keyboard Hit Counter.

HTML code

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

There is all HTML code for the Keyboard Hit Counter. Now, you can see output without CSS, then we write css & javascript for the Keyboard Hit Counter.

 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: "Codewithrandom";  
  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;  
 }  

Here is our updated output CSS.

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

Final output