In: Computer Science
1. Write the code to show the current weather based on geolocation. I am stuck and cant figure out how to show the weather. My current code is below. Please try and use OpenweatherAPI.
<!DOCTYPE html>
<html>
<head>
<title>Weather</title>
<link
rel="stylesheet"
href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css"
/>
<link rel="stylesheet" href="main.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div class="jumbotron">
<button onclick="getLocation()">Get my location.</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML =
"Latitude: " +
position.coords.latitude +
"<br>Longitude: " +
position.coords.longitude;
}
</script>
<p>The weather outside is:</p>
<div class="weather">
Oops.. there is no temperature available for your location right now.
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Weather</title>
<link
rel="stylesheet"
href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css"
/>
<link rel="stylesheet" href="main.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div class="jumbotron">
<button onclick="getLocation()">Get my location.</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML =
"Latitude: " +
position.coords.latitude +
"<br>Longitude: " +
position.coords.longitude;
getWeatherData(position.coords.latitude, position.coords.longitude);
}
// takes data object as input
function showWeather(data) {
// finds the temperature in celcius ,
// temperature is inside main and as temp,
// you can check the response json to clearly understand this
var temperature = Math.round(parseFloat(data.main.temp) - 273.15);
// gets the current weather discription
var description = data.weather[0].description;
// finally sets the resulting data in the div with id weather,
document.getElementById('weather').innerHTML = temperature + '°,' + description;
}
// takes latitude,longitude and longitude as parameters
function getWeatherData(latitude, longitude) {
// TODO: set your api key here
var api_key = ;
// fetches weather data using latitude,longitude with passing the api_key and then
// response is converted into json and resulting object is passed into
// showWeather() function to display the data
fetch('https://api.openweathermap.org/data/2.5/weather?lat=' + latitude + '&lon=' + longitude + '&appid=' + api_key)
.then(function(response) {
return response.json()
}) // convert resonse to json
.then(function(data) {
showWeather(data);
})
.catch(function() {
// if there is any errors catch the error
alert("Error Occured !")
});
}
</script>
<p>The weather outside is:</p>
<div class="weather" id="weather">
Oops.. there is no temperature available for your location right now.
</div>
</div>
</body>
</html>
Before you run this , make sure to get an api key from OpenweatherAPI and setting the variable api_key inside getWeatherData() function to the api key that you have got from it,also if you get a 401 error,then wait sometime to get the api key activated, if you just created an account,it took around 10 minutes to get api key activated for me,i have not done any styling,also i added an id to the div "weather" to access it using getElementById
Output:
PS-:If you have any doubts/problems please comment below.Thank you