From 06caac1c277015be8ee5020db85a9f81c80ebd30 Mon Sep 17 00:00:00 2001 From: alphakahere Date: Tue, 31 Oct 2023 21:56:56 +0000 Subject: [PATCH 1/2] Implement the logic of search bar --- index.html | 446 +++++++++++++++++++++++++-------------------------- js/script.js | 48 ++++++ 2 files changed, 265 insertions(+), 229 deletions(-) create mode 100644 js/script.js diff --git a/index.html b/index.html index 2ba1e85..ca8f6ea 100644 --- a/index.html +++ b/index.html @@ -1,241 +1,229 @@ - - - - Impact Wall - - - - - - - - - - - - -
- - -
+ + - + -
- -
+
+
+

+ One World, + Many Heroes +

+
+ + +
+
- + -
-
-
-
-
- Impact Wall -

- A wall highlighting people and organizations that have a good - impact -

-
-
-
    -
  • - -
  • -
-
-
-
-
-
- -
- - +
+
+
+
+
+ Impact Wall +

+ A wall highlighting people and organizations that have a good impact +

+
+
+
    +
  • + +
  • +
+
+
+
+
+
+ +
+ + - - - + + + - - - + + + + diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..b9f53e9 --- /dev/null +++ b/js/script.js @@ -0,0 +1,48 @@ +// Function to normalize a string by converting it to toLowerCase and removing diacritics (accents, cedilla, ...) and extra spaces +function normalizeString(text) { + return text + .toLowerCase() + .normalize("NFD") + .replace(/[\u0300-\u036f]/g, "") + .trim(); +} + +// Search hero function +function searchFunction() { + let i, txtValue, h5, match; + const input = document.getElementById("searchInput"); + const query = normalizeString(input.value); + const heroContainer = document.getElementById("heroesList"); + const heroesList = heroContainer.getElementsByClassName("item"); + + match = false; + for (i = 0; i < heroesList.length; i++) { + h5 = heroesList[i].getElementsByTagName("h5")[0]; + txtValue = h5.textContent || h5.innerText; + + if (normalizeString(txtValue).includes(query)) { + heroesList[i].style.display = ""; + match = true; + } else { + heroesList[i].style.display = "none"; + } + } + + const noMatchMessage = document.getElementById("noMatchMessage"); + if (!match) { + noMatchMessage.style.display = "block"; + } else { + noMatchMessage.style.display = "none"; + } +} + +// Function to reset search when the input value is cleared +document.getElementById("searchInput").addEventListener("input", function () { + if (this.value === "") { + let items = document.getElementsByClassName("item"); + for (var j = 0; j < items.length; j++) { + items[j].style.display = "block"; + } + document.getElementById("noMatchMessage").style.display = "none"; + } +}); From e11f8ec851e1bbbc010a0a21bb41d5190d54d823 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A9doune=20Siby=20Georges=20Bald=C3=A9?= <40875400+MedouneSGB@users.noreply.github.com> Date: Tue, 31 Oct 2023 23:20:25 +0000 Subject: [PATCH 2/2] Update index.html --- index.html | 3 --- 1 file changed, 3 deletions(-) diff --git a/index.html b/index.html index 23245d1..79c2ae0 100644 --- a/index.html +++ b/index.html @@ -43,7 +43,6 @@ -<<<<<<< HEAD -======= ->>>>>>> 8a4d871c4544f31d53011c5b7221aa8a49258df4