@@ -25,15 +25,12 @@ $(document).ready(function () {
 });
 let currentPage = 1;
 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);
 
   if (themeLocalStorage) {
-    console.log(`diferente de null`);
     body.className = themeLocalStorage;
   }
 
@@ -46,15 +43,18 @@ function checkTheme() {
 document.addEventListener("DOMContentLoaded", checkTheme);
 
 function toggleDarkLight() {
+  
+  let input = document.getElementById("suggestion-list")
   const body = document.querySelector("body");
 
   const button = document.getElementById("toggle");
 
-  console.log(body.classList);
   if (body.classList.contains("dark-mode")) {
     body.className = "light-mode";
+    input.style.color = 'white';
     button.innerHTML = "☀️";
     localStorage.setItem("theme", "light-mode");
+
   } else {
     body.className = "dark-mode";
     button.innerHTML = "🌙";
@@ -64,14 +64,156 @@ function toggleDarkLight() {
 
 
 
-var x = document.getElementsByClassName("item");
 
+
+var x = document.getElementsByClassName("item");
 function search_project() {
   let input = document.getElementById("searchbar").value.toLowerCase();
   let projectsContainer = document.getElementById("projectsContainer");
   let projects = document.getElementsByClassName("item");
   let found = false;
 
+  // Array of project suggestions
+  const suggestions = [
+    "Drum Kit",
+    "Clock",
+    "Random Color Generator",
+    "Digital Clock",
+    "Random Password Generator",
+    "Calendar",
+    "Dynamic Form Field",
+    "Number Counter",
+    "Dice Roll",
+    "Emoji Switcher like Discord",
+    "Color Picker",
+    "Custom QR Code",
+    "Favicon Fetcher",
+    "Visit Counter",
+    "Joke Generator",
+    "Countdown Timer",
+    "Text Speed Control",
+    "Stopwatch",
+    "Traffic Lights",
+    "Levitate Board",
+    "Wave Effect",
+    "Zoom Effect",
+    "Drawing Pad",
+    "Word Counter",
+    "Weather App",
+    "Calculator",
+    "Memory Matching Game",
+    "Music Player",
+    "To-Do List",
+    "Tic Tac Toe",
+    "Pop the Balloons",
+    "Key Code",
+    "Decimal To Binary",
+    "Hangman",
+    "Simple Form Validation",
+    "Lorem Ipsum Generator",
+    "RPS (Rock, Paper, Scissors) Game",
+    "Snake Game",
+    "Age Calculator",
+    "Gradient Generator",
+    "Sorting Visualizer",
+    "PixSort Studio",
+    "Getting Started with APIs",
+    "Block Runner",
+    "Dice Game",
+    "Palindrome Checker",
+    "Caesar Cipher",
+    "Weight Converter",
+    "Image Utility",
+    "Guess the Number Game",
+    "Balloon Game",
+    "Temperature Converter",
+    "Notes Taking App",
+    "N Queen Visualizer",
+    "Bubble Shooting Game",
+    "Stick Hero Game",
+    "Quiz ADD",
+    "Simon Game",
+    "Color Choosing Game",
+    "Reaction Time",
+    "Wall Breaker Game",
+    "Dot Connect Game",
+    "Insect Catching Game",
+    "Particle Effect Animation",
+    "Postmaster Clone",
+    "Text to Speech Converter",
+    "Currency Converter",
+    "Movie/TV Series Quote Generator",
+    "Pattern Generator",
+    "Transpose Matrix Calculator",
+    "Steal Diamond Game",
+    "Typing Platform",
+    "Casino Slot Machine Game",
+    "Color Game",
+    "Movie Search App",
+    "Car Game",
+    "Search Github Profile",
+    "Dictionary App",
+    "Three Number",
+    "Sudoku",
+    "Hangman Game",
+    "Falling Ball Game",
+    "Dot Target Game",
+    "Tetris Game",
+    "Sticky Notes",
+    "Spin The Wheel Game",
+    "Body Mass Index Calculator",
+    "Ping Pong Game",
+    "Projectile Motion Simulator",
+    "Atari Game",
+    "Multiply Math Game",
+    "Casio",
+    "Typer",
+    "Word Guess",
+    "Whack a Mole Game",
+    "Pomodoro Clock",
+    "Captcha Generator",
+    "Math Game",
+    "Blackjack Game",
+    "Coin Game",
+    "Bomb Throw Game",
+    "Minesweeper Game",
+    "Retro Mario Game",
+    "Catch Me If You Can",
+    "Word For Alphabet Speak Aloud",
+    "Snowy Particle Js",
+    "Stack Game",
+    "Maths addition",
+    "Number Facts",
+    "Pixel to em Converter",
+    "Luminosity Particle Js",
+    "Maze Game",
+    "Minesweeper"
+  ]
+
+  // Filter suggestions based on input
+  const filteredSuggestions = suggestions.filter(suggestion =>
+    suggestion.toLowerCase().includes(input)
+  );
+
+  // Display suggestions
+  const suggestionList = document.getElementById("suggestion-list");
+  if (filteredSuggestions.length > 0) {
+    suggestionList.innerHTML = '';
+    filteredSuggestions.forEach(suggestion => {
+      const li = document.createElement('li');
+      li.textContent = suggestion;
+      li.addEventListener('click', function() {
+        document.getElementById("searchbar").value = suggestion;
+        suggestionList.style.display = 'none';
+      });
+      suggestionList.appendChild(li);
+    });
+    suggestionList.style.display = 'block';
+  } else {
+    suggestionList.style.display = 'none';
+  }
+
+  // Iterate through projects to filter and display
   for (let i = 0; i < projects.length; i++) {
     const projectName = projects[i].querySelector("h4").innerHTML.toLowerCase();
 
@@ -83,6 +225,7 @@ function search_project() {
     }
   }
 
+  // Display message if no projects found
   let existingMessage = document.getElementById("noProjectMessage");
   if (existingMessage) {
     existingMessage.remove();
@@ -94,6 +237,11 @@ function search_project() {
     noProjectMessage.innerHTML = "No project found";
     projectsContainer.appendChild(noProjectMessage);
   }
+  
+  if(input.length<=1){
+    suggestionList.style.display="none"
+    console.log("start")
+  }
 }
 
 function renderProjects() {
@@ -152,18 +300,16 @@ function updateActiveButton() {
     }
   });
 }
-
 function togglePaginationButtonsVisibility() {
   const prevButton = document.querySelector('.prev_btn');
   const nextButton = document.querySelector('.next_btn');
   if (currentPage === 1) {    
-    console.log("start")
     prevButton.style.display = 'none';
   } else {
     prevButton.style.display = 'inline-block';
   }
 
-  if (currentPage === 4) {
+  if (currentPage === Math.ceil(x.length / 30)) {
 
     nextButton.style.display = 'none';
     console.log("end")
 
@@ -427,7 +427,7 @@ header {
 
 #searchbar {
   margin: 14px 0px;
-  background-color: rgba(38, 35, 35, 0.526);
+  background-color: rgba(38, 35, 35, 0.9);
   color: white;
 }
 
 
@@ -24,6 +24,28 @@
       padding: 10px;
       text-align: center;
     }
+    #suggestion-list {
+      display: none;
+      background-color: #423d7a;
+      max-height: 200px;
+      overflow-y: auto;
+      z-index: -1;
+      width:48%;
+      position: relative;
+      border-radius: 15px;
+      bottom: 20px;
+      color: white;
+    }
+  
+    #suggestion-list li {
+      padding: 10px;
+      cursor: pointer;
+    }
+  
+    #suggestion-list li:hover {
+      background-color: #f5f5f5;
+      color: #423d7a;
+    }
   </style>
 
 
@@ -52,7 +74,9 @@
   <!-- Heading -->
   <div class="top">
     <h1>30 Days of JavaScript</h1>
-    <input id="searchbar" onkeyup="search_project()" type="text" name="search" placeholder='Search projects.....' />
+    <input id="searchbar" onkeyup="search_project() "  type="text" name="search" placeholder='Search projects.....' />
+    <ul id="suggestion-list">
+    </ul>
     <!-- Dark Mode Button -->
     <button id="toggle" class="toggleButton" type="button" onclick="toggleDarkLight()">🌙</button>
   </div>
Original file line number	Diff line number	Diff line change
`@@ -427,7 +427,7 @@ header {`
`427`	`427`
`428`	`428`	`#searchbar {`
`429`	`429`	`margin: 14px 0px;`
`430`		`- background-color: rgba(38, 35, 35, 0.526);`
	`430`	`+ background-color: rgba(38, 35, 35, 0.9);`
`431`	`431`	`color: white;`
`432`	`432`	`}`
`433`	`433`