Web page runs locally but fails on GitHub and CodePen

Question

This is a WeatherApp that pulls data off the OpenWeatherMap API, and displays a selected few results. I ran the code locally on my system, before uploading it in a GitHub repository to test it out as a page. Shockingly, I found that the code doesn't work as a GitHub page or on CodePen. Any reasons why? Link to 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>

rafaelcastrocouto · Accepted Answer · 2017-04-27 20:25:43Z

3

Deprecation

getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS.

See https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins for more details.

index.html : 67

Check your devtools warnings (F12)

answered Apr 27, 2017 at 20:25

rafaelcastrocouto

12.2k3 gold badges41 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

djokester Over a year ago

I am getting another error too, index.html:79 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

rafaelcastrocouto Over a year ago

developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/…

Collectives™ on Stack Overflow

Web page runs locally but fails on GitHub and CodePen

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related