Skip to content

Commit

Permalink
Merge pull request #28 from alphakahere/search_bar
Browse files Browse the repository at this point in the history 
Search bar
  • Loading branch information
@MedouneSGB
MedouneSGB authored Oct 31, 2023
2 parents 5cd1e10 + e11f8ec commit 009b347
Show file tree
Hide file tree
Showing 3 changed files with 225 additions and 140 deletions.
0 heroes/Daooda.jpg → heroes/daooda.jpg
View file
File renamed without changes
317 changes: 177 additions & 140 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,91 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Impact Wall</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
<!-- Add Bootstrap CSS and JavaScript -->
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="icon" href="img/11x.png" type="image/x-icon" />
<!-- Add this line for favicon -->
</head>
<body>
<header class="header-area overlay">
<nav class="navbar navbar-expand-md navbar-dark">
<div class="container">
<a href="#" class="navbar-brand">Impact Wall</a>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Impact Wall</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
<!-- Add Bootstrap CSS and JavaScript -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="icon" href="img/11x.png" type="image/x-icon" />
<!-- Add this line for favicon -->
</head>
<body>
<header class="header-area overlay">
<nav class="navbar navbar-expand-md navbar-dark">
<div class="container">
<a href="#" class="navbar-brand">Impact Wall</a>

<button
type="button"
class="navbar-toggler collapsed"
data-toggle="collapse"
data-target="#main-nav"
>
<span class="menu-icon-bar"></span>
<span class="menu-icon-bar"></span>
<span class="menu-icon-bar"></span>
</button>
<button
type="button"
class="navbar-toggler collapsed"
data-toggle="collapse"
data-target="#main-nav"
>
<span class="menu-icon-bar"></span>
<span class="menu-icon-bar"></span>
<span class="menu-icon-bar"></span>
</button>

<div id="main-nav" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li>
<a href="#" class="nav-item nav-link active" data-i18n="navigation.home"
>Home</a
>
</li>
<li>
<a
href="#"
class="nav-item nav-link"
data-i18n="navigation.contributors"
>Contributors</a
>
</li>
<li>
<a
href="https://github.com/MedouneSGB/Impact-Wall"
class="nav-item nav-link"
data-i18n="navigation.contribute"
>Contribute</a
>
</li>
<li>
<a href="#" class="nav-item nav-link i18n">
<select id="lang">
<option value="" hidden data-i18n="selectLang.placeholder">
Choose a language
</option>
<option value="en" data-i18n="selectLang.en">
English
</option>
<option value="fr" data-i18n="selectLang.fr">French</option>
<option value="wolof" data-i18n="selectLang.wolof">
Wolof
</option>
</select>
</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="main-nav" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li>
Expand Down Expand Up @@ -93,44 +133,46 @@
</div>
</nav>

<div class="banner">
<div class="container">
<h1>
<span data-i18n="content.header.title">Welcome to</span>
<span class="navbar-brand" style="color: #d2b863; font-size: 4.3rem"
>Impact-Wall</span
>
</h1>
<p data-i18n="content.header.tagline">
A wall highlighting people and organizations that have a good impact
</p>
<div
class="p-4 bg-light rounded rounded-pill shadow-sm mb-4"
style="margin-bottom: -4.5rem !important"
>
<div class="input-group">
<input
type="search"
placeholder="What're you searching for?"
aria-describedby="button-addon1"
class="form-control border-0 bg-light"
/>
<div class="input-group-append">
<button
id="button-addon1"
type="submit"
class="btn btn-link text-primary"
>
<i class="fa fa-search fa-2x" style="color: #86763e"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="banner">
<div class="container">
<h1>
<span data-i18n="content.header.title">Welcome to</span>
<span class="navbar-brand" style="color: #d2b863; font-size: 4.3rem"
>Impact-Wall</span
>
</h1>
<p data-i18n="content.header.tagline">
A wall highlighting people and organizations that have a good impact
</p>
<div
class="p-4 bg-light rounded rounded-pill shadow-sm mb-4"
style="margin-bottom: -4.5rem !important"
>
<div class="input-group">
<input
type="search"
placeholder="What're you searching for?"
aria-describedby="button-addon1"
class="form-control border-0 bg-light"
id="searchInput"
/>
<div class="input-group-append">
<button
id="button-addon1"
type="submit"
class="btn btn-link text-primary"
onclick="searchFunction()"
>
<i class="fa fa-search fa-2x" style="color: #86763e"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</header>

<!-- cards -->
<!-- cards -->

<div style="background-color: #d2b863">
<div class="container p-5">
Expand All @@ -144,7 +186,7 @@ <h1>
>
</h1>
<hr />
<div class="row mt-5">
<div class="row mt-5" id="heroesList">
<div class="col-md-3 col-sm-6 item">
<a href="./pages/marietou.html" class="card item-card card-block">
<img src="heroes/Marietou.jpeg" alt="" />
Expand Down Expand Up @@ -222,68 +264,63 @@ <h5 class="card-title p-2 mt-3 mb-3">Cheikh Oumar Diagne</h5>
</a>
</div>
</div>
<p id="noMatchMessage" style="display:none; text-align:center; font-size: 24px;" class="no_match_message">No match found !</p>
</div>
</div>

<!-- footer -->
<!-- footer -->

<section class="contact-area" id="contact">
<div class="container">
<div class="row">
<div class="col-lg-6 offset-lg-3">
<div class="contact-content text-center">
<a href="#" class="navbar-brand" style="font-size: 40px"
>Impact Wall</a
>
<p data-i18n="footer.tagline">
A wall highlighting people and organizations that have a good
impact
</p>
<div class="hr"></div>
<div class="contact-social">
<ul>
<li>
<a class="" href="https://github.com/MedouneSGB/Impact-Wall"
><i class="fab fa-github fa-10x"></i
></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>
Copyright &copy; 2023
<a href="#" class="navbar-brand" style="font-size: 2rem"
>Impact Wall</a
><a
href="#"
class="navbar-brand"
style="font-size: 2rem; color: #d2b863"
>Hacktoberfest23</a
>
</p>
</footer>
</section>
<!-- =============== 1.9 Contact Area End ====================-->
<!-- =============== 1.9 Footer Area Start ====================-->
<section class="contact-area" id="contact">
<div class="container">
<div class="row">
<div class="col-lg-6 offset-lg-3">
<div class="contact-content text-center">
<a href="#" class="navbar-brand" style="font-size: 40px">Impact Wall</a>
<p data-i18n="footer.tagline">
A wall highlighting people and organizations that have a good impact
</p>
<div class="hr"></div>
<div class="contact-social">
<ul>
<li>
<a class="" href="https://github.com/MedouneSGB/Impact-Wall"
><i class="fab fa-github fa-10x"></i
></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>
Copyright &copy; 2023
<a href="#" class="navbar-brand" style="font-size: 2rem">Impact Wall</a
><a href="#" class="navbar-brand" style="font-size: 2rem; color: #d2b863"
>Hacktoberfest23</a
>
</p>
</footer>
</section>
<!-- =============== 1.9 Contact Area End ====================-->
<!-- =============== 1.9 Footer Area Start ====================-->

<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"
></script>
<script src="script.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"
></script>
<script src="script.js"></script>

<script src="https://unpkg.com/@andreasremdt/simple-translator@latest/dist/umd/translator.min.js"></script>
<script src="js/i18n.js"></script>
</body>
<script src="https://unpkg.com/@andreasremdt/simple-translator@latest/dist/umd/translator.min.js"></script>
<script src="js/i18n.js"></script>
<script src="js/script.js"></script>
</body>
</html>
48 changes: 48 additions & 0 deletions js/script.js
View file
Original file line number Diff line number Diff line change
@@ -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";
}
});

0 comments on commit 009b347

Please sign in to comment.