Flash cards
Review the key moves
1/4
Core idea
What is the main idea behind Project - localStorage Counter?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
1Quick choice
Which statement best captures the main point of this lesson?
2Fill blank
Complete the missing token from the example code.
<h2>___</h2>3Order
Put the learning moves in the order that makes the concept easiest to apply.
4: Add a Decrease Counter Function
3: Add an Increase Counter Function
A Counter with Reset and Save
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.