Skip to content

Instantly share code, notes, and snippets.

@lseffer

lseffer/index.html

Created June 11, 2017 13:34
Show Gist options
  • Save lseffer/c37b28e299b1855f19e6a9dfea4019ff to your computer and use it in GitHub Desktop.
Save lseffer/c37b28e299b1855f19e6a9dfea4019ff to your computer and use it in GitHub Desktop.
Download ZIP
WjjwBx
Raw
index.html
<body>
<div class='jumbotron'>
<p class="headline">Here's your weather:</p>
<div id='forecast'><span id="desc"></span><span id="degrees"></span><span id="degtype"></span></div>
<img id="forecastimg" src="http://kink.fm/wp-content/themes/alphamedia-blacklab-v2/assets/img/svg/weather/cloudy.svg" height=100 width=100>
<div id='location'>No data</div>
<button id='toggledeg'>Toggle degrees</button>
<div id='footer'>No data</div>
</div>
</body>
Raw
script.js
$("document").ready(function(){
function imageGenerator(weather){
if( weather.toLowerCase().indexOf('rain') !== -1){
return "http://icon-park.com/imagefiles/simple_weather_icons_rain.png"
} else if ((weather.toLowerCase().indexOf('overcast') !== -1) || (weather.toLowerCase().indexOf('cloud') !== -1)){
return "http://kink.fm/wp-content/themes/alphamedia-blacklab-v2/assets/img/svg/weather/cloudy.svg"
}
else if(weather.toLowerCase().indexOf('clear') !== -1){
return "https://www.wpclipart.com/weather/sun/sun_sharp_rays/sun_spiked_rays_orange.png"
}
};
function showPosition(position) {
var lat = position.coords.latitude.toFixed(0).toString();
var lon = position.coords.longitude.toFixed(0).toString();
console.log('https://api.darksky.net/forecast/077d0ace895b2056ca26327761f15715/'+lat+','+lon)
$.getJSON('https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/077d0ace895b2056ca26327761f15715/'+lat+','+lon, function(data){
var temperature =data.currently.temperature;
$('#desc').html(data.currently.summary+', ')
$('#degrees').html(temperature)
$('#degtype').html('°F')
$('#location').html(data.timezone)
$('#forecastimg').attr('src', imageGenerator(data.currently.summary));
console.log(data.currently.summary);
});
$('#footer').html("Latitude: " + lat +
"<br>Longitude: " + lon)
}
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
getLocation();
});
function convertTemp(value, type){
if (type.toLowerCase().slice(1)==='c'){
return [value*9/5+32,'F']
} else if (type.toLowerCase().slice(1)==='f'){
return [(value-32)*5/9,'C']
}
};
$('#toggledeg').click(function(){
var olddegval = parseFloat($("#degrees").text())
console.log(olddegval)
var olddegtype = $("#degtype").text()
$("#degrees").html(convertTemp(olddegval, olddegtype)[0].toFixed(2).toString());
$("#degtype").html('°'+convertTemp(olddegval, olddegtype)[1])
}
)
// "https://api.darksky.net/forecast/077d0ace895b2056ca26327761f15715/"+lat+","+lon
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Raw
style.css
.jumbotron {
width: 600px;
margin: 0 auto;
}
.headline {
font-size: 35px;
}
#degrees {
color: blue;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.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