Skip to content

Instantly share code, notes, and snippets.

@ewathedoer

ewathedoer/Weather App.markdown

Last active April 12, 2016 09:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ewathedoer/22efc6c8e8d15e5bb1836ed57e2ed154 to your computer and use it in GitHub Desktop.
Save ewathedoer/22efc6c8e8d15e5bb1836ed57e2ed154 to your computer and use it in GitHub Desktop.
Download ZIP
Weather App
Raw
index.html
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sheep Weather App</title>
<meta name="author" content="Top section graphics and turn mobile icon are designed by Freepik (http://www.freepik.com/), weather icons come from http://forecastfont.iconvau.lt/ (designed by https://twitter.com/alisisk). The Sheep Weather App is designed and coded by the doer.">
<meta name="description" content="The project created during Free Code Camp course">
</head>
<body>
<section class="top">
<div class="pull-right toggle">
<label class="checkbox-inline">
<input id="toggle" type="checkbox" checked data-toggle="toggle" data-on="Celsius" data-off="Fahrenheit" data-onstyle="info" data-offstyle="warning" data-style="toggle-pace">
</label>
</div>
</section>
<section class="middle">
<div id="more-info-box" class="parent">
<div class="cell text-center">
<div id="wind">
<p>Wind: <span></span></p>
</div>
<div id="humidity">
<p>Humidity: <span></span></p>
</div>
<div id="description">
<p>Weather Sheep says:<br/><span></span></p>
</div>
</div> <!-- cell -->
</div>
</section>
<section class="bottom">
<div class="more" aria-labelledby="more weather information">
More
</div>
<div class= "container-fluid">
<div id="weather-box" class="info-box row hidden">
<div id="data" class="col-xs-6 col-xs-offset-1 col-md-5 col-md-offset-1">
<div id="city"></div>
<div id="temperature">
<span id="number"></span>
</div>
</div> <!-- col weather details -->
<div class="col-xs-5">
<ul class = "weather-icon hidden" id="01d">
<li class = "icon-sun"></li>
</ul>
<ul class = "weather-icon hidden" id="01n">
<li class = "icon-moon"></li>
</ul>
<ul class = "weather-icon hidden" id="02d">
<li class = "basecloud"></li>
<li class = "icon-sunny"></li>
</ul>
<ul class = "weather-icon hidden" id="02n">
<li class = "basecloud"></li>
<li class = "icon-night"></li>
</ul>
<ul class = "weather-icon hidden" id="03d">
<li class = "basecloud"></li>
<li class = "icon-sunny"></li>
</ul>
<ul class = "weather-icon hidden" id="03n">
<li class = "basecloud"></li>
<li class = "icon-night"></li>
</ul>
<ul class = "weather-icon hidden" id="04d">
<li class = "icon-cloud"></li>
</ul>
<ul class = "weather-icon hidden" id="04n">
<li class = "icon-cloud"></li>
</ul>
<ul class = "weather-icon hidden" id="09d">
<li class = "basecloud"><li>
<li class = "icon-showers icon-sunny"></li>
</ul>
<ul class = "weather-icon hidden" id="09n">
<li class = "basecloud"><li>
<li class = "icon-showers icon-night"></li>
</ul>
<ul class = "weather-icon hidden" id="10d">
<li class = "basecloud"></li>
<li class = "icon-rainy"></li>
</ul>
<ul class = "weather-icon hidden" id="10n">
<li class = "basecloud"></li>
<li class = "icon-rainy icon-night"></li>
</ul>
<ul class = "weather-icon hidden" id="11d">
<li class = "basethundercloud"></li>
<li class = "icon-thunder"></li>
</ul>
<ul class = "weather-icon hidden" id="11n">
<li class = "basethundercloud"></li>
<li class = "icon-thunder icon-night"></li>
</ul>
<ul class = "weather-icon hidden" id="13d">
<li class = "basecloud"></li>
<li class = "icon-snowy"></li>
</ul>
<ul class = "weather-icon hidden" id="13n">
<li class = "basecloud"></li>
<li class = "icon-snowy icon-night"></li>
</ul>
<ul class = "weather-icon hidden" id="50d">
<li class = "icon-mist"></li>
</ul>
<ul class = "weather-icon hidden" id="50n">
<li class = "icon-mist"></li>
</ul>
</div> <!-- col weather icon -->
</div> <!-- info-box details --->
<div id="intro-text" class="info-box row">
<div class="col-xs-12 text-center">
<h1>Sheep Weather App</h1>
<p class="thanks">Graphics by <a href="http://www.freepik.com/" target="_blank">Freepik</a> and <a href="https://twitter.com/alisisk" target="_blank">Ali Sisk</a></p>
</div>
</div> <!-- info box intro, default state before positoion set -->
</div> <!-- container fluid -->
</section> <!-- bottom section -->
<section class="turn-around-mobile">
<div class="text-center">
<h2>Turn your phone vertically</h2>
</div>
</section>
</body>
</html>
Raw
script.js
var userPosition = null;
// origin of 3 next variables acting as constants http://openweathermap.org/weather-conditions
var COLD = 903;
var HOT = 904;
var CALM = 951;
function savePosition (position) {
userPosition = position;
getWeather(position.coords.latitude, position.coords.longitude, "metric");
}
function getWeather (lat, lon, units) {
$.getJSON("http://api.openweathermap.org/data/2.5/weather?APPID=db4847852e5b0041310008ebb15c573a&units=" + units +"&lat=" + lat + "&lon=" + lon, function (result){
$("#city").html(result.name);
if (units=="metric") {
$("#number").html((result.main.temp|0) + "° C");
} else {
$("#number").html((result.main.temp|0) + " F");
}
// setting more info
if (units=="metric") {
$("#wind span").html((result.wind.speed|0) + " meters/sec");
} else {
$("#wind span").html((result.wind.speed|0) + " miles/hour");
}
$("#humidity span").html((result.main.humidity|0) + "%");
$("#description span").html(result.weather[0].description);
// setting the icon
$(".weather-icon").addClass("hidden");
$(".weather-icon#" + result.weather[0].icon).removeClass("hidden");
$("#weather-box").removeClass("hidden");
$("#intro-text").addClass("hidden");
// setting toggle ready
$('.toggle').css('visibility', 'visible');
// setting the top section background including situations without bottom section icons
$(".top").attr("id", "top-" + result.weather[0].icon);
if(result.weather[0].id >= 900 && result.weather[0].id !== COLD && result.weather[0].id !== HOT && result.weather[0].id !== CALM) {
$(".top").attr("id", "top-windy");
} else if (result.weather[0].id == COLD) {
$(".top").attr("id", "top-cold");
} else if (result.weather[0].id == HOT) {
$(".top").attr("id", "top-hot");
} else if (result.weather[0].id == CALM) {
$(".top").attr("id", "top-calm");
}
});
}
$(document).ready(function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(savePosition, function(error) {
// the message when geolocation cannot be read
alert("Allow Geolocation On Your Device");
}, {
enableHighAccuracy: true,
timeout : 5000
});
}
$("#toggle").on("change", function(){
if ($(this).prop("checked")) {
getWeather (userPosition.coords.latitude, userPosition.coords.longitude, "metric");
} else {
getWeather (userPosition.coords.latitude, userPosition.coords.longitude, "imperial");
}
});
$(".more").on("click", function (){
$("body").toggleClass("extra-info");
if($("body").hasClass("extra-info")){
$(this).text("Less");
} else {
$(this).text("More");
}
});
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
Raw
style.css
html {
width: 100vw;
height: 100vh;
}
body {
width: 100%;
height: 100%;
background-color: lightblue;
color: #455A64;
}
.top {
height: 60vh;
width: 100vw;
background-image: url(http://theonewhodo.es/weatherapp-images/intro-screen.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
/* top background sheep, day */
.top#top-01d {
background-image: url(http://theonewhodo.es/weatherapp-images/01d.png);
}
.top#top-02d {
background-image: url(http://theonewhodo.es/weatherapp-images/02d.png);
}
.top#top-03d {
background-image: url(http://theonewhodo.es/weatherapp-images/03d.png);
}
.top#top-04d {
background-image: url(http://theonewhodo.es/weatherapp-images/04d.png);
}
.top#top-09d {
background-image: url(http://theonewhodo.es/weatherapp-images/09d.png);
}
.top#top-10d {
background-image: url(http://theonewhodo.es/weatherapp-images/10d.png);
}
.top#top-11d {
background-image: url(http://theonewhodo.es/weatherapp-images/11d.png);
}
.top#top-13d {
background-image: url(http://theonewhodo.es/weatherapp-images/13d.png);
}
.top#top-50d {
background-image: url(http://theonewhodo.es/weatherapp-images/50d.png);
}
/* top background sheep, night */
.top#top-01n {
background-image: url(http://theonewhodo.es/weatherapp-images/01n.png);
}
.top#top-02n {
background-image: url(http://theonewhodo.es/weatherapp-images/02n.png);
}
.top#top-03n {
background-image: url(http://theonewhodo.es/weatherapp-images/03n.png);
}
.top#top-04n {
background-image: url(http://theonewhodo.es/weatherapp-images/04n.png);
}
.top#top-09n {
background-image: url(http://theonewhodo.es/weatherapp-images/09n.png);
}
.top#top-10n {
background-image: url(http://theonewhodo.es/weatherapp-images/10n.png);
}
.top#top-11n {
background-image: url(http://theonewhodo.es/weatherapp-images/11n.png);
}
.top#top-13n {
background-image: url(http://theonewhodo.es/weatherapp-images/13n.png);
}
.top#top-50n {
background-image: url(http://theonewhodo.es/weatherapp-images/50n.png);
}
/*extra cases*/
.top#top-windy {
background-image: url(http://theonewhodo.es/weatherapp-images/sunny-sheep.jpg);
}
.top#top-cold {
background-image: url(http://theonewhodo.es/weatherapp-images/sunny-sheep.jpg);
}
.top#top-hot {
background-image: url(http://theonewhodo.es/weatherapp-images/sunny-sheep.jpg);
}
.top#top-calm {
background-image: url(http://theonewhodo.es/weatherapp-images/sunny-sheep.jpg);
}
.bottom {
height: 40vh;
background-color: lightblue;
color: #FFF;
font-size: 1.5em;
}
.info-box {
padding: 1.5em 0 0;
font-size: 2em;
}
.toggle {
margin: 1em 1em 0 0;
visibility: hidden;
}
.toggle-pace .toggle-group {
transition: left 0.7s; -webkit-transition: left 0.4s;
}
.weather-icon {
font-size: 0.4em;
margin: -10px 0 0;
padding-left: 10px;
}
.weather-icon, .weather-icon li {
margin-bottom: 5px;
}
.weather-icon li {
list-style: none;
}
.icon-cloud::after {
content: "\f106";
color: #FFF;
}
.basecloud:before {
content: '\f105';
color: #FFF;
}
.turn-around-mobile {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #fff;
z-index: 1000;
display: none;
background: url(http://theonewhodo.es/weatherapp-images/mobile-vertical.png) no-repeat;
background-position: center center;
}
.turn-around-mobile h2 {
padding-top: 1em;
}
.more {
background-color: pink;
color: #FFF;
width: 70px;
height: 40px;
position: absolute;
left: 50%;
margin: 0 0 0 -35px;
border-radius: 0 0 10px 10px;
text-align: center;
border: 1px white dotted;
cursor: pointer;
}
.extra-info .more {
border-style: hidden dotted dotted dotted;
}
.middle {
position: absolute;
bottom: 40vh;
left: 0;
right: 0;
height: 0;
transition: height 0.5s;
background-color: pink;
border-radius: 20px 20px 0 0;
overflow: hidden;
}
.extra-info .middle {
height: 30vh;
transition: height 1.5s;
}
/* vertical align center*/
.parent {
display: table;
height: 100%;
width: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
position: relative;
}
.middle p > * {
font-weight: bold;
}
.thanks {
padding-top: 1em;
font-size: 12px;
}
#intro-text a {
color: #FFECB3;
}
/* media queries */
@media screen and (min-width: 768px){
.info-box {
padding: 2em;
font-size: 2.5em;
}
#data {
text-align: right;
}
.more {
font-size: 2em;
width: 170px;
height: 60px;
margin-left: -85px;
}
.middle p {
font-size: 1.8em;
}
}
@media only screen and (max-height: 415px) and (orientation: landscape){
.turn-around-mobile {
display: block;
}
section:not(.turn-around-mobile) {
display: none;
}
}
@media screen and (max-width: 767px) {
.info-box {
font-size: 1.5em;
text-align: left;
}
.middle p {
font-size: 1.5em;
}
}
@media screen and (min-width: 1200px) {
.middle {
width: 1000px;
position: absolute;
margin: 0 auto;
}
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet" />
<link href="https://procreative.eu/font/style.css" rel="stylesheet" />
Raw
Weather App.markdown

Weather App

Weather app showing current weather. A user can change units of temperature. The background in top section changes depending on weather, the same happens to the weather icons.

A Pen by Ewa the doer on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment