corrected the code

Author: tajulafreen

Source-Code/WeatherApp/index.html

@@ -26,10 +26,10 @@ <h4 id="date-time" class="time">2024-02-06 3:59</h4>
 
     </ul>
     <ul class="weather-suggestions">
-        <form>
+        
         <input class="input" id="input" type="text" placeholder="Enter city name">
         <button class="search" id="btn"><i class="fa fa-search"></i></button>
-        </form>
+        
         <ul>
         <li>
             <a class="location" id="getlocation"><i class="fa fa-location-arrow "> Get Weather of your city</i></a>

Source-Code/WeatherApp/script.js

@@ -66,10 +66,10 @@ locat.addEventListener("click", () =>
   navigator.geolocation.getCurrentPosition(gotlocation, failedlocation)
 );
 const citiesArray = [...cities];
-// citiesArray.forEach((element) => {
-//   element.addEventListener("click", async () => {
-//     const cityName = element.innerText; // Extract city name from the clicked element
-//     const result = await getData(cityName); // Pass the city name to getData
-//     updateWeatherInfo(result);
-//   });
-// });
+citiesArray.forEach((element) => {
+  element.addEventListener("click", async () => {
+    const cityName = element.innerText; // Extract city name from the clicked element
+    const result = await getData(cityName); // Pass the city name to getData
+    updateWeatherInfo(result);
+  });
+});

Source-Code/WeatherApp/style.css

@@ -35,7 +35,7 @@
 }
 
 .temp{
-  font-size: 56px;
+  font-size: 50px;
   font-weight: 700;
 }
 .city{
@@ -50,11 +50,12 @@ li{
   display: flex;
   flex-direction: row;
   align-items: flex-end; 
-  padding: 5% 10%;
+  padding: 5% 5%;
   gap: 5%;
-  justify-content: space-between;
-
+  justify-content: space-evenly;
+  width: 50%;
 }
+
 .column{
   display: flex;
   flex-direction: column;
@@ -80,11 +81,6 @@ li{
   z-index: 1;
   padding: 3em 2em;
 }
-form {
-margin-bottom: 3em;
-display: flex;
-gap: 10px;
-}
 .input{
   height: 40px;
   width: 90%;
@@ -104,6 +100,8 @@ gap: 10px;
   border-radius: 9px;
   border: inherit;
   background-color: rgb(129, 180, 231);
+  margin-left: 3%;
+  position: absolute;
 }
 .fa-search{
   color: #fafafa;