Design a Simple Counter App using HTML CSS and JavaScript
Counter App is used to increment or decrement or reset the value. We are going to use HTML,CSS and JavaScript to design this app. It consists of 3 buttons. One button is used for incrementing the value, the other is used to decrement the value and the 3rd button is used to reset the value to 0.
HTML is used to create and structure the website. CSS is used to style and format the structure of HTML code. JavaScript creates the display area and the buttons. It is used to increment, decrement and reset the counter value.
HTML code
Html stands for Hypertext markup Language. It is used to create and design the structure of your website.
<html> <head> <title>Counter App</title><link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>Counter App</h1> <div class="counter"> <button id="increment-btn">+</button> <div id="counter-value">0</div> <button id="decrement-btn">-</button> </div> <button id="reset">Reset</button> </div> <script src="script.js"></script> </body> </html>
CSS code
CSS stands for Cascading Style Sheet, it is used to style and layout the web pages. It describes how the html elements should be displayed.
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
.container {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container h1 {
margin: 30px;
}
.counter {
width: 30%;
display: flex;
justify-content: center;
}
#increment-btn,
#decrement-btn,
#reset {
height: 50px;
width: 120px;
padding: 0 40px;
border-radius: 10px;
font-size: 40px;
background-color: #6495ED;
border: 2px solid #6495ED;
color: white;
margin: 20px;
}
#reset {
font-size: 20px;
}
#counter-value {
height: 50px;
min-width: 120px;
border-radius: 10px;
background-color: rgba(255, 0, 0, 0.187);
margin-top: 20px;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
}
JavaScript Code
JavaScript can also be written as JS, it is used to make web pages interactive. It allows developers to create dynamically updating content. It keeps the track of numerical values. And it is used to increment, decrement and reset the values.
let counter =0;
const counterValue = document.getElementById('counter-value');
const incrementBtn = document.getElementById('increment-btn');
const decrementBtn = document.getElementById('decrement-btn');
const resetBtn = document.querySelector('#reset');
incrementBtn.addEventListener('click', () => {
counter++;
counterValue.innerHTML = counter;
});
decrementBtn.addEventListener('click', () => {
counter--;
counterValue.innerHTML = counter;
});
resetBtn.addEventListener('click', reset);
function reset() {
counter = 0;
counterValue.innerHTML = counter;
}
OUTPUT
http://C:\Users\allen\OneDrive\Pictures\Screenshots\counterapp.JPG