optimized leaderboard for better DOM repaint, separation of logic

Author: rohitjainfsl

leaderBoard-simple/index.html

@@ -23,7 +23,13 @@
  <div id="wrapper">
  <div id="leaderboard">
  <form action="">
- <input id="fname" type="text" placeholder="First Name" required autofocus />
+ <input
+ id="fname"
+ type="text"
+ placeholder="First Name"
+ required
+ autofocus
+ />
  <input id="lname" type="text" placeholder="Last Name" required />
  <select name="" id="" required>
  <option value="" selected disabled>Select Country</option>
@@ -33,15 +39,10 @@
  <option value="South Africa">South Africa</option>
  <option value="New Zealand">New Zealand</option>
  </select>
- <input
- id="score"
- type="text"
- placeholder="Enter Score"
- required
- />
+ <input id="score" type="text" placeholder="Enter Score" required />
  <button type="submit">Add</button>
  </form>
- 
+
  <div class="board"></div>
  </div>
  </div>

leaderBoard-simple/scripts.js

@@ -1,123 +1,154 @@
+// --- DOM Element Selection ---
 const form = document.querySelector("form");
-const firstName = document.querySelector("#fname");
-const lastName = document.querySelector("#lname");
-const country = document.querySelector("select");
-const score = document.querySelector("#score");
+const firstNameInput = document.querySelector("#fname");
+const lastNameInput = document.querySelector("#lname");
+const countryInput = document.querySelector("select");
+const scoreInput = document.querySelector("#score");
 const board = document.querySelector(".board");
 
-form.addEventListener("submit", addRecord);
-
+// --- State Management ---
 let leaderBoard = [];
+let nextId = 1;
+
+// --- Functions ---
+
+/**
+ * Creates a DOM element for a single player record.
+ * This function is purely for creating UI and does not attach event listeners.
+ * @param {object} player - The player data object.
+ * @returns {HTMLElement} The player record div.
+ */
+function createPlayerElement(player) {
+ const playerRecord = document.createElement("div");
+ playerRecord.classList.add("playerRecord");
+ // Use a data attribute to easily identify the record later
+ playerRecord.dataset.id = player.id;
+
+ const name = document.createElement("p");
+ name.classList.add("name");
+ name.textContent = player.name;
+
+ const country = document.createElement("p");
+ country.classList.add("country");
+ country.textContent = player.country;
+
+ const score = document.createElement("p");
+ score.classList.add("score");
+ score.textContent = player.score;
+
+ const icons = document.createElement("div");
+ icons.innerHTML = `
+ <i class="fa-solid fa-trash" data-action="delete"></i>
+ <span class="plus-five" data-action="increase">+5</span>
+ <span class="minus-five" data-action="decrease">-5</span>
+ `;
+ icons.classList.add("icons");
+
+ playerRecord.append(name, country, score, icons);
+ return playerRecord;
+}
 
-function addRecord(e) {
- e.preventDefault();
- const playerRecord = {};
- playerRecord["id"] = leaderBoard.length + 1;
- playerRecord["name"] = firstName.value + " " + lastName.value;
- playerRecord["country"] = country.value;
- playerRecord["score"] = Number(score.value);
- leaderBoard.push(playerRecord);
-
- //SORTING LEADERBOARD
- sortLeaderBoard();
+/**
+ * Sorts and renders the entire leaderboard to the DOM.
+ * Uses a DocumentFragment to minimize reflows and repaints.
+ */
+function renderLeaderboard() {
+ // Sort the data first
+ leaderBoard.sort((a, b) => b.score - a.score);
 
- //PRINTING LEADERBOARD
- printLeaderBoard();
+ // Clear the board
+ board.innerHTML = "";
 
- //RESETTING THE FORM
- clearInputs();
+ // Use a DocumentFragment for efficient batch updating
+ const fragment = document.createDocumentFragment();
+ leaderBoard.forEach((player) => {
+ const playerElement = createPlayerElement(player);
+ fragment.appendChild(playerElement);
+ });
 
- firstName.focus();
+ // Append the fragment to the board in a single operation
+ board.appendChild(fragment);
 }
 
+/**
+ * Resets the form input fields.
+ */
 function clearInputs() {
- firstName.value = "";
- lastName.value = "";
- country.value = "";
- score.value = "";
+ form.reset(); // A more concise way to clear a form
+ firstNameInput.focus();
 }
 
-function sortLeaderBoard() {
- leaderBoard.sort((a, b) => {
- return Number(b.score) - Number(a.score);
- });
-}
+// --- Event Handlers ---
 
-function printLeaderBoard() {
- board.innerText = "";
- leaderBoard.forEach((player) => {
- const playerRecord = document.createElement("div");
- playerRecord.classList.add("playerRecord");
-
- const name = document.createElement("p");
- name.classList.add("name");
- name.innerText = player.name;
-
- const country = document.createElement("p");
- country.classList.add("country");
- country.innerText = player.country;
-
- const score = document.createElement("p");
- score.classList.add("score");
- score.innerText = player.score;
-
- const icons = document.createElement("div");
- icons.classList.add("icons");
-
- const trash = document.createElement("i");
- trash.classList.add("fa-solid", "fa-trash");
- trash.addEventListener("click", () => {
- deleteRecord(player.id);
- });
-
- const plus = document.createElement("span");
- plus.innerText = "+5";
- plus.addEventListener("click", () => {
- plusMinusScore(player.id, "+");
- });
-
- const minus = document.createElement("span");
- minus.innerText = "-5";
- minus.addEventListener("click", () => {
- plusMinusScore(player.id, "-");
- });
-
- icons.append(trash);
- icons.append(plus);
- icons.append(minus);
-
- playerRecord.append(name);
- playerRecord.append(country);
- playerRecord.append(score);
- playerRecord.append(icons);
-
- board.append(playerRecord);
- });
-}
+/**
+ * Handles the form submission to add a new player.
+ * @param {Event} e - The submit event.
+ */
+function handleAddRecord(e) {
+ e.preventDefault();
 
-function deleteRecord(id) {
- leaderBoard = leaderBoard.filter((player) => player.id !== id);
+ const firstName = firstNameInput.value.trim();
+ const lastName = lastNameInput.value.trim();
+ const country = countryInput.value;
+ const score = Number(scoreInput.value);
 
- sortLeaderBoard();
+ if (!firstName || !lastName || !country || isNaN(score)) {
+ alert("Please fill in all fields correctly.");
+ return;
+ }
 
- printLeaderBoard();
+ const newPlayer = {
+ id: nextId++, // Use a reliable, incrementing ID
+ name: `${firstName} ${lastName}`,
+ country: country,
+ score: score,
+ };
+
+ leaderBoard.push(newPlayer);
+ renderLeaderboard();
+ clearInputs();
 }
 
-function plusMinusScore(id, symbol) {
- if (symbol === "+") {
- leaderBoard.map((player) => {
- if (player.id === id) {
- player.score += 5;
- }
- });
- } else {
- leaderBoard.map((player) => {
- if (player.id === id) {
- player.score -= 5;
- }
- });
+/**
+ * Handles clicks on the leaderboard for deleting or updating scores
+ * using event delegation.
+ * @param {Event} e - The click event.
+ */
+function handleBoardClick(e) {
+ const action = e.target.dataset.action;
+ if (!action) return; // Exit if the click was not on an action element
+
+ const playerRecordElement = e.target.closest(".playerRecord");
+ if (!playerRecordElement) return;
+
+ const playerId = Number(playerRecordElement.dataset.id);
+
+ switch (action) {
+ case "delete":
+ leaderBoard = leaderBoard.filter((player) => player.id !== playerId);
+ break;
+ case "increase":
+ leaderBoard.forEach((player) => {
+ if (player.id === playerId) {
+ player.score += 5;
+ }
+ });
+ break;
+ case "decrease":
+ leaderBoard.forEach((player) => {
+ if (player.id === playerId) {
+ player.score -= 5;
+ }
+ });
+ break;
  }
- sortLeaderBoard();
 
- printLeaderBoard();
+ // Re-render the board after any state change
+ renderLeaderboard();
 }
+
+// --- Event Listeners ---
+form.addEventListener("submit", handleAddRecord);
+
+// Single event listener on the parent container for all actions
+board.addEventListener("click", handleBoardClick);