JS Projects New

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>

1. 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>

2. 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();

}

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();

}

Note: Try saving the value, reload the page, and see if it load automatically.

Note: JavaScript Projects JavaScript Counter A counter project with restore and save in localStorage. JavaScript Event Listener The counter project using event listener instead of onclick. JavaScript To-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. JavaScript Form Validation An HTML Form with form validation.