Project - Event Listener

Using an Event Listener

Now using

Event Listeners instead of

Reset

Save

Load

Using Event Listeners

Keep HTML and JavaScript separated

Add multiple events to the same element

Write cleaner code in bigger projects

HTML Code

< h2 > Counter </h2 >

<p id="count" style="font-size:40px;">0</p>
<button id="btnPlus">+</button>
<button id="btnMinus">-</button>
<button id="btnReset">Reset</button>
<button id="btnSave">Save</button>
<button id="btnLoad">Load</button>

JavaScript Code

// Add event listeners document.getElementById("btnPlus").addEventListener("click", increaseCount);
document.getElementById("btnMinus").addEventListener("click", decreaseCount);
document.getElementById("btnReset").addEventListener("click", resetCount);
document.getElementById("btnSave").addEventListener("click", saveCount);
document.getElementById("btnLoad").addEventListener("click", loadCount);
// Declare the counter let count = 0;
// Load 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 = 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();
}

Improvements

Uses

Cleaner structure using small functions + element variables

Shows a short

Shows a short

HTML Code

< h2 > Counter </h2 >

<p id="count" style="font-size:40px;">0</p>
<button id="btnPlus">+</button>
<button id="btnMinus">-</button>
<button id="btnReset">Reset</button>
<button id="btnSave">Save</button>
<button id="btnLoad">Load</button>
<script  src="counter.js"></script>

Notice that the

counter.js document.addEventListener("DOMContentLoaded", function () {
// Declare the counter let count = 0;
// Use element variables const countEl = document.getElementById("count");
const msgEl = document.getElementById("message");
const btnPlus = document.getElementById("btnPlus");
const btnMinus = document.getElementById("btnMinus");
const btnReset = document.getElementById("btnReset");
const btnSave = document.getElementById("btnSave");
const btnLoad = document.getElementById("btnLoad");
// Add event listeners btnPlus.addEventListener("click", increaseCount);
btnMinus.addEventListener("click", decreaseCount);
btnReset.addEventListener("click", resetCount);
btnSave.addEventListener("click", saveCount);
btnLoad.addEventListener("click", loadCount);
// Function to display the counter function updateCount() {
document.getElementById("count").innerHTML = count;
}
// Function to diplay message function showMessage(text) {
msgEl.innerHTML = text;
setTimeout(function () {
msgEl.innerHTML = "";
}, 3000);
}
// 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);
showMessage("Saved!");
}
// Function to load the counter function loadCount() {
let saved = localStorage.getItem("count");
if (saved !== null) {
count = Number(saved);
showMessage("Loaded!");
}
updateCount();
}
});

JavaScript in External File

More Organized

Keep HTML and JavaScript separated

Easier to read and to reuse

More like real-world projects

DOMContentLoaded