Table of Contents
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
Now we have completed our javascript section, Here is our updated output with javascript. Hope 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.