weather.js

// Select Elements
// references the parts in the htlm file
const notificationElement = document.querySelector(".notification");
const iconElement = document.querySelector(".weather-icon");
const tempElement = document.querySelector(".temperature-value p");
const descElement = document.querySelector(".temperature-description p");
const locationElement = document.querySelector(".location p");

// weather Objekt
const weather = {

    temperature :{
        value : 18,
        unit : "celsius"
    },
    description : "few clouds",
    iconId : "01d",
    city : "London",
    country :"GB"
};

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 celsiusToFahrenheit(temperature){
    return (temperature *9/5)+ 32;
}

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}° <spna>C</span>`,
        weather.temperature.unit = "celsius";

    }
});


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>`;
}

// app constants
const KELVIN = 273;
//api key
const key = "37d0b6527c1d62d2c52074602a6d5d55";


//requesting weather data
function getWeather(latitude, longitude){
    let api = `https://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.description = data.weather[0].description;
        weather.iconId = data.weather[0].icon;
        weather.city = data.name;
        weather.country = data.sys.country;
}) .then (function(){
    displayWeather();
});
}