The WeatherApp featured here leverages the OpenWeatherMap API to display a selected few weather results. I tested the code on my local system and then uploaded it to a GitHub repository to further examine it as a webpage. To my surprise, the code didn't function properly when accessed via a GitHub page or on CodePen. Are there any specific reasons for this issue? Visit the webpage: WeatherCheck
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<style>
#container{
background-color: #3E5060;
margin: 20%;
padding: 2.5%;
}
body{
background-color: #B2D6F7;
font-family: 'Abril Fatface', cursive;
font-size: 300%;
color: white;
opacity: 0.7;
filter: alpha(opacity=70);
}
#demo {
font-size: 200%;
}
</style>
</head>
<body>
<div class = "text-center" id="container">
<img id = "demo0">
<p id="demo"></p>
<p id="demo7"></p>
<div class="row">
<div class="col-sm-6">
<p id="demo1"></p>
</div>
<div class="col-sm-6">
<p id="demo2"></p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<p id="demo3"></p>
</div>
<div class="col-sm-6">
<p id="demo4"></p>
</div>
</div>
<p id="demo6"></p>
<button onclick="getLocation()" style="color:black;">Click!</button>
</div>
<script>
var x = document.getElementById("demo");
var x1 = document.getElementById("demo1");
var x2 = document.getElementById("demo2");
var x3 = document.getElementById("demo3");
var x4 = document.getElementById("demo4");
var x5 = document.getElementById("demo0");
var x6 = document.getElementById("demo6");
var x7 = document.getElementById("demo7");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
console.log(latitude);
getData(latitude, longitude);
}
function getData(lat,long)
{
console.log(long);
var API_KEY = "*************************";
var apiUrl = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + long + "&units=metric&appid=" + API_KEY;
var xhr = new XMLHttpRequest();
xhr.open("GET", apiUrl, false);
xhr.send();
console.log(xhr.status);
console.log(xhr.statusText);
response = JSON.parse(xhr.response);
console.log(xhr.response);
console.log(response.weather[0].icon);
x.innerHTML = response.name;
x1.innerHTML = parseInt(response.main.temp_max);
x2.innerHTML = response.main.humidity;
x3.innerHTML = response.wind.speed;
x4.innerHTML = response.wind.deg;
x5.src = "http://openweathermap.org/img/w/" + response.weather[0].icon + ".png";
x6.innerHTML = response.weather[0].description;
var date = new Date();
console.log(date.getHours()>12);
x7.innerHTML = date.getHours() + ":" + date.getMinutes();
if(date.getHours()>17 || date.getHours()<5){
document.getElementById("container").style.background= "#B2D6F7";
document.body.style.background= "#3E5060";
}
}
</script>
</body>
</html>