weather.js

// Tutorial by http://youtube.com/CodeExplained
// api key : 82005d27a116c2880c8f0fcb866998a0

// SELECT ELEMENTS
const iconElement = document.querySelector(".weather-icon");
const tempElement = document.querySelector(".temperature-value");
const descElement = document.querySelector(".temperature-description p");
const locationElement = document.querySelector(".location p");
const notificationElement = document.querySelector(".notification");

// App data

const weather = {
    temperature: {
        unit: "celsius"
    },
    windSpeed: 0, 
};
weather.temperature = {
    unit : "celsius"
}

// APP CONSTS AND VARS
const KELVIN = 273;
// API KEY
const key = "82005d27a116c2880c8f0fcb866998a0";

// CHECK IF BROWSER SUPPORTS GEOLOCATION
if('geolocation' in navigator){
    navigator.geolocation.getCurrentPosition(setPosition, showError);
}else{
    notificationElement.style.display = "block";
    notificationElement.innerHTML = "<p>Browser doesn't Support Geolocation</p>";
}

// SET USER'S POSITION
function setPosition(position){
    let latitude = position.coords.latitude;
    let longitude = position.coords.longitude;
    
    getWeather(latitude, longitude);
}

// Add these lines to your existing JavaScript code

// Function to get weather for Mumbai
function getWeatherForMumbai() {
    getWeather(19.0760, 72.8777); // Mumbai coordinates
}

// Function to get weather for Delhi
function getWeatherForDelhi() {
    getWeather(28.6139, 77.2090); // Delhi coordinates
}

// Function to get weather for Kolkata
function getWeatherForKolkata() {
    getWeather(22.5726, 88.3639); // Kolkata coordinates
}

// Function to get weather for Chennai
function getWeatherForChennai() {
    getWeather(13.0827, 80.2707); // Chennai coordinates
}

// Function to get weather for Bangalore
function getWeatherForBangalore() {
    getWeather(12.9716, 77.5946); // Bangalore coordinates
}
function getWeatherForNagpur() {
    getWeather(21.1458, 79.0882); // Nagpur coordinates
}

// Function to get weather for Visakhapatnam
function getWeatherForVisakhapatnam() {
    getWeather(17.6868, 83.2185); // Visakhapatnam coordinates
}

// Function to get weather for Jammu
function getWeatherForJammu() {
    getWeather(32.7266, 74.8570); // Jammu coordinates
}

// Function to get weather for Ahmedabad
function getWeatherForAhmedabad() {
    getWeather(23.0225, 72.5714); // Ahmedabad coordinates
}

// Function to get weather for Bhopal
function getWeatherForBhopal() {
    getWeather(23.2599, 77.4126); // Bhopal coordinates
}

// Function to get weather for Lucknow
function getWeatherForLucknow() {
    getWeather(26.8467, 80.9462); // Lucknow coordinates
}

// Function to get weather for Tokyo, Japan
function getWeatherForTokyo() {
    getWeather(35.6895, 139.6917); // Tokyo coordinates
}

// Function to get weather for New York, USA
function getWeatherForNewYork() {
    getWeather(40.7128, -74.0060); // New York coordinates
}


// Add these lines to your existing JavaScript code

// Function to get weather for Paris, France
function getWeatherForParis() {
    getWeather(48.8566, 2.3522); // Paris coordinates
}

// Function to get weather for Sydney, Australia
function getWeatherForSydney() {
    getWeather(-33.8688, 151.2093); // Sydney coordinates
}

// Function to get weather for Beijing, China
function getWeatherForBeijing() {
    getWeather(39.9042, 116.4074); // Beijing coordinates
}

// Function to get weather for Rio de Janeiro, Brazil
function getWeatherForRio() {
    getWeather(-22.9068, -43.1729); // Rio de Janeiro coordinates
}
function getWeatherForRome() {
    getWeather(41.9028, 12.4964); // Rome coordinates
}

function getWeatherForMadrid() {
    getWeather(40.4168, -3.7038); // Madrid coordinates
}

function getWeatherForSydney() {
    getWeather(-33.8688, 151.2093); // Sydney coordinates
}

function getWeatherForTokyo() {
    getWeather(35.6895, 139.6917); // Tokyo coordinates
}

function getWeatherForCairo() {
    getWeather(30.0444, 31.2357); // Cairo coordinates
}

function getWeatherForToronto() {
    getWeather(43.70, -79.42); // Toronto coordinates
}

function getWeatherForMoscow() {
    getWeather(55.7558, 37.6176); // Moscow coordinates
}

function getWeatherForRio() {
    getWeather(-22.9068, -43.1729); // Rio de Janeiro coordinates
}

function getWeatherForSingapore() {
    getWeather(1.3521, 103.8198); // Singapore coordinates
}

function getWeatherForDubai() {
    getWeather(25.276987, 55.296249); // Dubai coordinates
}


// Add new options for cities in your HTML select element
// ...

// Modify the event listener to include new cities
locationSelector.addEventListener("change", function () {
    const selectedLocation = locationSelector.value;

    if (selectedLocation === "current") {
        // Get weather for current location
        navigator.geolocation.getCurrentPosition(setPosition, showError);
    } else if (selectedLocation === "mumbai") {
        getWeatherForMumbai();
    } else if (selectedLocation === "delhi") {
        getWeatherForDelhi();
    } else if (selectedLocation === "kolkata") {
        getWeatherForKolkata();
    } else if (selectedLocation === "chennai") {
        getWeatherForChennai();
    } else if (selectedLocation === "bangalore") {
        getWeatherForBangalore();
    } else if (selectedLocation === "nagpur") {
        getWeatherForNagpur();
    } else if (selectedLocation === "vizag") {
        getWeatherForVisakhapatnam();
    } else if (selectedLocation === "jammu") {
        getWeatherForJammu();
    } else if (selectedLocation === "ahmedabad") {
        getWeatherForAhmedabad();
    } else if (selectedLocation === "bhopal") {
        getWeatherForBhopal();
    } else if (selectedLocation === "lucknow") {
        getWeatherForLucknow();
    } else if (selectedLocation === "tokyo") {
        getWeatherForTokyo();
    } else if (selectedLocation === "newyork") {
        getWeatherForNewYork();
    } else if (selectedLocation === "paris") {
        getWeatherForParis();
    } else if (selectedLocation === "sydney") {
        getWeatherForSydney();
    } else if (selectedLocation === "beijing") {
        getWeatherForBeijing();
    } else if (selectedLocation === "rio") {
        getWeatherForRio();
    } else if (selectedLocation === "london") {
        getWeatherForLondon();
    } else if (selectedLocation === "berlin") {
        getWeatherForBerlin();
    } else if (selectedLocation === "rome") {
        getWeatherForRome();
    } else if (selectedLocation === "madrid") {
        getWeatherForMadrid();
    } else if (selectedLocation === "toronto") {
        getWeatherForToronto();
    } else if (selectedLocation === "moscow") {
        getWeatherForMoscow();
    } else if (selectedLocation === "cairo") {
        getWeatherForCairo();
    } else if (selectedLocation === "singapore") {
        getWeatherForSingapore();
    } else if (selectedLocation === "dubai") {
        getWeatherForDubai();
    }
    // Add more countries as needed
    // ...
});


// SHOW ERROR WHEN THERE IS AN ISSUE WITH GEOLOCATION SERVICE
function showError(error){
    notificationElement.style.display = "block";
    notificationElement.innerHTML = `<p> ${error.message} </p>`;
}

// GET WEATHER FROM API PROVIDER
function getWeather(latitude, longitude) {
    let currentWeatherApi = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${key}`;
    let forecastApi = `https://api.openweathermap.org/data/2.5/onecall?lat=${latitude}&lon=${longitude}&exclude=minutely&appid=${key}`;

    // Fetch current weather
    fetch(currentWeatherApi)
        .then(response => response.json())
        .then(data => {
            weather.currentTemperature = Math.floor(data.main.temp - KELVIN);
            weather.currentDescription = data.weather[0].description;
            weather.currentIconId = data.weather[0].icon;
            weather.rainToday = (data.rain && data.rain['1h']) || 0; // Rain in the last 1 hour (if available)
            weather.windSpeed = data.wind.speed; 
            // Extract city and country from the API response
            weather.currentCity = data.name;
            weather.currentCountry = data.sys.country;
        })
        .then(() => {
            // Fetch forecast
            return fetch(forecastApi);
        })
        .then(response => response.json())
        .then(data => {
            // Forecast for tomorrow (index 0 in the daily array)
            const tomorrowForecast = data.daily[0];
            weather.tomorrowTemperature = Math.floor(tomorrowForecast.temp.day - KELVIN);
            weather.tomorrowDescription = tomorrowForecast.weather[0].description;
            weather.tomorrowIconId = tomorrowForecast.weather[0].icon;
            weather.rainTomorrow = (tomorrowForecast.rain || 0) + (tomorrowForecast.snow || 0); // Combined rain and snow

        })
        .then(() => {
            // Display weather
            displayWeather();
        })
        .catch(error => {
            notificationElement.style.display = "block";
            notificationElement.innerHTML = `<p>Failed to fetch weather data</p>`;
        });

// Log API response for current weather

    }

// Modify the displayWeather function to include rain information




// DISPLAY WEATHER TO UI
function displayWeather() {
    // Display current weather
    iconElement.innerHTML = `<img src="icons/${weather.currentIconId}.png"/>`;
    tempElement.innerHTML = `${weather.currentTemperature}°<span>C</span>`;
    descElement.innerHTML = weather.currentDescription;
    locationElement.innerHTML = `${weather.currentCity}, ${weather.currentCountry}`;
    document.querySelector(".wind-speed").innerHTML = `Wind Speed: ${weather.windSpeed} m/s`;

    // Display tomorrow's weather
    document.querySelector(".tomorrow-icon").innerHTML = `<img src="icons/${weather.tomorrowIconId}.png"/>`;
    document.querySelector(".tomorrow-temperature").innerHTML = `${weather.tomorrowTemperature}°<span>C</span>`;
    document.querySelector(".tomorrow-description").innerHTML = weather.tomorrowDescription;

    // ... (rest of your existing code)
    document.querySelector(".rain-today").innerHTML = `Rain Today: ${weather.rainToday} mm`;
    document.querySelector(".rain-tomorrow").innerHTML = `Rain Tomorrow: ${weather.rainTomorrow} mm`;
    document.querySelector(".wind-speed").innerHTML = `Wind Speed: ${weather.windSpeed} m/s`;
}


// C to F conversion
function celsiusToFahrenheit(temperature){
    return (temperature * 9/5) + 32;
}

// WHEN THE USER CLICKS ON THE TEMPERATURE ELEMENET
tempElement.addEventListener("click", function(){
    if(weather.temperature.value === undefined) return;
    
    if(weather.temperature.unit == "celsius"){
        let fahrenheit = celsiusToFahrenheit(weather.temperature.value);
        fahrenheit = Math.floor(fahrenheit);
        
        tempElement.innerHTML = `${fahrenheit}°<span>F</span>`;
        weather.temperature.unit = "fahrenheit";
    }else{
        tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;
        weather.temperature.unit = "celsius"
    }
});