added ui element to show the error

Author: Uvesh99

css/style.css

@@ -311,3 +311,9 @@ html {
 body {
     overflow: auto;
 }
+.error-message {
+    color: red;
+    margin-top: 10px;
+    font-size: 14px;
+    display: none; 
+}

index.html

@@ -24,6 +24,7 @@ <h2><i class="fas fa-search-location"></i> Enter a City</h2>
              <div id="loading" class="loading" style="display: none;">
                 <i class="fas fa-spinner fa-spin"></i> Loading...
             </div>
+            <div id="error-message" class="error-message" style="display: none;"></div>
             <ul id="suggestions"></ul>
         </div>
 

index.js

@@ -6,6 +6,7 @@ const dateTime = document.getElementById("current-date");
 const suggestionsBox = document.getElementById('suggestions');
 const suggestions = document.getElementsByClassName('suggestion');
 const loadingIndicator = document.getElementById("loading");
+const errorMessage = document.getElementById("error-message");
 let forecastInfo = []; 
 let debounceTimeout;
 
@@ -17,6 +18,15 @@ function hideLoading() {
   loadingIndicator.style.display = "none"; 
 }
 
+function displayErrorMessage(message) {
+  errorMessage.textContent = message;
+  errorMessage.style.display = "block"; // Show the error message
+}
+
+function hideErrorMessage() {
+  errorMessage.style.display = "none"; // Hide the error message
+}
+
 if (cityInput) {
   cityInput.addEventListener('input', async function() {
     const query = cityInput.value.trim();
@@ -72,7 +82,7 @@ const fetchData = () => {
           hideLoading();
         });
     }  else {
-      alert("Please enter a city name.");
+      displayErrorMessage("Please enter a city name.");
     }
 }
 
@@ -100,9 +110,10 @@ function getWeatherByCity(city) {
     })
     .then((data) => {
       sessionStorage.setItem("weatherData", JSON.stringify(data));
+      hideErrorMessage();
     })
     .catch((error) => {
-      alert(`${city} not found. Please try again...`);
+      displayErrorMessage(`${city} not found. Please try again...`);
       cityInput.value = "";
       hideLoading();
       throw error;
@@ -121,11 +132,12 @@ function getForecastByCity(city) {
     })
     .then((data) => {
       sessionStorage.setItem("forecastData", JSON.stringify(data));
+      hideErrorMessage(); 
       hideLoading();
       window.location = "weather_info.html"; 
     })
     .catch((error) => {
-      alert(`${city} not found. Please try again...`);
+      displayErrorMessage(`${city} not found. Please try again...`);
       cityInput.value = "";
       hideLoading();
       throw error;