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)
<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>Create the HTML
- Add a <h2> header element
- Add a <p> element displaying a number
- Add 5 <button> elements
- Add an onclick attribute 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>Create a Script
- let count = 0 declares a counter
- Function updateCount() {} creates a function to update counter
- document.getElementById().innerHTML displays 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 function
- count++ increases the counter
- updateCount() diplays the counter
Example
// Function to increase the counter
function increaseCount() {
count++;
updateCount();
}4: Add a Decrease Counter Function
- Function decreaseCount() {} creates a decrease function
- count-- decreases the counter
- updateCount() diplays the counter
Example
// Function to decrease the counter
function decreaseCount() {
count--;
updateCount();
}5: Add a Reset Counter Funtion
- Function resetCount() {} creates a reset function
- count = 0 resets the counter
- updateCount() diplays the counter
Example
function resetCount() {
count = 0;
updateCount();
}6: Create a Save Counter Function
- Function saveCount() {} creates a save function
- localStorage.setItem() saves the value.
Example
function saveCount() {
localStorage.setItem("count", count);
}7: Create a Load Counter Function
- Function loadCount() {} creates a load function
- localStorage.getItem() gets the value
- Number(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
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 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.