Hello,
I have used a piece of custom javascript to display temperature and humidity on a website:
http://jardinc.org
But it seems it's breaking the mobile menu... Can you help me ?
Here is the piece of code:
<script type="text/javascript">
const key = 'b2b1b01a9261a8b31e450dffc404f9e9';
if(key=='') document.getElementById('temp').innerHTML = ('Remember to add your api key!');
function weatherBallon( cityID ) {
fetch('http://api.openweathermap.org/data/2.5/weather?lat=47.204530&lon=-1.563377&appid=b2b1b01a9261a8b31e450dffc404f9e9')
.then(function(resp) { return resp.json() }) // Convert data to json
.then(function(data) {
drawWeather(data);
})
.catch(function() {
// catch any errors
});
}
function drawWeather( d ) {
var celcius = Math.round(parseFloat(d.main.temp)-273.15);
var fahrenheit = Math.round(((parseFloat(d.main.temp)-273.15)*1.8)+32);
var description = d.weather[0].description;
var humidity = d.main.humidity;
document.getElementById('temp').innerHTML = celcius + '°C';
document.getElementById('humidity').innerHTML = 'H:' + humidity + '%';
if( description.indexOf('rain') > 0 ) {
document.body.className = 'rainy';
} else if( description.indexOf('cloud') > 0 ) {
document.body.className = 'cloudy';
} else if( description.indexOf('sunny') > 0 ) {
document.body.className = 'sunny';
} else {
document.body.className = 'clear';
}
}
window.onload = function() {
weatherBallon( 6167865 );
}
</script>