Hey friends, do check out the tutorial video of this project on my YouTube channel and do subscribe to support. Thanks!
<!--Created by CodingPorium,2022. Visit https://youtube.com/c/codingporium for more tutorials like this with free source code-->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Keyboard Click Counter using HTML,CSS & JS | CodingPorium</title>
</head>
<style>
/*Import Poppins Font*/
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
/*set colours*/
:root{
--primary-color:#3624ff;
--secondary-color:#b3baff;
}
body{
background: var(--secondary-color);
margin:0;
font-family: poppins;
position: absolute;
width:100vw;
height:100vw;
overflow: hidden;
display: table;
}
#activity{
display: table-cell;
text-align:center;
vertical-align: middle;
}
#activity:before{
content:"Try clicking any Key on your Keyboard";
position: absolute;
top:-1;
left:0;
width:100vw;
height:10vh;
background: rgba(10,10,10,10,10);
}
#result{
text-transform:uppercase;
}
/*style for the clicks number*/
.hits{
color:var(--primary-color);
font-size:5.75em;
font-weight:bolder;
}
</style>
<body>
<div id="activity">
<h1 id="counter"><span class="hits">0</span></h1>
<h1>Keys Clicked</h1>
</div>
</body>
<script>
//set default clicks as 0
var hits=0;
//to detect clicks
var hitElement = document.querySelector(".hits");
document.body.onekeyup = function(e){
if ((e.keyCode == 1, 2, 3, 4, 5, 6, 7, 8, 9, 10)){
addHit();
}
};
//total up all clicks
var addHit = function(){
hits++
renderHits();
};
//to display the clicks number on our html code
var renderHits = function(){
hitElement.innerHTML = hits;
};
</script>
</html>
Thanks! Do also check out my Instagram for coding posts and memes!
Post a Comment