CODEWITHSUNDEEP
javascriptapitemperatureweather-api
Zack Reid
Zack Reid

Reputation: 127

How to pull temperature info out off Open Weather Map API

Hi I have been given this code and I am trying to build upon it.

I am using Open Weather Map API. At the moment I am just finding out what the weather is.

But I want to also find out the temperature and also display it!

function getLocation() {
    var location = document.getElementById("location").value;
    location = location.replace(" ", "%20");

    if (location == "") {
        document.getElementById("location").classList.add("error");
    } else {
        document.getElementById("location").classList.remove("error");
        getWeather(location);
    }
}

function getWeather(location) {
    var ajax = new XMLHttpRequest();
    var json;
    var apiKEY = "****dd982d18c618";
    var url = "http://api.openweathermap.org/data/2.5/weather?q=" + location + " ,uk&appid=" + apiKEY;

    ajax.open("GET", url, true);
    ajax.send();
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == 200) {
            json = JSON.parse(ajax.responseText);
            document.getElementById("locationForm").style.display = "none";
            document.getElementById("weather").style.display = "block";
            if (json != undefined) {
                var weather = json.weather[0].main
                setIconAndDescription(weather, location)
            } else {
                description = "Oops, I couldn't find the weather in " + location;
                document.getElementById("description").innerHTML = description;
            }
        }
    }
}

function setIconAndDescription(weather, location) {
    var icon;
    var description;
    weather = weather.toLowerCase();

    if (weather == "clear sky" || weather == "clear") {
        icon = "clear.svg";
        description = "Yay, sunshine!";
        document.body.style.backgroundColor = "#FA6144";
        document.getElementById("icon").style.backgroundColor = "#7A2F21";
        document.getElementById("temp").style.backgroundColor = "#7A2F21";
        document.getElementById("description").style.backgroundColor = "#E0563D";
    } else if (weather == "few clouds") {
        icon = "few-clouds.svg";
        description = "It's a little cloudy.";
        document.body.style.backgroundColor = "#FA6144";
        document.getElementById("icon").style.backgroundColor = "#7A2F21";
        document.getElementById("temp").style.backgroundColor = "#7A2F21";
        document.getElementById("description").style.backgroundColor = "#E0563D";
    } else if (weather == "scattered clouds" || weather == "broken clouds" || weather == "clouds") {
        icon = "clouds.svg";
        description = "Looks like scattered clouds today.";
        document.body.style.backgroundColor = "#FA6144";
        document.getElementById("icon").style.backgroundColor = "#7A2F21";
        document.getElementById("temp").style.backgroundColor = "#7A2F21";
        document.getElementById("description").style.backgroundColor = "#E0563D";
    } else if (weather == "rain" || weather == "light rain" || weather == "shower rain") {
        icon = "rain.svg";
        description = "Looks like rain."
        document.body.style.backgroundColor = "#FA6144";
        document.getElementById("icon").style.backgroundColor = "#7A2F21";
        document.getElementById("temp").style.backgroundColor = "#7A2F21";
        document.getElementById("description").style.backgroundColor = "#E0563D";
    } else if (weather == "thunderstorm") {
        icon = "thunder.svg";
        description = "Yikes, looks like a storm's brewing!"
        document.body.style.backgroundColor = ",";
        document.getElementById("icon").style.backgroundColor = "#7A2F21";
        document.getElementById("temp").style.backgroundColor = "#7A2F21";
        document.getElementById("description").style.backgroundColor = "#E0563D";
    } else if (weather == "snow") {
        icon = "snow.svg";
        description = "Wrap up, it's going to snow!"
    } else if (weather == "mist") {
        icon = "mist.svg";
        description = "Looks a little misty today.";
    } else {
        icon = "default.svg";
        description = "Oops, I couldn't find the weather in " + location;
    }

    document.getElementById("weatherIcon").src = "images/" + icon;
    document.getElementById("description").innerHTML = description;
}

(function () {
    document.getElementById("btnGo").onclick = getLocation;
    document.getElementById("location").onkeypress = function (key) {
        if (key.keyCode == "13") {
            getLocation();
        }
    };
    //   //Convert temp from kelvin to celsius:
    //   var tempCelsius = Math.round(((data.main.temp) - 273.15));
    //
    //   $("#temp").html(tempCelsius + "C");
    //
    // });
})();

The bottom is what I have come up with by searching and trying to figure out how other people have done it.

//Convert temp from kelvin to celsius:
            //   var tempCelsius = Math.round(((data.main.temp) - 273.15));
                //
            //   $("#temp").html(tempCelsius + "C");
                //
            // });

With this it so far it doesn't work. I have tried other versions that allow the rest of the date too work. Though doing it this way the data do not show in the assigned div.

Having a last look at it. I feel like it might need to be inside a function?

Any help would be great,

thanks,

Zack

Edit

This is what I have done but it is still not working. Does there need to be a function for it to work?

As the first line sets "temperature" as the data from the json.

Then the second line does the conversion.

Then the third puts it all together. I hope inside the div "temp"

    // var temperature = json.main.temp;
        //
      //     temperature = Math.round(((data.main.temp) - 273.15));
        //
      //     $("#temp").html(temperature + "C");
        //
      //   });
})();

Should I be console logging it instead?

thanks,

Zack

Upvotes: 1

Views: 3728

Answers (1)

Andreas
Andreas

Reputation: 21881

Because of christmas... :)

Replace the function

function setIconAndDescription(weather, location) {
    // ...
}

with this one

function showWeatherInfo(weatherInfo) {
    var weather = weatherInfo.weather[0].main.toLowerCase(),
        temperature = weatherInfo.main.temp;

    document.body.style.backgroundColor = "#FA6144";
    document.getElementById("icon").style.backgroundColor = "#7A2F21";
    document.getElementById("temp").style.backgroundColor = "#7A2F21";
    document.getElementById("description").style.backgroundColor = "#E0563D";

    if (weather == "clear sky" || weather == "clear") {
        icon = "clear.svg";
        description = "Yay, sunshine!";
    } else if (weather == "few clouds") {
        icon = "few-clouds.svg";
        description = "It's a little cloudy.";
    } else if (weather == "scattered clouds" || weather == "broken clouds" || weather == "clouds") {
        icon = "clouds.svg";
        description = "Looks like scattered clouds today.";
    } else if (weather == "rain" || weather == "light rain" || weather == "shower rain") {
        icon = "rain.svg";
        description = "Looks like rain."
    } else if (weather == "thunderstorm") {
        icon = "thunder.svg";
        description = "Yikes, looks like a storm's brewing!"
    } else if (weather == "snow") {
        icon = "snow.svg";
        description = "Wrap up, it's going to snow!"
    } else if (weather == "mist") {
        icon = "mist.svg";
        description = "Looks a little misty today.";
    } else {
        icon = "default.svg";
        description = "Oops, I couldn't find the weather in " + location;
    }

    document.getElementById("weatherIcon").src = "images/" + icon;
    document.getElementById("description").innerHTML = description;
    document.getElementById("temp").textContent = temperature + " K"; /*kelvin, for celsius: (temperature - 273.15) + " °C"*/
}

The last line is for the temperature. (I've also restructured the code a little bit)

Then replace this if block in the onreadystatechange handler

if (json != undefined) {
    var weather = json.weather[0].main
    setIconAndDescription(weather, location)
}

with this

if (json != undefined) {
    showWeatherInfo(json)
}

to call the new function passing in the complete weather info from openweathermap.

Upvotes: 1

Related Questions