updated search button functionality

shivansh090 · Dec 20, 2023 · 85ac937 · 85ac937
1 parent edf69dc
commit 85ac937
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -26,8 +26,9 @@
                 </ul>
             </div>
             <div class="search-bar flex">
+                <form >
                 <input id="search-text" type="text" class="news-input" placeholder="e.g. Science">
-                <button id="search-button" class="search-button">Search</button>
+                <button id="search-button" class="search-button">Search</button></form>
             </div>
         </div>
     </nav>

diff --git a/index.js b/index.js
@@ -67,7 +67,8 @@ function onNavItemClick(id) {
 const searchButton = document.getElementById("search-button");
 const searchText = document.getElementById("search-text");
 
-searchButton.addEventListener("click", () => {
+searchButton.addEventListener("click", (event) => {
+    event.preventDefault();
     const query = searchText.value;
     if (!query) return;
     loadSampleData(query);

diff --git a/style.css b/style.css
@@ -89,7 +89,7 @@ nav {
 
 .news-input {
     width: 200px;
-    height: 100%;
+    height: 32px;
     padding-inline: 12px;
     border-radius: 4px;
     border: 2px solid #bbd0e2;