<h1 class="">Free Code Camp</h1>
<h2 class="">Local Weather <span class="hidden">for <span id="wx-city">...</span></span></h2>
<h3 class="hidden" >
<img id="wx-image" src="http://openweathermap.org/img/w/01d.png" alt="Sunny" />
<span id="wx-temp"></span>
</h3>
<br />
<div class="wx-table hidden">
<span class="wx-table-item" id='wx-description'>
</span>
<span class="wx-table-item">winds are
<span id="wx-wind-direction"></span> at <span id="wx-wind-speed"></span>
</span>
</div>
<button id="toggleMetric">Click to show in <span class="imperial">metric</span><span class="metric">imperial</span> units</button>
html, body {
width: 100%;
height: 100%;
border: 0;
margin: 0;
padding: 0;
position: relative;
text-align: center;
}
body {
background: #343436 url("https://raykendo.neocities.org/blank.png") no-repeat scroll 0% 0% / cover;
color: #DDCA7E;
transition: background-image 0.4s ease-in-out;
}
/* background images based on weather */
.wx-bkgrnd-01d {
background-image: url("https://raykendo.neocities.org/images/OpenWeatherMap/clearday.jpg");
}
.wx-bkgrnd-02d {
background-image: url("https://raykendo.neocities.org/images/OpenWeatherMap/fewday.jpg");
}
.wx-bkgrnd-03d {
background-image: url("https://raykendo.neocities.org/images/OpenWeatherMap/scatteredday.jpg");
}
.wx-bkgrnd-04d {
background-image: url("https://raykendo.neocities.org/images/OpenWeatherMap/brokenday.jpg");
}
.wx-bkgrnd-09d,
.wx-bkgrnd-10d {
background-image: url("https://raykendo.neocities.org/images/OpenWeatherMap/rainday.jpg");
}
.wx-bkgrnd-11d {
background-image: url("https://raykendo.neocities.org/images/OpenWeatherMap/thunderstormday.jpg");
}
.wx-bkgrnd-13d {
background-image: url("https://raykendo.neocities.org/images/OpenWeatherMap/snowday.jpg");
}
.wx-bkgrnd-50d {
background-image: url("https://raykendo.neocities.org/images/OpenWeatherMap/msitday.jpg");
}
.wx-bkgrnd-01n {
background-image: url("https://raykendo.neocities.org/images/OpenWeatherMap/clearnight.jpg");
}
.wx-bkgrnd-02n {
background-image: url("https://raykendo.neocities.org/images/OpenWeatherMap/fewnight.jpg");
}
.wx-bkgrnd-03n {
background-image: url("https://raykendo.neocities.org/images/OpenWeatherMap/scatterednight.jpg");
}
.wx-bkgrnd-04n {
background-image: url("https://raykendo.neocities.org/images/OpenWeatherMap/brokennight.jpg");
}
.wx-bkgrnd-09n ,
.wx-bkgrnd-10n {
background-image: url("https://raykendo.neocities.org/images/OpenWeatherMap/rainnight.jpg");
}
.wx-bkgrnd-11n {
background-image: url("https://raykendo.neocities.org/images/OpenWeatherMap/thunderstormnight.jpg");
}
.wx-bkgrnd-13n {
background-image: url("https://raykendo.neocities.org/images/OpenWeatherMap/snownight.jpg");
}
.wx-bkgrnd-50n {
background-image: url("https://raykendo.neocities.org/images/OpenWeatherMap/mistnight.jpg");
}
h1, h2, h3 {
text-shadow: 2px 2px 3px #000;
}
h3 {
display: inline;
text-shadow: 1px 1px 2px #222;
}
img, h3 {
vertical-align: middle;
}
.wx-table {
text-align: center;
margin-top: 10px;
}
.wx-table-item, button {
background-color: rgba(255, 255, 255, 0.6);
font-weight: bold;
color: #222;
padding: 0.7em 1em;
border-radius: 0.5em;
margin: 0.3em;
border: 2px outset ;
}
.hidden {
display: none;
}
.metric {
display: none;
}
.showMetric .imperial {
display: none;
}
.showMetric .metric {
display: inline;
}
#toggleMetric {
margin-top: 1.7em;
}
$(document).ready(function() {
function useMetric(countryCode) {
// if country code not in this list, use metric
return ['US', 'BS', 'BZ', 'KY', 'PW'].indexOf(countryCode) === -1;
}
function convertWindDir(angle) {
var tweakedAngle = (angle + 22.5) % 360,
directions = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
return directions[Math.floor(tweakedAngle / 45)];
}
function convertWindMetersPerSec(speed) {
return speed.toFixed(1) + " m/s";
}
function convertWindMPH(speed) {
return (speed * 2.23694).toFixed(1) + " mph";
}
function convertToCelcius(kelvin) {
var celcius = kelvin - 273.15;
return celcius.toFixed(1) + "°C";
}
function convertToFahrenheit(kelvin) {
var celcius = kelvin - 273.15;
var fahrenheit = celcius * 9 / 5 + 32;
return fahrenheit.toFixed(1) + "°F";
}
function updatePage(response) {
$("#wx-city").text(response.name);
$("#wx-image").prop("src", "http://openweathermap.org/img/w/" + response.weather[0].icon + ".png")
.prop('alt', response.weather[0].description)
.prop('title', response.weather[0].description);
$("#wx-description").text(response.weather[0].description);
$("#wx-wind-direction").text(convertWindDir(response.wind.deg));
$("body").addClass("wx-bkgrnd-" + response.weather[0].icon);
if (useMetric(response.sys.country)) {
$("body").addClass("showMetric");
}
var tempHTML = "<span class='metric'>" +
convertToCelcius(response.main.temp) +
"</span><span class='imperial'>" +
convertToFahrenheit(response.main.temp) + "</span>";
var windHTML = "<span class='metric'>" +
convertWindMetersPerSec(response.wind.speed) +
"</span><span class='imperial'>" +
convertWindMPH(response.wind.speed) +
"</span>";
$("#wx-temp").html(tempHTML);
$("#wx-wind-speed").html(windHTML)
$(".hidden").addClass("animated fadeIn").removeClass("hidden");
}
function getWeather(lat, long) {
$.ajax({
url: "http://api.openweathermap.org/data/2.5/weather",
jsonp: "callback",
dataType: "jsonp",
data: {
lat: lat,
lon: long,
appid: "2177df799b4d263ad5446bc242c3d7ff"
},
success: updatePage
});
}
function geoSuccess(position) {
if (position && position.coords) {
getWeather(position.coords.latitude, position.coords.longitude);
}
}
function geoFailure(err) {
$.getJSON('http://ipinfo.io', 'jsonp').then(function(data) {
var loc = data.loc.split(",");
getWeather(loc[0], loc[1]);
});
}
$('#toggleMetric').click(function () {
$('body').toggleClass('showMetric');
});
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(geoSuccess, geoFailure);
} else {
geoFailure();
}
});
Also see: Tab Triggers