Eu fiz um projeto do FreeCodeCamp em que é pra fazer um Weather Local (Clima Local). Utilizei a API do próprio projeto deles, já pronta, porém ela não altera o background.
Eu quero trocar o background conforme a temperatura e a legenda que aparece.
Exemplo:
- 27ºC - Tempo Limpo (apareceria uma imagem de sol);
- 19ºC - Chovendo (apareceria uma imagem de chuva);
(No caso, ambos exemplos estão em ingles).
Vou por o código abaixo e mando o que for mais preciso.
var api = "https://fcc-weather-api.glitch.me/api/current?";
var lat, lon;
var tempUnit = 'C';
var currentTempInCelsius;
$( document ).ready(function(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var lat = "lat=" + position.coords.latitude;
var lon = "lon=" + position.coords.longitude;
getWeather(lat, lon);
});
} else {
console.log("Geolocation is not supported by this browser.");
}
$("#tempunit").click(function () {
var currentTempUnit = $("#tempunit").text();
var newTempUnit = currentTempUnit == "C" ? "F" : "C";
$("#tempunit").text(newTempUnit);
if (newTempUnit == "F") {
var fahTemp = Math.round(parseInt($("#temp").text()) * 9 / 5 + 32);
$("#temp").text(fahTemp + " " + String.fromCharCode(176));
} else {
$("#temp").text(currentTempInCelsius + " " + String.fromCharCode(176));
}
});
})
function getWeather(lat, lon) {
var urlString = api + lat + "&" + lon;
$.ajax({
url: urlString, success: function (result) {
$("#city").text(result.name);
$("#country").text(result.sys.country);
currentTempInCelsius = Math.round(result.main.temp * 10) / 10;
$("#currentTemp").text(currentTempInCelsius + " " + String.fromCharCode(176));
$("#tempunit").text(tempUnit);
$("#currentWeather").text(result.weather[0].main);
IconGen(result.weather[0].main);
}
});
}