Skip to content

Instantly share code, notes, and snippets.

@polinabee

polinabee/index.html

Created September 4, 2016 23:57
Show Gist options
  • Save polinabee/30b3c9fdb07a05c37fc436a704a6cb46 to your computer and use it in GitHub Desktop.
Save polinabee/30b3c9fdb07a05c37fc436a704a6cb46 to your computer and use it in GitHub Desktop.
Download ZIP
Weather Machine
Raw
index.html
<head>
<script type=”text/javascript”></script>
</head>
<body align="center">
<p>
<h3><div id='location'></div></h3>
<h4><div id='weather'></div></h4>
<button id='c-button'>Celsius</button>
<button id='f-button'>Fahrenheit</button>
<h4><div id='description'></div></h4>
</p>
</body>
Raw
script.js
req = $.getJSON('//ip-api.com/json?callback=?', function(data) {
var lat = data.lat;
var lon = data.lon;
var city = data.city;
var region = data.regionName;
$('#location').html(city + ', ' + region);
$.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&appid=afcd0ac9b38a88032f986dd0eab2043d', function(weatherdata) {
var description = weatherdata.weather[0].main;
var temp = weatherdata.main.temp;
var ftemp = (temp * 9 / 5 - 459.67).toFixed(1);
var ctemp = ((ftemp - 32) / 1.8).toFixed(1);
console.log(weatherdata.weather[0].icon);
var icon = 'http://openweathermap.org/img/w/' + weatherdata.weather[0].icon + '.png';
$("#weather").html(ftemp + 'ºF<br>');
$("#c-button").on("click", function() {
$("#weather").html(ctemp + 'ºC<br>');
});
$("#f-button").on("click", function() {
$("#weather").html(ftemp + 'ºF<br>');
});
$('#description').append("<img src=" + icon + "><br>" + description);
});
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
Raw
style.css
body {
font: 100% century gothic, sans-serif;
line-height: 1.88889;
color: #555753;
margin: 0;
padding: 0;
}
p {
margin-top: 0;
text-align: justify;
}
h3 {
font: bold 1.4em , sans-serif;
letter-spacing: 1px;
margin-bottom: 5;
color: #7D775C;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment