Loading lesson path
In this project you will build a counter with buttons to:
+
JavaScript Events (onclick attributes) JavaScript localStorage (to
Formula
< 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>
// 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();
}<h2> header element
<p> element displaying a number
<button> elements
Formula
< 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 = 0 declares a counter
Function updateCount() {}
creates a function to update counter document.getElementById().innerHTMLdisplays the counter
<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
// Function to increase the counter function increaseCount() {
count++;
updateCount();
}4: Add a Decease Counter Function
Function decreaseCount() {}creates a decrease function count-- decreases the counter updateCount() diplays the counter