CODEWITHSUNDEEP
javascriptopenweathermap
Arnaud Aubry
Arnaud Aubry

Reputation: 5

I can't display temperature on my website

I'm new to Javascript and I followed a tutorial that is pretty easy to display open weather data on my website with javascript. https://codepen.io/mattfroese/pen/WaeYQV https://bytemaster.io/fetch-weather-openweathermap-api-javascript

It's very odd but it works on codepen and not my website...

Maybe you can help me ? Here is the code...

const key = '';
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=OPENWEATHER_APP_ID')  
	.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; 
	
	document.getElementById('description').innerHTML = description;
	document.getElementById('temp').innerHTML = celcius + '°';
	document.getElementById('location').innerHTML = d.name;
  
  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 );
}
footer {
  position:fixed;
  bottom:0px;
  left:0;
  height: 77px;
  width: 100%;
  margin: auto;
  font: 30px "Elastik-B";
  
}

.footer ul {
    margin: 0;
    padding: 0;
    position:absolute;
    list-style-type: none;
    bottom:15px;
    right:5%;
}

.footer li {
   text-align:right;
   float: right;
   display: block;
   padding: 15px;
}
<footer>
<div class="footer">
<ul>
    <li><div id="temp">...</div></li>
  </ul>
</div>
</footer>

Upvotes: 0

Views: 323

Answers (1)

Soheb M
Soheb M

Reputation: 44

You have not added your api key in first line

const key = " ";

Please add api key and check if you are still getting an error message, try this

<script lang="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; 

    document.getElementById('description').innerHTML = description;
    document.getElementById('temp').innerHTML = celcius + '°';
    document.getElementById('location').innerHTML = d.name;

  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>

Upvotes: 1

Related Questions