search button

added search button in assessments and made the assesments distribute in easy tough medium

Author: IshikaSoni056

jobsdoor360-website/src/main/ejs/main-files/test/index.ejs

@@ -9,6 +9,15 @@
   <%- include('../../partials/navbar.ejs') %>
   <section class="content">
     <h1 class="center">Master Your Skills: Assessments & Challenges</h1>
+    <div class="search-container">
+      <input
+        type="text"
+        id="search-input"
+        class="search-box"
+        placeholder="Search Assessments..."
+      />
+      <button id="search-button" class="btn-search">Search</button>
+    </div>
     <div class="assessment-grid" id="assessment">
       Fetching Assessments ...!
     </div>

myaccount/index.html

@@ -10,7 +10,10 @@
       content="Unlock Your Career Potential with JobsDoor360: Expert Development Programs & Job Opportunities. Learn Full Stack, Java, and Web Development. Advance Your Career with Industry Professionals. Gain In-Demand Skills for Software Jobs. Practice Interviews and Perfect Your CV. Join Now for a Spring Demo!"
     />
     <link rel="stylesheet" href="/staticfiles/mainfiles/myaccount/style.css" />
-    
+    <link
+      href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
+      rel="stylesheet"
+    />
     <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <meta name="google-adsense-account" content="ca-pub-2075086355753452" />

staticfiles/mainfiles/test/script.js

@@ -1,3 +1,20 @@
+import {
+  getFirestore,
+  collection,
+  getDocs,
+  getDoc,
+  query,
+  where,
+  doc,
+  writeBatch,
+  setDoc,
+  addDoc,
+  updateDoc,
+  orderBy // <-- Add this
+} from "https://www.gstatic.com/firebasejs/10.1.0/firebase-firestore.js";
+
+
+
 let userId = null;
 let userData = {};
 
@@ -11,7 +28,8 @@ onAuthStateChanged(auth, (user) => {
 async function fetchAssessments() {
   try {
     console.log(`Fetching assessments`);
-    let querySnapshot = await getDocs(collection(db, "assessment"));
+    const assessmentsQuery = query(collection(db, "assessment"), orderBy("title", "asc"));
+    let querySnapshot = await getDocs(assessmentsQuery);
     console.log(`Assessments found`);
     displayCards(querySnapshot);
   } catch (error) {
@@ -37,6 +55,24 @@ function displayCards(assessments) {
     `);
   });
   divCont.innerHTML = content.join('');
+
+setupSearch();
+}
+
+
+
+function setupSearch() {
+  const searchInput = document.getElementById("search-input");
+  const assessmentBoxes = Array.from(document.getElementsByClassName("assessment-box"));
+
+  searchInput.addEventListener("input", () => {
+    const searchValue = searchInput.value.toLowerCase();
+    assessmentBoxes.forEach(box => {
+      const title = box.querySelector(".assessment-title").textContent.toLowerCase();
+      box.style.display = title.includes(searchValue) ? "flex" : "none";
+    });
+  });
 }
 
-fetchAssessments();
+// Initial fetch of assessments
+fetchAssessments();

staticfiles/mainfiles/test/style.css

@@ -35,6 +35,7 @@ body.no-scroll {
   grid-template-columns: repeat(4, 1fr); /* Updated to 4 columns */
   gap: 20px; /* Reduced gap between cards */
   margin-bottom: 20px;
+  
 }
 
 .assessment-box {
@@ -56,7 +57,7 @@ body.no-scroll {
 }
 
 .assessment-title {
-  font-size: 2rem; /* Adjusted font size */
+  font-size: 1.5rem; /* Adjusted font size */
   color: #343a40;
   margin-bottom: 10px;
   text-align: center;
@@ -73,6 +74,7 @@ body.no-scroll {
   text-decoration: none;
   text-align: center;
   margin-top: auto; /* Align button at the bottom */
+  
 }
 
 .btn-start:hover {
@@ -116,4 +118,31 @@ body.no-scroll {
     padding: 8px 16px;
     font-size: 0.8rem;
   }
-}
+}
+
+.search-container {
+  text-align: center;
+  margin: 20px 0;
+}
+
+.search-box {
+  padding: 10px;
+  width: 60%;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.btn-search {
+  padding: 10px 20px;
+  font-size: 16px;
+  background-color: #007BFF;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.btn-search:hover {
+  background-color: #0056b3;
+}

test/index.html

@@ -151,6 +151,15 @@
 <!-- End Google Tag Manager (noscript) -->
   <section class="content">
     <h1 class="center">Master Your Skills: Assessments & Challenges</h1>
+    <div class="search-container">
+      <input
+        type="text"
+        id="search-input"
+        class="search-box"
+        placeholder="Search Assessments..."
+      />
+      <button id="search-button" class="btn-search">Search</button>
+    </div>
     <div class="assessment-grid" id="assessment">
       Fetching Assessments ...!
     </div>