Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WeatherStation
<!-- see https://www.freecodecamp.com/challenges/show-the-local-weather -->
<div id="brand">WeatherStation</div>
<div id="content">
<div id="temp">
<span id="temp-value">55</span><span id="temp-units" class="superscript">&deg;F</span>
</div>
<div id="conditions">
<span id="conditions-name">Cloudy</span>
<i id="conditions-icon" class="wi"></i>
</div>
<div id="sunrise-sunset">
<i class="wi wi-sunrise"></i> <span id="sunrise">7:30am</span>
<i class="wi wi-sunset"></i> <span id="sunset">7:30pm</span>
</div>
<div id="location">
Austin
</div>
</div>
<div id="units"><a id="celsius" href="#">Celsius<a> / <a id="fahrenheit" href="#">Fahrenheit</a></div>
<div id="credits">Weather by <a href="http://www.openweathermap.com">OpenWeatherMap</a></div>
// obtain current weather information and render to dom
// see http://openweathermap.org/current
var m_test = false;
var m_test = true;
var m_units = 'Fahrenheit';
//var m_tempKelvin = 0;
var m_json;
// openweathermap api key
// see https://home.openweathermap.org/
var m_apikey = 'd7712ffb29a3e2f73cebdcc6d7748acb';
// map from openweathermap icons to weather-icon icons
// see http://openweathermap.org/weather-conditions
// and https://erikflowers.github.io/weather-icons/
var m_iconmap = {
'01d': 'wi-day-sunny',
'02d': 'wi-day-sunny-overcast',
'03d': 'wi-day-cloudy',
'04d': 'wi-day-cloudy',
'09d': 'wi-day-showers',
'10d': 'wi-day-rain',
'11d': 'wi-day-thunderstorm',
'13d': 'wi-day-snow',
'50d': 'wi-day-fog',
'01n': 'wi-night-clear',
'02n': 'wi-night-partly-cloudy',
'03n': 'wi-night-cloudy',
'04n': 'wi-night-cloudy',
'09n': 'wi-night-showers',
'10n': 'wi-night-rain',
'11n': 'wi-night-thunderstorm',
'13n': 'wi-night-snow',
'50n': 'wi-night-fog'
}
var m_testJson = {
"coord": {
"lon": 139,
"lat": 35
},
"sys": {
"country": "JP",
"sunrise": 1369769524,
"sunset": 1369821049
},
"weather": [{
"id": 804,
"main": "clouds",
"description": "overcast clouds",
"icon": "04n"
}],
"main": {
"temp": 289.5,
"humidity": 89,
"pressure": 1013,
"temp_min": 287.04,
"temp_max": 292.04
},
"wind": {
"speed": 7.31,
"deg": 187.002
},
"rain": {
"3h": 0
},
"clouds": {
"all": 92
},
"dt": 1369824698,
"id": 1851632,
"name": "Shuzenji",
"cod": 200
};
// get user's latlong location
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(handlePosition);
}
}
// given a position object with coords.latitude and .longitude,
// get the weather at that position and update the DOM.
// can optionally use test data if m_test flag is true.
function handlePosition(pos) {
if (m_test) {
handleWeather(m_testJson);
} else {
var url = "http://api.openweathermap.org/data/2.5/weather" +
"?lat=" + pos.coords.latitude +
"&lon=" + pos.coords.longitude +
"&APPID=" + m_apikey;
$.getJSON(url, handleWeather);
}
}
// capitalize first letter of string
function capitalize(s) {
return s[0].toUpperCase() + s.slice(1);
}
// convert from kelvin to celsius or fahrenheit
function getLocalTemp(tempKelvin, units) {
var tempLocal;
if (units=='Fahrenheit') {
tempLocal = tempKelvin * 9/5 - 459.67;
} else {
tempLocal = tempKelvin - 273.15;
}
tempLocal = Math.floor(tempLocal);
return tempLocal;
}
// convert from secs to local time
//. the time from owm seems to be off -
// eg returns sunrise of 1369769524,
// while current time is 1460484411
function getLocalTime(secs) {
var d = new Date(secs*1000); // takes msecs
var s = d.toLocaleTimeString();
return s;
}
// given a json object containing current condition information,
// as returned by OpenWeatherMap api, update the DOM.
function handleWeather(json) {
var tempKelvin = json.main.temp;
var tempLocal = getLocalTemp(tempKelvin, m_units);
var tempUnits = '&deg;' + m_units[0]; // F or C
var conditions = capitalize(json.weather[0].main);
var iconOWM = json.weather[0].icon;
var iconWI = m_iconmap[iconOWM];
var sunrise = getLocalTime(json.sys.sunrise);
var sunset = getLocalTime(json.sys.sunset);
var location = json.name;
$("#temp-value").html(tempLocal);
$("#temp-units").html(tempUnits);
$("#conditions-name").html(conditions);
$("#conditions-icon").addClass(iconWI);
$("#sunrise").html(sunrise);
$("#sunset").html(sunset);
$("#location").html(location);
m_json = json; // save the json
}
function setCelsius() {
m_units='Celsius';
handleWeather(m_json);
}
function setFahrenheit() {
m_units='Fahrenheit';
handleWeather(m_json);
}
$(document).ready(function() {
$("#celsius").on("click",setCelsius);
$("#fahrenheit").on("click",setFahrenheit);
getLocation();
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
body {
font-family: 'Open Sans', sans-serif;
background-color: #111;
color: rgba(255,255,255,0.7);
text-shadow: 1px 1px rgba(0,0,0,0.1);
background-image: url(http://res.cloudinary.com/owl-syme/image/upload/v1460162452/bg_vvyx5q.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#brand {
background-color: rgba(12,12,12,0.5);
padding-bottom: 1px;
padding-left: 5px;
}
#content {
position: absolute;
top: 5%;
left: 25%;
}
/* center the content on the screen */
#content {
position: absolute;
top: 45%;
left: 45%;
transform: translateX(-40%) translateY(-50%);
}
#temp {
font-size: 7em;
text-align: center;
}
.superscript {
font-size: 20%;
position: relative;
top: -2.8em;
}
#conditions {
font-size: 200%;
text-align: center;
}
#sunrise-sunset {
margin-top: 1em;
text-align: center;
display: none;
}
#sunrise {
padding-right: 1em;
}
#location {
margin-top: 1em;
font-size: 100%;
text-align: center;
}
a {
text-decoration: none;
color: #aaa;
}
#units {
position: absolute;
bottom: 0;
left: 0;
margin: 0.5em;
font-size: 0.75em;
}
#credits {
position: absolute;
bottom: 0;
right: 0;
margin: 0.5em;
font-size: 0.75em;
color: #ddd;
}
#credits a {
color: #ccc;
}
@media (min-width: 500px) {
#content {
font-size: 1.5em;
}
#brand {
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.