An Example
A Pen by Saulo Cunha on CodePen.
<div class = "text-center"> | |
<h1>App Local Weather</h1> | |
<h3>Made by Saulo</h3> | |
<ul class = "list-unstyled"> | |
<li class = "btn btn-default" id = "city"></li> | |
<li class = "btn btn-default" id = "weatherType"></li> | |
<li class = "btn btn-default" id = "fTemp"></li> | |
<li class = "btn btn-default" id = "windSpeed"></li> | |
<li></li> | |
</ul> | |
</div> |
An Example
A Pen by Saulo Cunha on CodePen.
$(document).ready(function() { | |
if (navigator.geolocation) { | |
navigator.geolocation.getCurrentPosition(function(position) { | |
var long; | |
var lat; | |
long = position.coords.longitude; | |
lat = position.coords.latitude; | |
//API URL with geolocation | |
var api = 'http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+ long+'&appid=5fedd294998aa98f2c82a502bdfb839c'; | |
$.getJSON(api, function(data) { | |
var fTemp; | |
var cTemp; | |
var kTemp; | |
var tempSwap=true; | |
//JSON call for Open Weather api | |
var weatherType = data.weather[0].description; | |
kTemp = data.main.temp; | |
var windSpeed = data.wind.speed; | |
var city = data.name; | |
// Temp in Kelvin | |
fTemp = (kTemp*(9/5)-459.67).toFixed(1); | |
//Temp in F | |
//City Name | |
cTemp = (kTemp-273).toFixed(1); | |
console.log(city); | |
$("#city").html(city); | |
$("#weatherType").html(weatherType); | |
$("#fTemp").html(fTemp + " ℉"); | |
$("#fTemp").click(function() { | |
if (tempSwap===false) { | |
$("#fTemp").html(fTemp + " ℉"); | |
tempSwap=true; | |
} | |
else{ | |
$("#fTemp").html(cTemp + " ℃"); | |
tempSwap=false; | |
} | |
}); | |
windSpeed = (2.237*(windSpeed)).toFixed(1); | |
$("#windSpeed").html(windSpeed + " mph"); | |
if(fTemp>80){ | |
$('body').css('background-image','url(https://images.unsplash.com/photo-1414269665217-a57681e266b3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=6fd9f051bea811268593340698b6a822)'); | |
} | |
else if(fTemp>70){ | |
$('body').css('background-image','url(https://images.unsplash.com/photo-1428592953211-077101b2021b?crop=entropy&fit=crop&fm=jpg&h=1000&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925)'); | |
} | |
else if(fTemp>60){ | |
$('body').css('background-image','url(https://images.unsplash.com/photo-1428592953211-077101b2021b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=9dee70ba78c49619bc7f5c8a91778f2b)'); | |
} | |
else if(fTemp>50){ | |
$('body').css('background-image','url(https://images.unsplash.com/photo-1422020297037-97bd356cc312?crop=entropy&fit=crop&fm=jpg&h=1250&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=2400)'); | |
} | |
}); | |
}); | |
} | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> |
body{ | |
background-size:cover; | |
} |
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> |