Keyboard Hit Counter | Keyboard Counter Using Html Css javascript







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.

output

Keyboard Hit Counter |  Keyboard Counter Using Html Css javascript

CSS Code

 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.

output

Keyboard Hit Counter |  Keyboard Counter Using Html Css javascript

Javascript code 

 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

Keyboard Hit Counter |  Keyboard Counter Using Html Css javascript


Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the  Keyboard Hit Counter. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create a Keyboard Hit Counter using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

Codepen by – Braxtoony

Share on:

Leave a Comment