diff --git a/heroes/Daooda.jpg b/heroes/daooda.jpg similarity index 100% rename from heroes/Daooda.jpg rename to heroes/daooda.jpg diff --git a/index.html b/index.html index 28e23d1..3e3c620 100644 --- a/index.html +++ b/index.html @@ -1,51 +1,91 @@ - - - - Impact Wall - - - - - - - - - - - - -
- - -
+ + - +
@@ -144,7 +186,7 @@

>

-
+ +
- + -
-
-
-
-
- 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"; + } +});