app.js

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


const weather={}

weather.temperature={
    unit:"celcius",
    value:undefined,
    original:undefined
}
function displayWeather()
{
iconElement.innerHTML=`<img src="icons/${weather.iconId}.png">`;
tempElement.innerHTML=`${weather.temperature.value}°<span>C</span>`
descElement.innerHTML=weather.description;
locationElement.innerHTML=`${weather.city},${weather.country}`;
}


function celciustofahrenheit(celsius) {
    return (celsius * 9/5) + 32;
}
function calculatetocelcius(fahrenheit){
    return Math.floor((fahrenheit - 32) * 5 / 9);
}
tempElement.addEventListener("click",function(){
    if(weather.temperature.value===undefined) return;
    if(weather.temperature.unit==="celcius")
    {
        let fahrenheit=celciustofahrenheit(weather.temperature.value);
        fahrenheit=Math.floor(fahrenheit);
        tempElement.innerHTML=`${fahrenheit}°<span>F</span>`;
        weather.temperature.unit="fahrenheit";
    }
    else{
        tempElement.innerHTML = `${weather.temperature.original}°<span>C</span>`;
        weather.temperature.unit = "celcius";
    }
});


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


function setPosition(position){
    let latitude=position.coords.latitude;
    let longitude=position.coords.longitude;
    getWeather(latitude,longitude);
}
function showError(error){
    notificationElement.style.display="block";
    notificationElement.innerHTML=`<p>${error.message}</p>`;
}


const kelvin=273;
const key = "82005d27a116c2880c8f0fcb866998a0";
function getWeather(latitude,longitude){
    let api = `http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${key}`;
    fetch(api).then(function(response){
        let data=response.json();
        return data;
    })
    .then(function(data){
        weather.temperature.value= Math.floor(data.main.temp-kelvin);
        weather.temperature.original = weather.temperature.value;
        weather.description=data.weather[0].description;
        weather.iconId=data.weather[0].icon;
        weather.city=data.name;
        weather.country=data.sys.country;
    })
    .then(function(){
        displayWeather();
    });

}