Counter
Hello friends welcome to my blog
Friends, my name is Shubham Verma and today we will learn to make counter with the help of html, css, javascript.
Description:- Hello friends, my name is Shubham Verma, welcome to my YouTube channel, today we will make a counter with the help of HTML, CSS and JavaScript, watch the full video and subscribe the channel and like the video if you like it, thank you
Step.1:
Open visual studio code and create file. Press ctrl+alt+window+n key and file name Caunter.html and save the file on desktop.
Step.2:-
Press key shift+! and enter to find html structure then.
Step.3:-
Copy this code and watch my youtube videos.
Step.4:-
<!--Counter project code-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
padding: 0%;
margin: 0%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.card{
margin-top: 200px;
padding: 50px;
background-color: aliceblue;
height: 250px;
border: 10px;
border-color: black;
border-radius: 20px;
width: 400px;
}
.btn{
margin-top: 20px;
font-size: 18px;
color: white;
height: 40px;
font-weight: 600;
margin-left: 5px;
margin-right: 5px;
padding-left: 5px;
padding-right: 5px;
border-radius: 5px;
background-color: blueviolet;
border: 2px solid black;
margin-bottom: 10px;
}
.btn:hover{
background-color: white;
color: black;
}
#show{
font-size: 60px;
font-weight: 800;
}
</style>
<body>
<div class="container">
<center>
<div class="card">
<h1 style="font-size: 50px;">CAUNTER</h1>
<span id ="show">0</span>
<div class="button">
<button class="btn Increase">Increase</button>
<button class="btn Reset">Reset</button>
<button class="btn Decrease">Decrease</button>
</div>
</div>
</center>
</div>
</body>
<script>
let caunt = 0;
const show = document.querySelector('#show');
const btns = document.querySelectorAll('.btn');
btns.forEach(function(btn){
btn.addEventListener("click",function(e){
const styles = e.currentTarget.classList;
if(styles.contains("Increase")){
caunt ++;
}
else if(styles.contains("Decrease")){
caunt --;
}
else{
caunt = 0;
}
if(caunt > 0){
show.style.color = "red";
}
if(caunt < 0){
show.style.color = "green";
}
if(caunt === 0){
show.style.color = "black";
}
show.textContent = caunt;
});
});
btns.add
</script>
</html>