@@ -23,17 +23,14 @@ $(document).ready(function () {
     return false;
   });
 });
-let currentPage = 1;
+let current_page = 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,17 +64,158 @@ 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 = [
+    { name: "Drum Kit", url: "./01 - Drum Kit/index.html" },
+    { name: "Clock", url: "./02 - Clock/index.html" },
+    { name: "Random Color Generator", url: "./03 - Random Color Generator/index.html" },
+    { name: "Digital Clock", url: "./04 - Digital Clock/index.html" },
+    { name: "Random Password Generator", url: "./05 - Random Password Generator/index.html" },
+    { name: "Calendar", url: "./06 - Calendar/index.html" },
+    { name: "Dynamic Form Field", url: "./07 - Dynamic Form Field/index.html" },
+    { name: "Number Counter", url: "./08 - Number Counter/index.html" },
+    { name: "Dice Roll", url: "./09 - Dice Roll/index.html" },
+    { name: "Emoji Switcher like Discord", url: "./10 - Emoji Switcher like Discord/index.html" },
+    { name: "Color Picker", url: "./11 - Color Picker/index.html" },
+    { name: "Custom QR Code", url: "./12 - Custom QR Code/index.html" },
+    { name: "Favicon Fetcher", url: "./13 - Favicon Fetcher/index.html" },
+    { name: "Visit Counter", url: "./14 - Visit Counter/index.html" },
+    { name: "Joke Generator", url: "./15 - Joke Generator/index.html" },
+    { name: "Countdown Timer", url: "./16 - Countdown Timer/index.html" },
+    { name: "Text Speed Control", url: "./17 - Text Speed Control/index.html" },
+    { name: "Stopwatch", url: "./18 - Stopwatch/index.html" },
+    { name: "Traffic Lights", url: "./19 - Traffic Lights/index.html" },
+    { name: "Levitate Board", url: "./20 - Levitate Board/index.html" },
+    { name: "Wave Effect", url: "./21 - Wave Effect/index.html" },
+    { name: "Zoom Effect", url: "./22 - Zoom Effect/index.html" },
+    { name: "Drawing Pad", url: "./23 - Drawing Pad/index.html" },
+    { name: "Word Counter", url: "./24 - Word Counter/index.html" },
+    { name: "Weather App", url: "./25 - Weather App/index.html" },
+    { name: "Calculator", url: "./26 - Calculator/index.html" },
+    { name: "Memory Matching Game", url: "./27 - Memory Matching Game/index.html" },
+    { name: "Music Player", url: "./28 - Music Player/index.html" },
+    { name: "To-Do List", url: "./29 - To-Do List/index.html" },
+    { name: "Tic Tac Toe", url: "./30 - Tic Tac Toe/index.html" },
+    { name: "Pop the Balloons", url: "./31 - Pop the Balloons/index.html" },
+    { name: "Key Code", url: "./32 - Key Code/index.html" },
+    { name: "Decimal To Binary", url: "./33 - Decimal To Binary/index.html" },
+    { name: "Hangman", url: "./34 - Hangman/index.html" },
+    { name: "Simple Form Validation", url: "./35 - Simple Form Validation/index.html" },
+    { name: "Lorem Ipsum Generator", url: "./36 - Lorem Ipsum Generator/index.html" },
+    { name: "RPS (Rock, Paper, Scissors) Game", url: "./37 - RPS (Rock, Paper, Scissors) Game/index.html" },
+    { name: "Snake Game", url: "./38 - Snake Game/index.html" },
+    { name: "Age Calculator", url: "./39 - Age Calculator/index.html" },
+    { name: "Gradient Generator", url: "./40 - Gradient Generator/index.html" },
+    { name: "Sorting Visualizer", url: "./41 - Sorting Visualizer/index.html" },
+    { name: "PixSort Studio", url: "./42 - PixSort Studio/index.html" },
+    { name: "Getting Started with APIs", url: "./43 - Getting Started with APIs/index.html" },
+    { name: "Block Runner", url: "./44 - Block Runner/index.html" },
+    { name: "Dice Game", url: "./45 - Dice Game/index.html" },
+    { name: "Palindrome Checker", url: "./46 - Palindrome Checker/index.html" },
+    { name: "Caesar Cipher", url: "./47 - Caesar Cipher/index.html" },
+    { name: "Weight Converter", url: "./48 - Weight Converter/index.html" },
+    { name: "Image Utility", url: "./49 - Image Utility/index.html" },
+    { name: "Guess the Number Game", url: "./50 - Guess the Number Game/index.html" },
+    { name: "Balloon Game", url: "./51 - Balloon Game/index.html" },
+    { name: "Temperature Converter", url: "./52 - Temperature Converter/index.html" },
+    { name: "Notes Taking App", url: "./53 - Notes Taking App/index.html" },
+    { name: "N Queen Visualizer", url: "./54 - N Queen Visualizer/index.html" },
+    { name: "Bubble Shooting Game", url: "./55 - Bubble Shooting Game/index.html" },
+    { name: "Stick Hero Game", url: "./56 - Stick Hero Game/index.html" },
+    { name: "Quiz ADD", url: "./57 - Quiz ADD/index.html" },
+    { name: "Simon Game", url: "./58 - Simon Game/index.html" },
+    { name: "Color Choosing Game", url: "./59 - Color Choosing Game/index.html" },
+    { name: "Reaction Time", url: "./60 - Reaction Time/index.html" },
+    { name: "Wall Breaker Game", url: "./61 - Wall Breaker Game/index.html" },
+    { name: "Dot Connect Game", url: "./62 - Dot Connect Game/index.html" },
+    { name: "Insect Catching Game", url: "./63 - Insect Catching Game/index.html" },
+    { name: "Particle Effect Animation", url: "./64 - Particle Effect Animation/index.html" },
+    { name: "Postmaster Clone", url: "./65 - Postmaster Clone/index.html" },
+    { name: "Text to Speech Converter", url: "./66 - Text to Speech Converter/index.html" },
+    { name: "Currency Converter", url: "./67 - Currency Converter/index.html" },
+    { name: "Movie/TV Series Quote Generator", url: "./68 - Movie/TV Series Quote Generator/index.html" },
+    { name: "Pattern Generator", url: "./69 - Pattern Generator/index.html" },
+    { name: "Transpose Matrix Calculator", url: "./70 - Transpose Matrix Calculator/index.html" },
+    { name: "Steal Diamond Game", url: "./71 - Steal Diamond Game/index.html" },
+    { name: "Typing Platform", url: "./72 - Typing Platform/index.html" },
+    { name: "Casino Slot Machine Game", url: "./73 - Casino Slot Machine Game/index.html" },
+      { name: "Color Game", url: "./74 - Color Game/index.html" },
+      { name: "Movie Search App", url: "./75 - Movie Search App/index.html" },
+      { name: "Car Game", url: "./76 - Car Game/index.html" },
+      { name: "Search Github Profile", url: "./77 - Search Github Profile/index.html" },
+      { name: "Dictionary App", url: "./78 - Dictionary App/index.html" },
+      { name: "Three Number", url: "./79 - Three Number/index.html" },
+      { name: "Sudoku", url: "./80 - Sudoku/index.html" },
+      { name: "Hangman Game", url: "./81 - Hangman Game/index.html" },
+      { name: "Falling Ball Game", url: "./82 - Falling Ball Game/index.html" },
+      { name: "Dot Target Game", url: "./83 - Dot Target Game/index.html" },
+      { name: "Tetris Game", url: "./84 - Tetris Game/index.html" },
+      { name: "Sticky Notes", url: "./85 - Sticky Notes/index.html" },
+      { name: "Spin The Wheel Game", url: "./86 - Spin The Wheel Game/index.html" },
+      { name: "Body Mass Index Calculator", url: "./87 - Body Mass Index Calculator/index.html" },
+      { name: "Ping Pong Game", url: "./88 - Ping Pong Game/index.html" },
+      { name: "Projectile Motion Simulator", url: "./89 - Projectile Motion Simulator/index.html" },
+      { name: "Atari Game", url: "./90 - Atari Game/index.html" },
+      { name: "Multiply Math Game", url: "./91 - Multiply Math Game/index.html" },
+      { name: "Casio", url: "./92 - Casio/index.html" },
+      { name: "Typer", url: "./93 - Typer/index.html" },
+      { name: "Word Guess", url: "./94 - Word Guess/index.html" },
+      { name: "Whack a Mole Game", url: "./95 - Whack a Mole Game/index.html" },
+      { name: "Pomodoro Clock", url: "./96 - Pomodoro Clock/index.html" },
+      { name: "Captcha Generator", url: "./97 - Captcha Generator/index.html" },
+      { name: "Math Game", url: "./98 - Math Game/index.html" },
+      { name: "Blackjack Game", url: "./99 - Blackjack Game/index.html" },
+      { name: "Coin Game", url: "./100 - Coin Game/index.html" },
+      { name: "Bomb Throw Game", url: "./101 - Bomb Throw Game/index.html" },
+      { name: "Minesweeper Game", url: "./102 - Minesweeper Game/index.html" },
+      { name: "Retro Mario Game", url: "./103 - Retro Mario Game/index.html" },
+      { name: "Catch Me If You Can", url: "./104 - Catch Me If You Can/index.html" },
+      { name: "Word For Alphabet Speak Aloud", url: "./105 - Word For Alphabet Speak Aloud/index.html" },
+      { name: "Snowy Particle Js", url: "./106 - Snowy Particle Js/index.html" },
+      { name: "Stack Game", url: "./107 - Stack Game/index.html" },
+      { name: "Maths addition", url: "./108 - Maths addition/index.html" },
+      { name: "Number Facts", url: "./109 - Number Facts/index.html" },
+      { name: "Pixel to em Converter", url: "./110 - Pixel to em Converter/index.html" },
+      { name: "Luminosity Particle Js", url: "./111 - Luminosity Particle Js/index.html" },
+      { name: "Maze Game", url: "./112 - Maze Game/index.html" },
+      { name: "Minesweeper", url: "./113 - Minesweeper/index.html" }
+  
+];
+
+  // Filter suggestions based on input
+  const filteredSuggestions = suggestions.filter(suggestion =>
+    suggestion.name.toLowerCase().includes(input.toLowerCase())
+);
+
+// Display suggestions
+const suggestionList = document.getElementById("suggestion-list");
+if (filteredSuggestions.length > 0) {
+    suggestionList.innerHTML = '';
+    filteredSuggestions.forEach(suggestion => {
+      const li = document.createElement('a');
+      li.textContent = suggestion.name;
+      li.setAttribute('href', suggestion.url);
+      li.classList.add('game_page');
+      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();
-
     if (!projectName.includes(input)) {
       projects[i].style.display = "none";
     } else {
@@ -83,6 +224,7 @@ function search_project() {
     }
   }
 
+  // Display message if no projects found
   let existingMessage = document.getElementById("noProjectMessage");
   if (existingMessage) {
     existingMessage.remove();
@@ -94,12 +236,16 @@ function search_project() {
     noProjectMessage.innerHTML = "No project found";
     projectsContainer.appendChild(noProjectMessage);
   }
+  
+  if(input.length<=1){
+    suggestionList.style.display="none"
+  }
 }
 
 function renderProjects() {
   window.scrollTo({ top: 0, behavior: "smooth" });
   const projectsPerPage = 30;
-  const startIndex = (currentPage - 1) * projectsPerPage;
+  const startIndex = (current_page - 1) * projectsPerPage;
   const endIndex = startIndex + projectsPerPage;
 
   for (let i = 0; i < x.length; i++) {
@@ -112,12 +258,12 @@ function renderProjects() {
 }
 
 function goToPage(page) {
-  currentPage = page;
+  current_page = page;
   renderProjects();
 
   const buttons = document.querySelectorAll(".pagination button");
   buttons.forEach((button) => {
-    if (button.textContent == currentPage) {
+    if (button.textContent == current_page) {
       button.classList.add("active");
     } else {
       button.classList.remove("active");
@@ -126,17 +272,17 @@ function goToPage(page) {
 }
 
 function goToNextPage() {
-  if (currentPage < Math.ceil(x.length / 30)) {
-    currentPage++;
+  if (current_page < Math.ceil(x.length / 30)) {
+    current_page++;
     renderProjects();
     updateActiveButton();
   }
 }
 
 function goToPreviousPage() {
-  console.log(currentPage)
-  if (currentPage > 1) {
-    currentPage--;
+  console.log(current_page)
+  if (current_page > 1) {
+    current_page--;
     renderProjects();
     updateActiveButton();
   }
@@ -145,25 +291,23 @@ function goToPreviousPage() {
 function updateActiveButton() {
   const buttons = document.querySelectorAll(".pagination button");
   buttons.forEach((button) => {
-    if (parseInt(button.textContent) === currentPage) {
+    if (parseInt(button.textContent) === current_page) {
       button.classList.add("active");
     } else {
       button.classList.remove("active");
     }
   });
 }
-
 function togglePaginationButtonsVisibility() {
   const prevButton = document.querySelector('.prev_btn');
   const nextButton = document.querySelector('.next_btn');
-  if (currentPage === 1) {    
-    console.log("start")
+  if (current_page === 1) {    
     prevButton.style.display = 'none';
   } else {
     prevButton.style.display = 'inline-block';
   }
 
-  if (currentPage === 4) {
+  if (current_page === Math.ceil(x.length / 30)) {
 
     nextButton.style.display = 'none';
     console.log("end")
 
@@ -423,11 +423,12 @@ header {
 .toggleButton {
   display: block;
   margin: 0 auto;
+  z-index: 2;
 }
 
 #searchbar {
   margin: 14px 0px;
-  background-color: rgba(38, 35, 35, 0.526);
+  background-color: rgb(15, 13, 38);
   color: white;
 }
 
@@ -597,4 +598,7 @@ header {
 .pagination button.active {
   background-color: black;
   color: white;
+}
+.game_page {
+  cursor: pointer;
 }
@@ -24,6 +24,35 @@
       padding: 10px;
       text-align: center;
     }
+    #suggestion-list {
+      padding-top: 36px;
+      display: none;
+      background-color: #423d7a;
+      max-height: 200px;
+      overflow-y: auto;
+      z-index: 1;
+      width:50%;
+      position: relative;
+      border-radius: 15px;
+      color: white;
+      bottom: 50px;
+    scrollbar-width: none; 
+    }
+    #suggestion-list::-webkit-scrollbar {
+      display: none; 
+  }
+    #suggestion-list a {
+      padding: 10px;
+      cursor: pointer;
+      display: block;
+      color: #fcfcfc;
+      text-decoration: none;
+    }
+  
+    #suggestion-list a:hover {
+      background-color: #f5f5f5;
+      color: #423d7a;
+    }
   </style>
 
 
@@ -52,7 +81,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>
@@ -73,6 +104,7 @@ <h1>30 Days of JavaScript</h1>
 
   <!-- Scroll To Top -->
   <a class="scrollToTop"><span></span></a>
+
   <!-- Scroll to Top End -->
   <!-- <i class="fa-brands fa-square-github"></i> -->
   <!-- Main Section Start -->
Original file line number	Diff line number	Diff line change
`@@ -423,11 +423,12 @@ header {`
`423`	`423`	`.toggleButton {`
`424`	`424`	`display: block;`
`425`	`425`	`margin: 0 auto;`
	`426`	`+ z-index: 2;`
`426`	`427`	`}`
`427`	`428`
`428`	`429`	`#searchbar {`
`429`	`430`	`margin: 14px 0px;`
`430`		`- background-color: rgba(38, 35, 35, 0.526);`
	`431`	`+ background-color: rgb(15, 13, 38);`
`431`	`432`	`color: white;`
`432`	`433`	`}`
`433`	`434`
`@@ -597,4 +598,7 @@ header {`
`597`	`598`	`.pagination button.active {`
`598`	`599`	`background-color: black;`
`599`	`600`	`color: white;`
	`601`	`+}`
	`602`	`+.game_page {`
	`603`	`+ cursor: pointer;`
`600`	`604`	`}`