Counter app using HTML | CSS | JS
Hello! Let's learn how to build a cool looking and simple counter
application.
This is a simple yet interesting project where we learn about using
Gradient property in CSS. Also we include basic JavaScript to
add functionality to increment count when button is clicked.
Please follow the below code and get started 💻.
HTML Code
<body>
<div class="container">
<h2 class="title">Counter</h2>
<form>
<input type="text" value="0" readonly id="input">
<div class="btns">
<button type="button" id="count" class="btn" onclick="countFunc()">Count</button>
<button type="reset" id="reset" class="btn">Reset</button>
</div>
</form>
</div>
</body>CSS Code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
min-height: 100vh;
background-color: #fefefe;
display: flex;
}
.container {
margin: auto;
}
.title {
font-weight: 100;
text-align: center;
color: #333;
letter-spacing: 0.6rem;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
form {
background-color: #fff;
box-shadow: 0 4px 20px rgba(0,0,0,.1);
padding: 2.4rem 3rem;
border-radius: 8px;
background: linear-gradient(-135deg, #5728a3, #22244a);
}
input {
position: relative;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 120px;
border-radius: 50%;
border: none;
text-align: center;
font-size: 1.5rem;
background: linear-gradient(45deg, #5728a3, #22244a);
color: #fff;
}
.btns {
margin-top: 1.4rem;
display: flex;
align-items: center;
justify-content: center;
}
.btn {
border: none;
outline: none;
background-color: #5728a3;
margin: 0 0.5rem;
padding: 8px 14px;
cursor: pointer;
color: #fff;
border-radius: 4px;
}
.btn:active {
transform: scale(0.96);
}
JavaScript Code
const count = document.getElementById('count');
let input = document.getElementById('input');
const countFunc = () => {
input.value = ++input.value;
}Output
Code by - AltafAlam Shaikh
Topic covered - linear-gradient in Css, Increment value in JS,
Reset button in Html.
Technologies used - HTML5, CSS, JavaScript
Font used - Poppins (https://fonts.google.com/specimen/Poppins)