Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Local Weather
<body background=""></body>
<div class="container main">
<div class="container-fluid dash">
<div class="row">
<div class="col-md-12 panel-group city">
<span id="city"></span>
</div>
<div class="row icon">
<div class="col-md-12 panel-group">
<img src=''>
</div>
</div>
<div class="row details">
<div class="col-md-12 panel-group">
<button type="button" class="btn btn-outline-secondary"><span id="fTemp"></span></button><br>
<span id="weatherType"></span>
</div>
</div>
</div>
$(document).ready(function() {
var lat;
var long;
$.getJSON("http://ip-api.com/json",function(data2){
lat=data2.lat;
long=data2.lon;
//API URL with geolocation
var api = 'http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+long+'&appid=a04906104637578c99e32a197c608833';
$.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;
var weatherId= data.weather[0].id;
//Change background image
$("body").attr("background", function(){
if (weatherId >= 300 && weatherId <= 531) {
return /*rain */ "https://c2.staticflickr.com/9/8664/29358524193_1635bf63cd_o.jpg";
} else if (weatherId >= 600 && weatherId <= 622) {
return /*snow*/ "https://c2.staticflickr.com/6/5561/29902681681_721fc4505f_o.jpg";
} else if (weatherId >= 701 && weatherId <= 781) {
return /*mist*/ "https://c4.staticflickr.com/9/8263/29902682371_accb7f0d39_o.jpg";
} else if (weatherId >= 200 && weatherId <= 232) {
return /*thunder*/ "https://c7.staticflickr.com/9/8507/29951930326_2122c9f5b5_o.jpg";
} else if (weatherId >= 801 && weatherId <=804) {
return /*clouds*/ "https://c1.staticflickr.com/6/5123/29856686512_4e0d090f1c_o.jpg";
}
else {
return /* clear */ "https://c7.staticflickr.com/9/8319/29950997846_ccdd424588_o.jpg";
}
})
//Icon Change
$("img").attr("src", function(){
if (weatherId >= 300 && weatherId <= 531) {
return /*rain */ "https://c6.staticflickr.com/8/7523/29377981333_22eea4b8e5_t.jpg";
} else if (weatherId >= 600 && weatherId <= 622) {
return /*snow*/ "https://c3.staticflickr.com/6/5259/29970494506_b4c6bc8254_t.jpg";
} else if (weatherId >= 701 && weatherId <= 781) {
return /*mist*/ "https://c1.staticflickr.com/9/8125/29970496016_e8c6eaa0b1_t.jpg";
} else if (weatherId >= 200 && weatherId <= 232) {
return /*thunder*/ "https://c4.staticflickr.com/9/8270/29377997803_1db5a3ca7d_t.jpg";
} else if (weatherId >= 801 && weatherId <=804) {
return /*clouds*/ "https://c3.staticflickr.com/9/8119/29970500186_9dc714d8e2_t.jpg";
} else {
return /* clear */ "https://c5.staticflickr.com/9/8355/29890984052_510c8aa00b_t.jpg";
}
})
console.log(weatherId);
//Temperture in Kelvin
fTemp = (kTemp)*(9/5)-459.67;
//Temp in F
cTemp = kTemp-273;
$("#city").html(city);
$("#weatherType").html(weatherType);
$("#fTemp").html(fTemp.toFixed(1) + "&#176; F");
//switch temp from F to C on click
$("#fTemp").click(function(){
if(tempSwap===false){
$("#fTemp").html(fTemp.toFixed(1) + "&#176; F");
tempSwap=true;
}
else {
$("#fTemp").html(cTemp.toFixed(1) + "&#176; C");
tempSwap=false;
}
});
});
});
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
/* Icons made by Freepik from www.flaticon.com */
/* Background images from pixabay.com */
body {
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
.main {
margin-top: 3em;
}
.dash {
border-color: #000000;
border-width: 5px;
border-style: solid;
background-color:#FFF;
margin-top: 30px;
margin: 0 auto;
max-width: 330px;
padding: 40px 40px;
}
.city {
font-family: 'Raleway', sans-serif;
font-size: 36px;
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
.icon {
text-align: center;
padding-top: -1em;
}
.details {
text-align: center;
font-family: 'Raleway', sans-serif;
font-size: 26px;
}
.details #fTemp {
font-size: 50px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment