Vanilla javascript GeoLocation weather app

Vanilla javascript GeoLocation weather app
0

#1

Just did a simple GeoLocation weather app using pure vanilla javascript. Do feedback :smile: esp the javascript coding part ^^
https://balancedsan.github.io/GeoLocationWeatherApi/


#2

Your app its working ok for me. It reports the right location and temp. You should only change the button text because you don’t “Change Temperature” but you change unit measure from C to F and viceversa.


#3

Would you mind posting a link to your github repository to make it a little easier to review your code?

Thanks.


#4

yeah sure thanks :smiley: https://github.com/Balancedsan/GeoLocationWeatherApi


#5

Your project code looks fine. I really like the way you organized the code.

I made some small “refinements” (see below) which you may or may not wish to incorporate. Some are simplifications and others are just to make the code more readable (less use of this.something).

main.js

const getWeather = () =>{
    coordinate.getGeoLocation()
      .then(({coords}) => coords)
      .then(position => weather.getWeather(position))
      .then(weather =>  user.paint(weather))
};
const weather = new Weather;
const coordinate = new GeoLocation;
const user = new UI;
document.addEventListener("DOMContentLoaded", getWeather)

weather.js

// gets location from user browser

class Weather {
    constructor() {
        this.key = "03726b04c772c54015bff90e597deaf9";
    }

    async getWeather({latitude,longitude}) {
        const endPoint = `https://api.openweathermap.org/data/2.5/weather?`;
        const apiUrl = `${endPoint}lat=${latitude}&lon=${longitude}&APPID=${this.key}&units=metric`
        const response = await fetch(apiUrl);
        if(response.status === 200 ){
            return  await response.json();
        }
        throw new Error("Unable to fetch data")
    }
}

The paint method in your UI class.

    paint({
        name,
        sys:{country: countryName},
        main:{temp},
        weather:[{main, icon: iconName}]
    }) {
        const {country, weather, icon,  temperature, button, convertF} = this;
        country.textContent = `${name},${countryName}`;
        weather.textContent =`${main}`;
        icon.setAttribute("src",`https://openweathermap.org/img/w/${iconName}.png`);
        temperature.textContent = `${temp} C`;

        button.addEventListener("click", () => {
            const currContent = temperature.textContent;
            temperature.textContent = currContent === `${temp} C`
                ? `${convertF(temp)} F`
                :  `${temp} C`
        })
    }