added some more codes

Author: nirajxdev

05_weather-app/script.js

@@ -1,17 +1,50 @@
 const cityInput = document.getElementById('city-input');
-const weatherData = document.getElementById('weather-data');
+const weatherData = document.getElementById('weather-data'); // You aren't using this yet, but kept it in
 const cityName = document.getElementById('city-name');
-const temperature = document.getElementById('temperature');
+const temperatureElement = document.getElementById('temperature');
 const weatherDesc = document.getElementById('weather-description');
 const humidityValue = document.getElementById('humidity');
 const windspeedValue = document.getElementById('windspeed');
-const search = document.querySelector('#weather-form button');
+const form = document.getElementById('weather-form'); // Target the form, not just the button
 
-search.addEventListener('click', () => {
-    const APIKey = 'f23d9832cb86b7e516bf0bc3272bf1de';
-    const city = cityInput.value;
-    if (city == '') {
+const API_KEY = 'f23d9832cb86b7e516bf0bc3272bf1de'; // Keep key separate
+
+// Use the 'submit' event on the form, not 'click' on the button.
+// This handles both clicking the button and pressing "Enter".
+form.addEventListener('submit', (event) => {
+    event.preventDefault(); // STOPS the page reload
+
+    const city = cityInput.value.trim();
+    
+    // If city is empty, stop.
+    if (!city) {
         return;
     }
-    fetch(`https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={f23d9832cb86b7e516bf0bc3272bf1de}`)
-})
+
+    fetchWeather(city);
+});
+
+function fetchWeather(city) {
+    // Correct URL structure: uses 'q' for city, adds units=metric, and uses ${} for variables
+    const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${API_KEY}`;
+
+    fetch(url)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('City not found');
+            }
+            return response.json();
+        })
+        .then(data => {
+            // Update UI
+            cityName.textContent = data.name;
+            temperatureElement.textContent = `${Math.round(data.main.temp)}°C`; // Added missing ${} and unit
+            weatherDesc.textContent = data.weather[0].description;
+            humidityValue.textContent = `${data.main.humidity}%`;
+            windspeedValue.textContent = `${data.wind.speed} km/h`;
+        })
+        .catch(error => {
+            console.error('Error fetching weather data:', error);
+            alert("City not found or API error.");
+        });
+}

index.html

@@ -74,9 +74,7 @@ <h2 class="text-lg font-medium uppercase tracking-widest text-gray-700 mb-6">
                         Event Delegation, Input Handling
                     </span>
                 </a>
-            </li>
-             
-            
+            </li>            
         </ul>
 
         <footer class="mt-20 text-center text-xs text-gray-400">