How to create a Counter
To create a counter using JavaScript, you'll need to update a variable and display its value on a webpage. Here's an example of how you can create a simple counter:
1. Set up your HTML structure:
<!Doctype html>
<!DOCTYPE html>
<html>
<head>
<title>Counter Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="counter">
<button id="decrement">-</button>
<span id="count">0</span>
<button id="increment">+</button>
</div>
<script src="script.js"></script>
</body>
</html>2. Create a CSS file (styles.css) to style the counter:
css
.counter {
display: flex;
align-items: center;
justify-content: center;
}
.counter button {
padding: 10px;
font-size: 16px;
background-color: #f0f0f0;
border: none;
cursor: pointer;
}
.counter span {
margin: 0 10px;
font-size: 24px;
}3. Now, create a JavaScript file (script.js) to handle the counter functionality:
javascript
document.addEventListener('DOMContentLoaded', function () {
const decrementButton = document.getElementById('decrement');
const incrementButton = document.getElementById('increment');
const countElement = document.getElementById('count');
let count = 0;
function updateCount() {
countElement.textContent = count;
}
function increment() {
count++;
updateCount();
}
function decrement() {
if (count > 0) {
count--;
updateCount();
}
}
// Add click event listeners to the buttons
incrementButton.addEventListener('click', increment);
decrementButton.addEventListener('click', decrement);
// Update the count initially
updateCount();
});4. Place all the files (HTML, CSS, and JS) in the same folder.
Open the HTML file in a web browser, and you should see a counter with increment and decrement buttons. Clicking the "+" button will increment the count, and clicking the "-" button will decrement the count. The current count will be displayed on the webpage.
You can customize the counter further by adding additional functionality, such as setting a maximum or minimum value, adding animations, or integrating it with other parts of your webpage.
Output:
About the Author
Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.
We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc
PreviousNext
Join our newsletter for the latest updates.
About us
Our Services
Contact Us
Our Courses
Learn Python | Learn AI | Learn Machine Learning | Learn Deep Learning | Learn Core Java | Learn Java JSP | Learn Java Servlet | Learn Java Spring Core | Learn Spring Boot | Learn Power BI | Learn DAA | Learn HTML | Learn SQL | Learn C Programming | Learn Bootstrap | Learn Git | Learn JavaScript | Learn Data Structure Using C | Learn RDBMS | Learn Data Science | Learn PHP
Our Tutorials
Python Tutorial | AI Tutorial | Machine Learning Tutorial | Deep Learning Tutorial | Core Java Tutorial | Java JSP Tutorial | Java Servlet Tutorial | Java Spring Tutorial | Spring Boot Tutorial | Power BI Tutorial | DAA Tutorial | HTML Tutorial | SQL Tutorial | C Programming Tutorial | Bootstrap Tutorial | Git Tutorial | JavaScript Tutorial | Data Structure Using C Tutorial | RDBMS Tutorial | Data Science Tutorial | PHP Tutorial
Copyright © 2023 Pythontpoint Powered by Silan Software Pvt. Ltd. All rights reserved.