Skip to content

Instantly share code, notes, and snippets.

@highsmithcodes

highsmithcodes/Local Weather.markdown

Created June 17, 2016 09:28
Show Gist options
  • Save highsmithcodes/3acddb38cfcec822ebfbe375becf3f4c to your computer and use it in GitHub Desktop.
Save highsmithcodes/3acddb38cfcec822ebfbe375becf3f4c to your computer and use it in GitHub Desktop.
Download ZIP
Local Weather
Raw
index.html
<!-- Card Design Taken From http://codepen.io/MattiaAstorino/pen/VYWxXy - Mattia Astorino - All rights of the design go to the maker of that pen. Data from Open Weather Map API -->
<div class="card card--big">
<div class="card__image"></div>
<h2 class="card__title" id="location">Your Location</h2>
<p class="card__text"><span class="card__info">Temperature: </span><span id="tempC">0°C </span><span id="tempF">0°F </span><br>
<span class="card__info">Conditions: </span><span id="weather">Not Quite Sure Yet </span></p>
<div class="card__action-bar">
<button href="#" class="card__button showF" onclick="">Show in F</button>
<button href="#" class="card__button showC" onclick="">Show in C</button>
</div>
</div>
Raw
script.js
var country;
var city;
ip = "http://ip-api.com/json";
weather_url = "//api.openweathermap.org/data/2.5/weather?q=";
APPID = "&APPID=b09b50cdbcc229223ca2e0bee16b6289&units=metric";
F = false;
var tempC = 0;
var tempF = 0;
var getWeather = function(weatherRequest) {
$.ajax({
url: weatherRequest,
type: 'GET',
success: function(json) {
weather = json.weather[0].main;
id = json.weather[0].id;
tempC = json.main.temp;
tempF = tempC * 9 / 5 + 32;
$("#tempC").html(tempC + "°C");
$("#tempF").html(tempF + "°F");
$("#weather").html(weather);
$("#location").html(city + ", " + country);
switch (weather) {
case "Mist":
$(".card__image").addClass("bgMist");
break;
case "Clear":
$(".card__image").addClass("bgClear");
break;
case "Rain":
$(".card__image").addClass("bgRain");
break;
case "Thunderstorm":
$(".card__image").addClass("bgThunder");
break;
case "Drizzle":
$(".card__image").addClass("bgDrizzle");
break;
case "Snow":
$(".card__image").addClass("bgSnow");
break;
case "Atmosphere":
$(".card__image").addClass("bgFog");
break;
case "Clouds":
$(".card__image").addClass("bgClouds");
break;
case "Extreme":
if (id >= 900 && id < 903) {
$(".card__image").addClass("bgTornado");
} else if (id === 903) {
$(".card__image").addClass("bgSnowflake");
} else if (id === 904) {
$(".card__image").addClass("bgHeat");;
} else if (id === 905) {
$(".card__image").addClass("bgBigWind");
} else {
$(".card__image").addClass("bgHail");
}
break;
case "Additional":
$(".card__image").addClass("bgSun");
break;
}
},
error: function(err) {
console.log("Request failed 2, error= " + err);
}
});
}
var getInfo = function(ipUrl, weatherUrl) {
$.ajax({
url: ipUrl,
type: 'GET',
success: function(json) {
city = json.city;
country = json.country;
url2 = weatherUrl + city + APPID;
getWeather(url2);
},
error: function(err) {
console.log("Request failed 1, error= " + err);
}
});
}
getInfo(ip, weather_url);
function changeFormat(weatherRequest) {
$.ajax({
url: weatherRequest,
type: 'GET',
success: function(json) {
F = !F;
tempC = json.main.temp;
tempF = tempC * 9 / 5 + 32;
if (F === true) {
$("#temp").html(tempF + "°F");
} else if (F === false) {
$("#temp").html(tempC + "°C");
}
}
})
};
$(document).ready(function() {
$(".showC").hide();
$("#tempF").hide();
$(".showF").click(function() {
$("#tempC").hide();
$(".showF").hide();
$("#tempF").show();
$(".showC").show();
});
$(".showC").click(function() {
$("#tempF").hide();
$(".showC").hide();
$("#tempC").show();
$(".showF").show();
});
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
Raw
style.css
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,300);
:root {
-webkit-transition: all 300ms;
transition: all 300ms;
}
:root.bg--big {
background-color: #00BCD4;
}
body {
height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
font-family: 'Roboto', sans-serif;
-webkit-transform: translateZ(0);
transform: translateZ(0);
font-weight: 400;
}
button {
border: none;
background: transparent;
}
.controller-container {
margin-bottom: 5%;
text-align: center;
}
.controller {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-block;
margin: 0 20px;
font-size: 22px;
padding: 10px 0;
color: #FFF;
position: relative;
-webkit-transition: all 100ms cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 100ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.controller:after {
content: "";
height: 3px;
display: block;
position: absolute;
bottom: 0;
width: 0;
-webkit-transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
background-color: #FFF;
}
.controller.is_current:after {
width: 100%;
}
.controller:hover,
.controller.is_current {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
cursor: pointer;
}
.card {
will-change: transform;
margin: 8px;
position: relative;
border-radius: 2px;
overflow: hidden;
background-color: #fafafa;
height: 35%;
width: 344px;
-webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
}
.card:hover {
cursor: pointer;
}
.card__image {
position: absolute;
background-size: cover;
background-position: center bottom;
background-repeat: no-repat;
width: 100%;
height: 100%;
overflow: hidden;
display: block;
opacity: 0;
}
.card__image:after {
content: "";
display: block;
position: absolute;
background-color: rgba(0, 0, 0, 0.1);
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.card__title {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: 24px;
color: #FFF;
margin: 0;
position: absolute;
left: 0;
right: 0;
padding: 0 16px;
font-weight: 400;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
-webkit-transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.card__subtitle {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: 14px;
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: #000;
left: 88px;
right: 0;
top: 45px;
position: absolute;
padding: 0 16px;
opacity: 0;
-webkit-transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.card__text {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: 14px;
display: block;
left: 0;
right: 0;
top: 100px;
padding: 16px;
margin: 0;
line-height: 1.6;
position: absolute;
color: #000;
overflow: hidden;
-webkit-transition: width 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
transition: width 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
-webkit-transition: delay 0.1s;
transition: delay 0.1s;
}
.card__action-bar {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: absolute;
bottom: 0;
top: auto;
left: 0;
right: 0;
padding: 0 8px;
border-top: 1px solid #E0E0E0;
boz-sizing: border-box;
height: 52px;
-webkit-transition: left 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
transition: left 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.card__button {
outline: none;
position: relative;
display: inline-block;
line-height: 52px;
padding: 0 16px;
color: #000;
}
.card--big {
height: 304px;
min-height: 304px;
}
.card--big .card__image {
border-radius: 1px 1px 0 0;
left: 0;
right: 0;
top: 0;
opacity: 1;
max-height: 176px;
}
.card--big .card__title {
top: 135px;
}
.card--big .card__text {
top: 176px;
}
.card--big .card__action-bar {
left: 0;
}
.card--medium {
box-shadow: 0 13px 25px 0 rgba(0, 0, 0, 0.3), 0 11px 7px 0 rgba(0, 0, 0, 0.19);
height: 208px;
min-height: 208px;
}
.card--medium .card__image {
border-radius: 1px 1px 0 0;
left: -100%;
right: 0;
top: 0;
max-height: 0;
opacity: 0;
}
.card--medium .card__title {
color: #FF1744;
top: 16px;
}
.card--medium .card__text {
font-size: 16px;
top: 50px;
}
.card--medium .card__action-bar {
left: 0;
}
.card--small {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
height: 136px;
min-height: 136px;
}
.card--small .card__image {
border-radius: 1px 0 0 1px;
left: 0;
top: 0;
width: 88px;
opacity: 1;
max-height: 136px;
}
.card--small .card__image:after {
opacity: 0;
}
.card--small .card__title {
color: #000;
left: 88px;
top: 8px;
}
.card--small .card__subtitle {
opacity: 1;
left: 88px;
}
.card--small .card__text {
top: 30px;
opacity: 0;
}
.card--small .card__action-bar {
left: 88px;
}
.card__info {
outline: none;
position: relative;
display: inline-block;
padding: 0 2px;
color: #547D5E;
}
.bgBigWind {
background-image: url(https://suzannebrandsen.files.wordpress.com/2013/09/windsurfing-029.jpg);
}
.bgMist {
background-image: url(https://images.unsplash.com/uploads/1411419068566071cef10/7562527b?crop=entropy&fit=crop&fm=jpg&h=950&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925);
}
.bgHeat {
background-image: url(https://images.unsplash.com/photo-1447601932606-2b63e2e64331?crop=entropy&fit=crop&fm=jpg&h=950&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925);
}
.bgHail {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/c/cc/Hail_Storm.jpg);
}
.bgSun {
background-image: url(http://www.photos-public-domain.com/wp-content/uploads/2011/02/bright-sun-in-blue-sky.jpg);
}
.bgSnowflake {
background-image: url(https://images.unsplash.com/photo-1447754147464-8b29cbf07166?crop=entropy&fit=crop&fm=jpg&h=950&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925);
}
.bgTornado {
background-image: url(http://beprepared.com/wordpress/wp-content/uploads/2015/03/Tornado.jpg);
}
.bgRain {
background-image: url(https://images.unsplash.com/photo-1421987392252-38a07781c07e?crop=entropy&fit=crop&fm=jpg&h=950&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925);
}
.bgClear {
background-image: url(https://images.unsplash.com/reserve/m6rT4MYFQ7CT8j9m2AEC_JakeGivens%20-%20Sunset%20in%20the%20Park.JPG?crop=entropy&fit=crop&fm=jpg&h=950&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925);
}
.bgThunder {
background-image: url(https://images.unsplash.com/photo-1461511669078-d46bf351cd6e?crop=entropy&fit=crop&fm=jpg&h=950&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925);
}
.bgDrizzle {
background-image: url(https://images.unsplash.com/19/drops.JPG?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=36ad966a86cf6808d73922c5b3a16664);
}
.bgSnow {
background-image: url(https://images.unsplash.com/photo-1453783991377-3529f1f1e1d8?crop=entropy&fit=crop&fm=jpg&h=950&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925);
}
.bgFog {
background-image: url(http://constantine.typepad.com/.a/6a0120a7fc3be9970b01bb08d49380970d-pi);
}
.bgClouds {
background-image: url(https://images.unsplash.com/photo-1455735459330-969b65c65b1c?crop=entropy&fit=crop&fm=jpg&h=950&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925);
}
Raw
styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment