app.js

window.addEventListener('load', () => {
    let long;
    let lat;
    let apikey;  // Add Your API Key here
    let temperatureDescription = document.querySelector('.temperature-description');
    let temperatureDegree = document.querySelector('.temperature-degree');
    let locationTimezone = document.querySelector('.location-timezone');
    let temperatureSection = document.querySelector('.temperature');
    const temperatureSpan = document.querySelector('.temperature span');



    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(position => {
            long = position.coords.longitude;
            lat = position.coords.latitude;
            
            /* Creating Proxy For Local Server. You can ignore the proxy for live server & Replace line 20-21 with
            const api = `https://api.darksky.net/forecast/${apikey}/${lat},${long}`;
            */
            
            const proxy = 'https://cors-anywhere.herokuapp.com/';
            const api = `${proxy}https://api.darksky.net/forecast/${apikey}/${lat},${long}`;
            fetch(api)
                .then(response => {
                    return response.json();
                })
                .then(data => {
                    console.log(data);
                    const {
                        temperature,
                        summary,
                        icon
                    } = data.currently;
                    //Set DOM Element
                    temperatureDegree.textContent = temperature;
                    temperatureDescription.textContent = summary;
                    locationTimezone.textContent = data.timezone;

                    //Formula For Celcius
                    let celcius = (temperature - 32) * (5 / 9)
                    
                    //Set Icon
                    setIcons(icon, document.querySelector('.icon '));

                    // Change Farenhite to Celcius
                    temperatureSection.addEventListener('click', () => {
                        if (temperatureSpan.textContent === "F") {
                            temperatureSpan.textContent = "C";
                            temperatureDegree.textContent = Math.floor(celcius);
                        } else {
                            temperatureSpan.textContent = "F";
                            temperatureDegree.textContent = temperature;
                        }
                    })

                })

        })
    }

    function setIcons(icon, iconID) {
        const skycons = new Skycons({
            color: "white"
        });

        const currentIcon = icon.replace(/-/g, "_").toUpperCase();
        skycons.play();
        return skycons.set(iconID, Skycons[currentIcon]);

    }

})