JavaScript Counter Project
A Counter with Reset and Save
In this project you will build a counter with buttons to:
- Increase the counter
- Decrease the counter
- Reset the counter
- Save the counter
- Load the counter
You will also learn how to use localStorage to save the counter and store it until next time you load the page.
HTML Code
<h2>Counter</h2>
<p id="count" style="font-size:40px;">0</p>
<button onclick="increaseCount()">+</button>
<button onclick="decreaseCount()">-</button>
<button onclick="resetCount()">Reset</button>
<button onclick="saveCount()">Save</button>
<button onclick="loadCount()">Load</button>
<script>
// JavaScript code. See below.
</script>
JavaScript Code
// Declare the counter
let count = 0;
// Function to display the counter
function updateCount() {
document.getElementById("count").innerHTML = count;
}
// Function to increase the counter
function increaseCount() {
count++;
updateCount();
}
// Function to decrease the counter
function decreaseCount() {
count--;
updateCount();
}
// Function to reset the counter
function resetCount() {
count = 0;
updateCount();
}
// Function to save the counter
function saveCount() {
localStorage.setItem("count", count);
}
// Function to load the counter
function loadCount() {
let saved = localStorage.getItem("count");
if (saved !== null) {
count = Number(saved);
}
updateCount();
}
Try it Yourself »
1. Create the HTML
- Add a
<h2>header element - Add a
<p>element displaying a number - Add 4
<button>elements - Add an
onclickattribute to each button
Example
<h2>Counter</h2>
<p id="count" style="font-size:40px;">0</p>
<button onclick="increaseCount()">+</button>
<button onclick="decreaseCount()">-</button>
<button onclick="resetCount()">Reset</button>
<button onclick="saveCount()">Save</button>
<button onclick="loadCount()">Load</button>
2. Create a Script
let count = 0declares a counterFunction updateCount() {}creates a function to update counterdocument.getElementById().innerHTMLdisplays the counter
Example
<script>
// Declare a counter
let count = 0;
// Function to display the counter
function updateCount() {
document.getElementById("count").innerHTML = count;
}
</script>
3: Add an Increase Counter Function
Function increaseCount() {}creates an increase functioncount++increases the counterupdateCount()diplays the counter
Example
// Function to increase the counter
function increaseCount() {
count++;
updateCount();
}
4: Add a Decease Counter Function
Function decreaseCount() {}creates a decrease functioncount--decreases the counterupdateCount()diplays the counter
Example
// Function to decrease the counter
function decreaseCount() {
count--;
updateCount();
}
5: Add a Reset Counter Funtion
Function resetCount() {}creates a reset functioncount = 0resets the counterupdateCount()diplays the counter
Example
function resetCount() {
count = 0;
updateCount();
}
6: Create a Save Counter Function
Function saveCount() {}creates a save functionlocalStorage.setItem()saves the value.
Example
function saveCount() {
localStorage.setItem("count", count);
}
7: Create a Load Counter Function
Function loadCount() {}creates a load functionlocalStorage.getItem()gets the valueNumber(saved)converts saved to numberstdisplays the value.updateCount()displays the value.
Example
function loadCount() {
let saved = localStorage.getItem("count");
if (saved !== null) {
count = Number(saved);
}
updateCount();
}
Note
localStorage stores values as text, so we use
Number() to convert the value back into a number.
What Have You Learned?
- How to update HTML using JavaScript
- How to use button events (onclick)
- How to store and load values from localStorage
- How to keep your code organized with functions
Exercises
Exercice 1
Make the counter start at 10 instead of 0.
Exercice 2
Prevent the counter from going below 0.
Exercice 3
Automatically load the saved counter value when the page opens.
Solutions
// Declare the counter
let count = 10;
// Load the counter when the page opens
loadCount();
// Function to display the counter
function updateCount() {
document.getElementById("count").innerHTML = count;
}
// Function to increase the counter
function increaseCount() {
count++;
updateCount();
}
// Function to decrease the counter
function decreaseCount() {
if (count > 0) {
count--;
updateCount();
}
}
// Function to reset the counter
function resetCount() {
count = 10;
updateCount();
}
// Function to save the counter
function saveCount() {
localStorage.setItem("count", count);
}
// Function to load the counter
function loadCount() {
let saved = localStorage.getItem("count");
if (saved !== null) {
count = Number(saved);
}
updateCount();
}
Try it Yourself »
Try saving the value, reload the page, and see if it load automatically.
Using an Event Listener
Using addEventListener() makes it easier to:
- keep HTML and JavaScript separated
- add multiple events to the same element
- write cleaner code in bigger projects
HTML Code
<h2>Counter</h2>
<p id="count" style="font-size:40px;">0</p>
<button id="btnPlus">+</button>
<button id="btnMinus">-</button>
<button id="btnReset">Reset</button>
<button id="btnSave">Save</button>
<button id="btnLoad">Load</button>
<script>
// JavaScript goes here
</script>
JavaScript Code
// Add event listeners
document.getElementById("btnPlus").addEventListener("click", increaseCount);
document.getElementById("btnMinus").addEventListener("click", decreaseCount);
document.getElementById("btnReset").addEventListener("click", resetCount);
document.getElementById("btnSave").addEventListener("click", saveCount);
document.getElementById("btnLoad").addEventListener("click", loadCount);
// Declare the counter
let count = 0;
// Load counter when the page opens
loadCount();
// Function to display the counter
function updateCount() {
document.getElementById("count").innerHTML = count;
}
// Function to increase the counter
function increaseCount() {
count++;
updateCount();
}
// Function to decrease the counter
function decreaseCount() {
if (count > 0) {
count--;
updateCount();
}
}
// Function to reset the counter
function resetCount() {
count = 0;
updateCount();
}
// Function to save the counter
function saveCount() {
localStorage.setItem("count", count);
}
// Function to load the counter
function loadCount() {
let saved = localStorage.getItem("count");
if (saved !== null) {
count = Number(saved);
}
updateCount();
}
Try it Yourself »
- JavaScript is moved to an external file (counter.js)
- Uses DOMContentLoaded so JavaScript runs only after HTML is ready
- Cleaner structure using small functions + element variables
- Shows a short Saved! message
- Shows a short Loaded! message
Improvements
HTML Code
<!DOCTYPE html>
<html>
<body>
<h2>Counter</h2>
<p id="count" style="font-size:40px;">0</p>
<button id="btnPlus">+</button>
<button id="btnMinus">-</button>
<button id="btnReset">Reset</button>
<button id="btnSave">Save</button>
<button id="btnLoad">Load</button>
<script src="counter.js"></script>
</body>
</html>
Note
Notice that the <script> tag is placed at the bottom, before
</body>.
counter.js
document.addEventListener("DOMContentLoaded", function () {
// Declare the counter
let count = 0;
// Use element variables
const countEl = document.getElementById("count");
const msgEl = document.getElementById("message");
const btnPlus = document.getElementById("btnPlus");
const btnMinus = document.getElementById("btnMinus");
const btnReset = document.getElementById("btnReset");
const btnSave = document.getElementById("btnSave");
const btnLoad = document.getElementById("btnLoad");
// Add event listeners
btnPlus.addEventListener("click", increaseCount);
btnMinus.addEventListener("click", decreaseCount);
btnReset.addEventListener("click", resetCount);
btnSave.addEventListener("click", saveCount);
btnLoad.addEventListener("click", loadCount);
// Function to display the counter
function updateCount() {
document.getElementById("count").innerHTML = count;
}
// Function to diplay message
function showMessage(text) {
msgEl.innerHTML = text;
setTimeout(function () {
msgEl.innerHTML = "";
}, 3000);
}
// Function to increase the counter
function increaseCount() {
count++;
updateCount();
}
// Function to decrease the counter
function decreaseCount() {
count--;
updateCount();
}
// Function to reset the counter
function resetCount() {
count = 0;
updateCount();
}
// Function to save the counter
function saveCount() {
localStorage.setItem("count", count);
showMessage("Saved!");
}
// Function to load the counter
function loadCount() {
let saved = localStorage.getItem("count");
if (saved !== null) {
count = Number(saved);
showMessage("Loaded!");
}
updateCount();
}
});
Try it Yourself »
JavaScript in External File
Using counter.js makes your project:
- More organized
- Easier to read
- Easier to reuse
- More like real-world projects
DOMContentLoaded
Why use DOMContentLoaded?
When you use an external JavaScript file, the browser may load the script before the HTML is ready.
So we use:
document.addEventListener("DOMContentLoaded", function () {
...
});
This means
Run the JavaScript after the page has finished loading the HTML.
