0
I did a Freecodecamp project where it’s to make a Weather Local (Local Weather). I used their own project API, already ready, but it does not change the background.
I want to change the background according to the temperature and the legend that appears.
Example:
- 27ºC - Clear Weather (a sun image would appear);
- 19ºC - Raining (a rain image would appear);
(In this case, both examples are in English).
I’ll break the code and send you whatever you need.
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);
}
});
}
Po man, thank you very much indeed, but in case I’m doing it by Codepen, this $(element). css would be the q ? Body?
– Jota
I got it, it’s the same thing, I just forgot to close the {} and nothing was going, thank you very much kkk <3
– Jota
Whoa, no problem! Haha. Just to clarify, the "element", would be the element in which you want to apply the background, in the case of body, use $("body"), so on.
– Lucas Picasso