From dc9d632b3cbde3ce799e37af9dbfc899ac435ad5 Mon Sep 17 00:00:00 2001
From: Sylvia Uzoh <uzohchinasa@gmail.com>
Date: Thu, 24 Oct 2024 13:49:56 +0100
Subject: [PATCH 1/3] Updates

---
 src/assets/css/style.css |  6 ++++++
 src/assets/js/script.js  | 13 +++++++++++++
 src/index.html           |  2 ++
 3 files changed, 21 insertions(+)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 904c2bb..c9d06dc 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -59,6 +59,12 @@
   cursor: pointer;
 }
 
+.error-message {
+  color: #FF0000; /* Red color for error */
+  font-size: 0.9em;
+  margin-top: 5px;
+}
+
 /* Responsive Design */
 @media (min-width: 601px) {
   .body-search {
diff --git a/src/assets/js/script.js b/src/assets/js/script.js
index 36de290..478bd7d 100644
--- a/src/assets/js/script.js
+++ b/src/assets/js/script.js
@@ -1,6 +1,19 @@
 document.addEventListener("DOMContentLoaded", function (e) {
   const searchForm = document.getElementById("searchForm");
 
+  document.querySelector('.search-button').addEventListener('click', function(event) {
+    const queryInput = document.getElementById('query').value.trim();
+    const errorMessage = document.getElementById('error-message');
+  
+    if (!queryInput) {
+      event.preventDefault(); // Prevent form submission
+      errorMessage.textContent = "Please enter a search term.";
+      errorMessage.style.display = "block";
+    } else {
+      errorMessage.style.display = "none"; // Hide error if input is valid
+    }
+  });
+
   searchForm.addEventListener("submit", (e) => {
     e.preventDefault();
 
diff --git a/src/index.html b/src/index.html
index 8cb7279..c9810dc 100644
--- a/src/index.html
+++ b/src/index.html
@@ -157,6 +157,8 @@ <h3>Find content you can share, use, and remix.</h3>
               value=""
               placeholder="Enter your search query" />
             <button class="search-button">Search</button>
+            <!-- Placeholder for error message -->
+            <div id="error-message" class="error-message" style="display: none;"></div>
           </div>
           <div
             class="search-checkbox"

From b642fed963703b4bfb6cf2d3081969156e0487e8 Mon Sep 17 00:00:00 2001
From: Sylvia Uzoh <uzohchinasa@gmail.com>
Date: Thu, 24 Oct 2024 15:18:31 +0100
Subject: [PATCH 2/3] Empty field validation to eliminate use of native browser
 modal

---
 src/assets/css/style.css | 12 ++++++++++++
 src/assets/js/script.js  | 28 +++++++++++++++++-----------
 src/index.html           |  6 +++---
 3 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 07e7fec..d5eb284 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -67,6 +67,15 @@
   color: #FF0000; /* Red color for error */
   font-size: 0.9em;
   margin-top: 5px;
+  display: none;
+}
+
+.error-input, .error-input:focus {
+  border-color: #FF0000 !important; /* Red border for error */
+}
+
+.error-message-display {
+  display: block;
 }
 
 /* Responsive Design */
@@ -89,6 +98,9 @@
 
     border-radius: 0 8px 8px 0;
   }
+  .error-message-display {
+    display: none !important;
+  }
 }
 @media(min-width:480px) and (max-width:768px) {
   .search-engines{
diff --git a/src/assets/js/script.js b/src/assets/js/script.js
index 478bd7d..3369aff 100644
--- a/src/assets/js/script.js
+++ b/src/assets/js/script.js
@@ -1,18 +1,28 @@
 document.addEventListener("DOMContentLoaded", function (e) {
   const searchForm = document.getElementById("searchForm");
 
-  document.querySelector('.search-button').addEventListener('click', function(event) {
-    const queryInput = document.getElementById('query').value.trim();
+  const inputValidator = (event) => {
+    const queryInput = document.getElementById('query');
     const errorMessage = document.getElementById('error-message');
-  
-    if (!queryInput) {
+
+    // Validate input value
+    const hasInput = queryInput?.value.trim();
+
+    if (!hasInput) {
       event.preventDefault(); // Prevent form submission
       errorMessage.textContent = "Please enter a search term.";
-      errorMessage.style.display = "block";
+      errorMessage.classList.add('error-message-display');
+      queryInput?.classList.add('error-input');
     } else {
-      errorMessage.style.display = "none"; // Hide error if input is valid
+      errorMessage.classList.remove('error-message-display');
+      queryInput?.classList.remove('error-input');
     }
-  });
+  };
+
+  // Event listeners
+  document.querySelector('.search-button')?.addEventListener('click', inputValidator);
+  document.querySelector('#query')?.addEventListener('input', inputValidator);
+
 
   searchForm.addEventListener("submit", (e) => {
     e.preventDefault();
@@ -44,10 +54,6 @@ document.addEventListener("DOMContentLoaded", function (e) {
 
   // construct the URL
   function buildURL(form) {
-    if (form.query === "") {
-      alert("Please enter a search value");
-      return;
-    }
     if (form.searchEngineURL === undefined) {
       alert("Please select a search engine");
       return;
diff --git a/src/index.html b/src/index.html
index c9810dc..bc0cc72 100644
--- a/src/index.html
+++ b/src/index.html
@@ -155,10 +155,10 @@ <h3>Find content you can share, use, and remix.</h3>
               id="query"
               name="query"
               value=""
-              placeholder="Enter your search query" />
+              placeholder="Enter your search query"
+              required/>
+              <div id="error-message" class="error-message error-message-display"></div>
             <button class="search-button">Search</button>
-            <!-- Placeholder for error message -->
-            <div id="error-message" class="error-message" style="display: none;"></div>
           </div>
           <div
             class="search-checkbox"

From a1adb9108c7f71c37d800c78a7dfc28db4cc2e33 Mon Sep 17 00:00:00 2001
From: Sylvia Uzoh <uzohchinasa@gmail.com>
Date: Fri, 25 Oct 2024 19:07:36 +0100
Subject: [PATCH 3/3] Adjustments for all screens

---
 src/assets/css/style.css |  3 ---
 src/index.html           | 10 ++--------
 2 files changed, 2 insertions(+), 11 deletions(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index d5eb284..953da61 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -98,9 +98,6 @@
 
     border-radius: 0 8px 8px 0;
   }
-  .error-message-display {
-    display: none !important;
-  }
 }
 @media(min-width:480px) and (max-width:768px) {
   .search-engines{
diff --git a/src/index.html b/src/index.html
index bc0cc72..c61baec 100644
--- a/src/index.html
+++ b/src/index.html
@@ -150,16 +150,10 @@ <h2>Our Work Relies On You!</h2>
         <div class="body-first-sect">
           <div class="body-search">
             <h3>Find content you can share, use, and remix.</h3>
-            <input
-              type="text"
-              id="query"
-              name="query"
-              value=""
-              placeholder="Enter your search query"
-              required/>
-              <div id="error-message" class="error-message error-message-display"></div>
+            <input type="text" id="query" name="query" value="" placeholder="Enter your search query" required />
             <button class="search-button">Search</button>
           </div>
+          <div id="error-message" class="error-message error-message-display"></div>
           <div
             class="search-checkbox"
             style="display: none">