Refactor button structure in search box and improve formatting in script.js

Author: Aamir-Rafique

index.html

@@ -27,13 +27,12 @@ <h1 class="text-3xl font-bold text-center text-blue-600 mb-4">Weather App</h1>
             <input type="text" placeholder="Enter City"
                 class="flex-1 px-4 py-2 rounded-md border border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500 transition" />
 
-            <button class="bg-blue-600 cursor-pointer text-white px-4 py-2 rounded-md hover:bg-blue-700 active:bg-blue-800 transition">
-                Search
-            </button>
+            <button class="bg-blue-600 cursor-pointer text-white px-4 py-2 rounded-md hover:bg-blue-700 active:bg-blue-800 transition">Search</button>
 
             <button id="geo-btn"
                 class="bg-gray-600 cursor-pointer text-white  px-4 py-2 rounded-md hover:bg-gray-700 active:bg-gray-800 transition">
-                <i title="Use Current Location" class="fa-sharp fa-solid fa-location-dot text-2xl"></i> </button>
+                <i title="Use Current Location" class="fa-sharp fa-solid fa-location-dot text-2xl"></i>
+            </button>
         </div>
 
 

script.js

@@ -111,7 +111,7 @@ document.getElementById("geo-btn").addEventListener("click", () => {
             const data = await response.json();
 
             displayWeatherInfo(data);
-            showWeatherInfoBox();   
+            showWeatherInfoBox();
         },
         function (error) {
             alert("Unable to retrieve your location.");
@@ -128,5 +128,5 @@ document.addEventListener("DOMContentLoaded", () => {
 })
 
 function showWeatherInfoBox() {
-    weatherInfoBox.style.display='flex';
+    weatherInfoBox.style.display = 'flex';
 }