From 9de295d58b5ee0cdb8fe45fde894ff813dabc5db Mon Sep 17 00:00:00 2001
From: Bayyana-kiran <99533113+Bayyana-kiran@users.noreply.github.com>
Date: Sat, 13 Jan 2024 14:11:05 +0530
Subject: [PATCH] Sorted the issue

---
 30DaysOfJavaScript/script.js | 75 ++++++++++++++++++++----------------
 index.html                   | 19 ++++++++-
 2 files changed, 60 insertions(+), 34 deletions(-)

diff --git a/30DaysOfJavaScript/script.js b/30DaysOfJavaScript/script.js
index 0543e7b0..51f5b015 100644
--- a/30DaysOfJavaScript/script.js
+++ b/30DaysOfJavaScript/script.js
@@ -1,16 +1,15 @@
 // Preloader
-var preloader = document.getElementById('loading');
+var preloader = document.getElementById("loading");
 
 function loading() {
   setTimeout(myfunction, 2000);
 }
 function myfunction() {
-  preloader.style.display = 'none';
+  preloader.style.display = "none";
 }
 
-
 $(document).ready(function () {
-  renderProjects()
+  renderProjects();
   $(window).scroll(function () {
     if ($(this).scrollTop() >= 100) {
       $(".scrollToTop").fadeIn();
@@ -23,71 +22,82 @@ $(document).ready(function () {
     $("html, body").animate({ scrollTop: 0 }, 500);
     return false;
   });
-
 });
 
-
-function checkTheme(){
-  console.log("Checking theme")
-  const body = document.querySelector('body');
+function checkTheme() {
+  console.log("Checking theme");
+  const body = document.querySelector("body");
   const button = document.getElementById("toggle");
 
   const themeLocalStorage = localStorage.getItem("theme");
-  console.log('Valor em themeLocalStorage:', themeLocalStorage);
+  console.log("Valor em themeLocalStorage:", themeLocalStorage);
 
   if (themeLocalStorage) {
-    console.log(`diferente de null`)
-    body.className = themeLocalStorage 
+    console.log(`diferente de null`);
+    body.className = themeLocalStorage;
   }
 
-  if(themeLocalStorage == "light-mode") {
+  if (themeLocalStorage == "light-mode") {
     button.innerHTML = "☀️";
   } else {
     button.innerHTML = "🌙";
   }
-
 }
-document.addEventListener('DOMContentLoaded', checkTheme)
+document.addEventListener("DOMContentLoaded", checkTheme);
 
-function toggleDarkLight(){
-  const body = document.querySelector('body');
+function toggleDarkLight() {
+  const body = document.querySelector("body");
 
   const button = document.getElementById("toggle");
 
-  console.log(body.classList)
-  if(body.classList.contains("dark-mode")){
+  console.log(body.classList);
+  if (body.classList.contains("dark-mode")) {
     body.className = "light-mode";
     button.innerHTML = "☀️";
-    localStorage.setItem("theme", "light-mode" );
+    localStorage.setItem("theme", "light-mode");
   } else {
-    body.className = "dark-mode"
+    body.className = "dark-mode";
     button.innerHTML = "🌙";
-    localStorage.setItem("theme", "dark-mode" );
-    
+    localStorage.setItem("theme", "dark-mode");
   }
-
 }
 
 let currentPage = 1;
 
-var x = document.getElementsByClassName('item');
+var x = document.getElementsByClassName("item");
 
 function search_project() {
-  let input = document.getElementById('searchbar').value.toLowerCase();
-  
-  for (let i = 0; i < x.length; i++) {
-    const projectName = x[i].querySelector("h4").innerHTML.toLowerCase();
+  let input = document.getElementById("searchbar").value.toLowerCase();
+  let projectsContainer = document.getElementById("projectsContainer");
+  let projects = document.getElementsByClassName("item");
+  let found = false;
+
+  for (let i = 0; i < projects.length; i++) {
+    const projectName = projects[i].querySelector("h4").innerHTML.toLowerCase();
 
     if (!projectName.includes(input)) {
-      x[i].style.display = "none";
+      projects[i].style.display = "none";
     } else {
-      x[i].style.display = "list-item";
+      projects[i].style.display = "list-item";
+      found = true;
     }
   }
+
+  let existingMessage = document.getElementById("noProjectMessage");
+  if (existingMessage) {
+    existingMessage.remove();
+  }
+
+  if (!found) {
+    let noProjectMessage = document.createElement("h1");
+    noProjectMessage.id = "noProjectMessage";
+    noProjectMessage.innerHTML = "No project found";
+    projectsContainer.appendChild(noProjectMessage);
+  }
 }
 
 function renderProjects() {
-  window.scrollTo({ top: 0, behavior: 'smooth' });
+  window.scrollTo({ top: 0, behavior: "smooth" });
   const projectsPerPage = 30;
   const startIndex = (currentPage - 1) * projectsPerPage;
   const endIndex = startIndex + projectsPerPage;
@@ -131,7 +141,6 @@ function goToPreviousPage() {
   }
 }
 
-
 function updateActiveButton() {
   const buttons = document.querySelectorAll(".pagination button");
   buttons.forEach((button) => {
diff --git a/index.html b/index.html
index 83bbfe82..7e7479fd 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,23 @@
   <link rel="shortcut icon" href="30DaysOfJavaScript/assets/favicon.png" type="image/x-icon">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
   <script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      min-height: 100vh;
+    }
+  
+    footer {
+      margin-top: 15px;
+      background-color:#19172D;
+      padding: 10px;
+      text-align: center;
+    }
+  </style>
+  
 
   <script src="30DaysOfJavaScript/script.js"></script>
   <title>30 Days of JavaScript</title>
@@ -59,7 +76,7 @@ <h1>30 Days of JavaScript</h1>
   <!-- Scroll to Top End -->
   <!-- <i class="fa-brands fa-square-github"></i> -->
   <!-- Main Section Start -->
-  <div class="main">
+  <div class="main" id="projectsContainer">
     <div class="item">
       <img src="30DaysOfJavaScript/assets/01.png" alt="Drum Kit" />
       <h4>Drum Kit</h4>