Project - localStorage Counter
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
0
Project Skills
- JavaScript Variables
- JavaScript Functions
- JavaScript HTML DOM
- JavaScript Events (onclick attributes)
- JavaScript localStorage (to Save and Restore the counter)
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();
}
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.
JavaScript Projects
- JavaScript Counter
A counter project with restore and save in lovalStorage. - JavaScript Event Listener
The counter project using event listener instead of onclick. - JavaScript Do-Do List
A do-do list saved in an array in local storage. - JavaScript Modal Popup
A modal popup window that appears on top of the page.
