Project - localStorage Counter
In this project you will build a counter with buttons to:
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
+ - Reset Save Load
Project Skills
- JavaScript Variables
- JavaScript Functions
- JavaScript HTML DOM
- JavaScript Events (onclick attributes)
- JavaScript localStorage (to Save and Restore the counter)
HTML Code
Example Code
html## Counter
0
+
-
Reset
Save
Load
// JavaScript code. See below.1. Create the HTML
- Add a header element
- Add a
element displaying a number - Add 5 elements - Add an onclick attribute to each button ### Example ```html ## Counter 0
+
-
Reset
Save
Load
Example Code
html---
## 2. Create a Script
- let count = 0 declares a counter
- Function updateCount() {} creates a function to update counter
### Examplehtml
// Declare a counter
let count = 0;
// Function to display the counter
function updateCount() {
document.getElementById("count").innerHTML = count;
}
Example Code
html---
## 3: Add an Increase Counter Function
- Function increaseCount() {} creates an increase function
- count++ increases the counter
- updateCount() diplays the counter
### Examplejavascript // Function to increase the counter
function increaseCount() {
count++;
updateCount();
}
Example Code
html---
## 4: Add a Decrease Counter Function
- Function decreaseCount() {} creates a decrease function
- count-- decreases the counter
- updateCount() diplays the counter
### Examplejavascript // Function to decrease the counter
function decreaseCount() {
count--;
updateCount();
}
Example Code
html---
## 5: Add a Reset Counter Funtion
- Function resetCount() {} creates a reset function
- count = 0 resets the counter
- updateCount() diplays the counter
### Examplejavascript function resetCount() {
count = 0;
updateCount();
}
Example Code
html---
## 6: Create a Save Counter Function
- Function saveCount() {} creates a save function
- localStorage.setItem() saves the value.
### Examplejavascript function saveCount() {
localStorage.setItem("count", count);
}
Example Code
html---
## 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.
### Examplejavascript function loadCount() {
let saved = localStorage.getItem("count");
if (saved !== null) {
count = Number(saved);
}
updateCount();
}
Example Code
html---
## 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.
### Solutionsjavascript // 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();
} ```
Interactive Code Examples
HTML Code
htmlJS Example 2
html<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>JS Example 3
html<script>
// Declare a counter
let count = 0;
// Function to display the counter
function updateCount() {
document.getElementById("count").innerHTML = count;
}
</script>JS Example 4
javascript// Function to increase the counter
function increaseCount() {
count++;
updateCount();
}JS Example 5
javascript// Function to decrease the counter
function decreaseCount() {
count--;
updateCount();
}JS Example 6
javascriptfunction resetCount() {
count = 0;
updateCount();
}