Optimised index.html script.js and styles.css

paren-thesis · paren-thesis · commit 6b924727edbc · 2024-10-30T07:50:04.000Z
diff --git a/index.html b/index.html
@@ -3,42 +3,40 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>nersh</title>
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
     <div class="container">
         <header class="head">
-        <nav>
-            <a href="#home">Home</a>
-            <a href="#nerdy">Feeling nerdy!</a>
-            <a href="#newsfeed">Newsfeed</a>
-        </nav>
-    </header>
+            <nav>
+                <a href="#home">Home</a>
+                <a href="#nerdy">Feeling nerdy!</a>
+                <a href="#newsfeed">Newsfeed</a>
+            </nav>
+        </header>
+        
         <div class="nersh-bruce">
             <header>
                 <h1>nersh</h1>
             </header>
             <div class="search-container">
                 <form action="#">
-                    <input type="text" id="search-box" class="search-box" placeholder="search like a nerd... "autocomplete="off" oninput="showSuggestions()">
+                    <input type="text" id="search-box" class="search-box" placeholder="search like a nerd..." autocomplete="off" oninput="showSuggestions()">
                     <ul id="suggestions-list" class="suggestions-list"></ul>
-                    <div class="buttons">
-                        <button type="submit" class="search-button">nersh-it</button>
-                        <!-- <button type="button" class="feeling-lucky-button">feeling nerdy!</button> -->
-                    </div>
+                    <button type="submit" class="search-button">nersh-it</button>
                 </form>
             </div>
         </div>
+
         <footer>
             <p><a href="">Privacy</a></p>
             <p><a href="">Contact</a></p>
             <p><a href="">Docs</a></p>
             <p><a href="">Copyright</a></p>
         </footer>
-        </div>
+    </div>
+
     <script src="script.js"></script>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -1,32 +1,28 @@
 function showSuggestions() {
-    const input = document.getElementById('search-box').value; // No need to convert to lowercase here
+    const input = document.getElementById('search-box').value;
     const suggestionsList = document.getElementById('suggestions-list');
+    const maxSuggestions = 5; // Limit suggestions
 
-    // Clear existing suggestions
     suggestionsList.innerHTML = '';
 
     if (input === '') {
         suggestionsList.style.display = 'none';
         return;
     }
 
-    // Determine the first letter of the input
-    const firstLetter = input.charAt(0).toLowerCase(); // Keep it lowercase for directory
-
-    // Fetch the relevant JSON file based on the first letter
+    const firstLetter = input.charAt(0).toLowerCase();
     fetch(`./terms/${firstLetter}/terms.json`)
         .then(response => response.json())
         .then(data => {
-            // Normalize input for filtering (e.g., remove spaces and underscores)
-            const normalizedInput = input.replace(/[_\s]/g, ''); // Remove underscores and spaces
+            const normalizedInput = input.replace(/[_\s]/g, '');
+            const filteredTerms = data.terms.filter(term =>
+                term.replace(/[_\s]/g, '').toLowerCase().startsWith(normalizedInput.toLowerCase())
+            );
+
+            const limitedTerms = filteredTerms.slice(0, maxSuggestions); // Limit suggestions
 
-            const filteredTerms = data.terms.filter(term => {
-                // Normalize the term to compare with the input
-                return term.replace(/[_\s]/g, '').toLowerCase().startsWith(normalizedInput.toLowerCase());
-            });
-            
-            if (filteredTerms.length > 0) {
-                filteredTerms.forEach(term => {
+            if (limitedTerms.length > 0) {
+                limitedTerms.forEach(term => {
                     const listItem = document.createElement('li');
                     listItem.textContent = term;
                     listItem.onclick = () => selectTerm(term);
@@ -44,8 +40,16 @@ function showSuggestions() {
 }
 
 function selectTerm(term) {
-    // Redirect to the term.html file in the term folder
-    const formattedTerm = term.toLowerCase().replace(/ /g, '_'); // Ensure correct formatting
-    const firstLetter = term.charAt(0).toLowerCase(); // Keep this in lowercase for the path
+    const formattedTerm = term.toLowerCase().replace(/ /g, '_');
+    const firstLetter = term.charAt(0).toLowerCase();
     window.location.href = `./terms/${firstLetter}/${formattedTerm}.html`;
 }
+
+// Make "nersh-it" button functional
+document.querySelector('.search-button').onclick = function(event) {
+    event.preventDefault();
+    const searchValue = document.getElementById('search-box').value.trim();
+    if (searchValue) {
+        selectTerm(searchValue);
+    }
+};
diff --git a/styles.css b/styles.css
@@ -12,6 +12,7 @@ body {
   background-repeat: no-repeat;
   background-size: cover;
 }
+
 .container .head {
   background-color: rgba(127, 255, 212, 0.199);
   padding: 30px;
@@ -21,34 +22,31 @@ body {
   width: 100%;
   z-index: 1000;
 }
+
 .container .head nav {
   margin-left: 70%;
   font-size: 20px;
 }
-.container .head a:hover {
-    text-transform: lowercase;
-  /* text-transform: lowercase; */
-  /* text-decoration: none; */
-  /* color: rgba(255, 255, 255, 0.575); */
-}
+
 .container .head nav a {
   color: white;
   margin: 0px 15px;
-  /* text-decoration: none; */
   font-weight: bold;
+  transition: transform 0.3s ease;
+}
+
+.container .head nav a:hover {
+  transform: scale(0.9);
 }
 
 /* Container */
 .container {
   text-align: center;
 }
+
 .container .nersh-bruce {
   background-color: rgba(72, 71, 97, 0.637);
-  /* opacity: 0.4; */
   padding: 100px;
-  /* border-width: 0.2px; */
-  /* border-color: ; */
-  /* border-style: solid; */
   border-radius: 10px;
   box-shadow: 0px 0px 20px 0px #201f1f;
 }
@@ -64,19 +62,34 @@ header h1 {
 .search-container {
   margin-top: 20px;
   position: relative;
+  display: flex;
 }
 
 .search-box {
   width: 400px;
   height: 40px;
   padding: 10px;
   font-size: 25px;
-  border-radius: 20px;
+  border-radius: 20px 0 0 20px;
   border: none;
   outline: none;
   background-color: rgba(245, 245, 245, 0.589);
 }
 
+.search-button {
+  background-color: #1a73e8;
+  color: #e8eaed;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 0 20px 20px 0;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.search-button:hover {
+  background-color: #5f6368;
+}
+
 /* Suggestions list */
 .suggestions-list {
   list-style: none;
@@ -86,7 +99,7 @@ header h1 {
   width: 400px;
   border-radius: 10px;
   position: absolute;
-  top: 60px; /* Positioned above the search bar */
+  top: 50px;
   z-index: 1;
   display: none;
 }
@@ -100,61 +113,29 @@ header h1 {
   background-color: #3c4043;
 }
 
-/* Buttons styling */
-.buttons {
-  margin-top: 20px;
-}
-
-button {
-  background-color: #3c4043;
-  color: #e8eaed;
-  border: none;
-  padding: 10px 20px;
-  margin: 5px;
-  border-radius: 5px;
-  cursor: pointer;
-}
-/* .container .nersh-bruce .search-container input{
-transition: all 0.3s ease;
-}
-.container .nersh-bruce .search-container input:hover{
-    background-color: #fbbc05;
-} */
-button:hover {
-  background-color: #5f6368;
-}
-
-.search-button {
-  background-color: #1a73e8;
-}
-
-.feeling-lucky-button {
-  background-color: #fbbc05;
-}
-
 /* Footer styling */
 footer {
   display: flex;
   justify-content: space-evenly;
   margin-top: 5rem;
 }
-footer a{
-    color: white;
+
+footer a {
+  color: white;
 }
-footer a:hover{
-    text-transform: lowercase;
+
+footer a:hover {
+  text-transform: lowercase;
 }
+
 footer p {
   margin-top: 30px;
   color: #9aa0a6;
 }
 
 /* Responsiveness */
 @media (max-width: 768px) {
-  .search-box {
-    width: 300px;
-  }
-
+  .search-box,
   .suggestions-list {
     width: 300px;
   }
@@ -165,11 +146,7 @@ footer p {
     width: 200px;
   }
 
-  .suggestions-list {
-    width: 200px;
-  }
-
   header h1 {
     font-size: 48px;
   }
-}
+}
