From 8a5feb70cc7ee73dd912eb84aafc6bb4b349ea01 Mon Sep 17 00:00:00 2001
From: khemraj parate <148627918+khemrajparate@users.noreply.github.com>
Date: Mon, 14 Oct 2024 15:42:35 +0530
Subject: [PATCH] Update script.js

state funcation and merge API key
---
 script.js | 115 ++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 72 insertions(+), 43 deletions(-)

diff --git a/script.js b/script.js
index 3aefd91..c4f2632 100644
--- a/script.js
+++ b/script.js
@@ -1,73 +1,102 @@
 // Assigning all the variables and the api Key and Url
-
 const apiKey = "19f175c397782f927e89a4261b9f3ac5";
 const apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q=";
 const searchBox = document.querySelector(".searchbox input");
-const searchBtn = document.querySelector(".searchbox button")
+const searchBtn = document.querySelector(".searchbox button");
 const weatherIcon = document.querySelector(".weather-icon");
+const currentLocationBtn = document.getElementById("current-location-btn");
+
+// Function to get weather by city name
+async function checkWeather(city) {
+    const response = await fetch(apiUrl + city  + `&appid=${apiKey}`);
+    await handleWeatherResponse(response);
+}
+
+async function checkWeather(state) {
+    const response = await fetch(apiUrl + state  + `&appid=${apiKey}`);
+    await handleWeatherResponse(response);
+}
+
+// Function to get weather by latitude and longitude
+async function checkWeatherByLocation(lat, lon) {
+    const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?units=metric&lat=${lat}&lon=${lon}&appid=${apiKey}`);
+    await handleWeatherResponse(response);
+}
 
-// Function for the main task (getting the data from API and displaying it)
 
-async function checkWeather(city){
 
-    
-    const response = await fetch(apiUrl + city + `&appid=${apiKey}`);
-    if(response.status == 404){
+// Function to handle the API response and update the UI
+async function handleWeatherResponse(response) {
+    if (response.status == 404) {
         document.querySelector(".error").style.display = "block";
         document.querySelector(".weather").style.display = "none";
         searchBox.value = "";
-    }
-    else{
+    } else {
         document.querySelector(".error").style.display = "none";
-    }
-    var data = await response.json();
-
-    document.querySelector(".city").innerHTML = data.name;
-
-    document.querySelector(".temperature").innerHTML = Math.round(data.main.temp) + "°c";
+        const data = await response.json();
 
-    document.querySelector(".humidity").innerHTML = data.main.humidity + "%";
+        document.querySelector(".city").innerHTML = data.name;
+        document.querySelector(".state").innerHTML = data.name2;
+        document.querySelector(".temperature").innerHTML = Math.round(data.main.temp) + "°c";
+        document.querySelector(".humidity").innerHTML = data.main.humidity + "%";
+        document.querySelector(".wind").innerHTML = data.wind.speed + " kmph";
 
-    document.querySelector(".wind").innerHTML = data.wind.speed + " kmph";
+        // Update the weather icon based on weather conditions
+        updateWeatherIcon(data.weather[0].main);
 
-    // Conditions for to check and display relevant image according to the weather conditions
+        document.querySelector(".weather").style.display = "block";
+    }
+}
 
-    if(data.weather[0].main == "Clouds"){
+// Function to update the weather icon based on weather conditions
+function updateWeatherIcon(condition) {
+    if (condition === "Clouds") {
         weatherIcon.src = "images/clouds.png";
-    }
-    else if(data.weather[0].main == "Clear"){
+    } else if (condition === "Clear") {
         weatherIcon.src = "images/sun.png";
-    }
-    else if(data.weather[0].main == "Rain"){
+    } else if (condition === "Rain") {
         weatherIcon.src = "images/rain.png";
-    }
-    else if(data.weather[0].main == "Haze"){
+    } else if (condition === "Haze") {
         weatherIcon.src = "images/haze.png";
-    }
-    else if(data.weather[0].main == "Drizzle"){
+    } else if (condition === "Drizzle") {
         weatherIcon.src = "images/drizzle.png";
-    }
-    else if(data.weather[0].main == "Mist"){
+    } else if (condition === "Mist") {
         weatherIcon.src = "images/mist.png";
     }
-    
-    document.querySelector(".weather").style.display = "block";
-
-    // Making the searchBox's value empty once searched
-    searchBox.value = "";
-
 }
 
-// Event listener for the button
-
-searchBtn.addEventListener("click", ()=>{
+// Event listener for the search button
+searchBtn.addEventListener("click", () => {
     checkWeather(searchBox.value);
-})
+});
 
-// Enter button(keyCode = 13) event listener
-
-searchBox.addEventListener('keyup', function(event) {
+// Event listener for the 'Enter' key press (keyCode = 13)
+searchBox.addEventListener("keyup", function(event) {
     if (event.keyCode === 13) {
         checkWeather(searchBox.value);
     }
-});
\ No newline at end of file
+});
+
+// Function to get the user's current location using Geolocation API
+function getLocation() {
+    if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition((position) => {
+            const lat = position.coords.latitude;
+            const lon = position.coords.longitude;
+            checkWeatherByLocation(lat, lon); // Fetch weather for current location
+        }, () => {
+            document.querySelector(".error").style.display = "block";
+            document.querySelector(".error p").textContent = "Unable to retrieve location.";
+        });
+    } else {
+        document.querySelector(".error").style.display = "block";
+        document.querySelector(".error p").textContent = "Geolocation is not supported by this browser.";
+    }
+}
+
+// Event listener for the current location button
+currentLocationBtn.addEventListener("click", getLocation);
+
+// Automatically fetch weather for current location on page load (optional)
+// Uncomment the line below if you want to auto-fetch the weather on page load
+// window.onload = getLocation;