Merge pull request #328 from pandeyji711/New_web

Added search bar and separate programing language folder
jfmartinz · May 24, 2024 · 6cf45b5 · 6cf45b5
2 parents 77f8578 + c7d5da5
commit 6cf45b5
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 0 deletions.
diff --git a/Programming Languages/C++/readme.md → C++/readme.md b/Programming Languages/C++/readme.md → C++/readme.md
diff --git a/Programming Languages/Java/readme.md → Java/readme.md b/Programming Languages/Java/readme.md → Java/readme.md
diff --git a/Programming Languages/JavaScript/readme.md → JavaScript/readme.md b/Programming Languages/JavaScript/readme.md → JavaScript/readme.md
diff --git a/Programming Languages/Python/readme.md → Python/readme.md b/Programming Languages/Python/readme.md → Python/readme.md
diff --git a/website/app.js b/website/app.js
@@ -89,3 +89,16 @@ document.addEventListener("DOMContentLoaded", function () {
     "https://api.github.com/repos/jfmartinz/ResourceHub/contents/"
   );
 });
+function filterCards() {
+  const input = document.querySelector(".search-input");
+  const val = input.value.toLowerCase();
+  const cards = document.querySelectorAll(".card");
+  cards.forEach((card) => {
+    const title = card.querySelector("p").textContent.toLowerCase();
+    if (title.includes(val)) {
+      card.style.display = "block";
+    } else {
+      card.style.display = "none";
+    }
+  });
+}
diff --git a/website/index.html b/website/index.html
@@ -5,9 +5,37 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ResourceHub</title>
     <link rel="stylesheet" href="style.css">
+    <style>
+        .search-container {
+     display: flex;
+     justify-content: center;
+     align-items: center;
+     padding: 20px;
+     background-color:white;
+     /* box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1); */
+   }
+   .search-input {
+     width: 80%;
+     max-width: 600px;
+     padding: 15px;
+     font-size: 18px;
+     border: 1px solid #ddd;
+     border-radius: 25px;
+     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+     transition: all 0.3s ease;
+   }
+   .search-input:focus {
+     outline: none;
+     border-color: #aaa;
+     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+   }
+   </style>
 </head>
 <body>
     <h1 id="main-title">ResourceHub</h1>
+    <div class="search-container">
+        <input type="text" class="search-input" placeholder="Search..." onkeyup="filterCards()">
+      </div>
     <div id="rate-limit-message" style="display: none; color: red;"></div>
     <div id="card-container"></div>
     <script src="app.js"></script>