Hey friends and welcome to another project blogpost. Today we are going to see how to make this stepper counter web app using HTML, CSS & JS.
First, let's see the general usage of this project. It's basically a simple counter with 3 functions. Those are to increase, decrease and also to reset the count. You can use this count the number of times you're doing a repetitive task.
Now let's see the source codes.
Paste the codes below in your HTML file:
<!-- Created by CodingPorium,2021. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
<title>Stepper Count Web App using JavaScript | CodingPorium</title>
</head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;;
}
body{
height: 100vh;
background-color: pink;
display: grid;
place-items:center;
}
.container{
background: rgba(255,255,255,0.25);
box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37);
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
border-radius:10px;
border:1px solid rgba(255,255,255,0.18);
position: relative;
width:80vmin;
padding:100px 40px;
box-shadow: 0 25px 40px rgba(0,0,0,0.2);
}
h1{
text-align: center;
font-family: "poppins",sans-serif;
font-size:80px;
color: black;
}
.btns{
display: flex;
justify-content: space-around;
margin-top:80px;
}
.btns button{
width:130px;
padding:15px 0;
font-size:18px;
border:none;
outline:none;
border-radius:5px;
cursor:pointer;
}
button.inc,
button.dec{
background-color: black;
color:#ffffff;
}
button.reset{
background-color: transparent;
border:4px solid black;
color:black;
}
</style>
<body>
<div class="container">
<h1 id="num">0</h1>
<div class="btns">
<button class="dec">
<i class="fas fa-minus"></i>
</button>
<button class="reset">
<i class="fas fa-redo"></i>
</button>
<button class="inc">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
</body>
<script>
//linking all html items as variables
let numContainer = document.getElementById("num");
let value = 0;
let btnInc = document.querySelector(".inc");
let btnDec = document.querySelector(".dec");
let btnReset = document.querySelector(".reset");
//code for increase button
btnInc.addEventListener("click", () => {
value++;
numContainer.textContent = value;
});
//code for decrease button
btnDec.addEventListener("click", () => {
value--;
numContainer.textContent = value;
});
//code for reset button
btnReset.addEventListener("click", () =>{
value = 0;
numContainer.textContent = value;
});
</script>
</html>
And that's all for this project. Thanks for reading and do subscribe to our YouTube channel to support us.
Till the next one, goodbye!
Post a Comment