Skip to content

Instantly share code, notes, and snippets.

@devopsec

devopsec/Local Weather App.markdown

Last active May 21, 2016 00:56
Show Gist options
  • Save devopsec/24af92cdfa68774178821dbba2d58b9c to your computer and use it in GitHub Desktop.
Save devopsec/24af92cdfa68774178821dbba2d58b9c to your computer and use it in GitHub Desktop.
Download ZIP
Local Weather App
Raw
index.html
<div class="w3-container" id="background">
<div class="container-fluid">
<center><div class="container-fluid">
<div class="row w3-container w3-padding-hor-8 w3-xlarge"><h1>Weather Forecast</h1></div>
<div class="row w3-container w3-padding-hor-8"><h2 class="btn" id="description">Today's weather:</h2></div>
<div class="row w3-container w3-padding-hor-8"><button class="w3-btn w3-round-large" id="temp">Temp:</button></div>
<div class="row w3-container w3-padding-hor-8"><h4 id="icon">Icon:</h4></div>
<div class="row w3-container w3-padding-hor-8"><h5 id="city">City:</h5></div>
<div class="row w3-container w3-padding-hor-8"><h6 id="name">Created By: <a href="https://codepen.io/devopsec/" target="_blank"><span>DevOpSec</span></h6></div>
</center></div>
</div>
</div>
Raw
Local Weather App.markdown
Raw
script.js
$(document).ready(function() {
var weather;
var coord;
var weatherHTTP = "";
var options = {
enableHighAccuracy: false,
timeout: 8000,
maximumAge: 0
};
$("body").addClass("w3-dark-grey");
function error(err) {
console.warn('ERROR(' + err.code + '): ' + err.message);
window.alert("could not find location");
};
function success(pos) {
coord = pos.coords;
weatherHTTP = "http://api.openweathermap.org/data/2.5/weather?lat=" + coord.latitude + "&lon=" + coord.longitude + "&APPID=d2d5c7a36913502ee0887bb99c5edf1f";
$.getJSON(weatherHTTP, function(data) {
$("#description").text(data.weather[0].description);
var tempNum = Math.round(data.main.temp - 273.15);
var tempText = tempNum + "&#x2103";
$("#temp").html(tempText);
var iconHTTP = "<img src=\"" + "http://openweathermap.org/img/w/" + data.weather[0].icon + ".png\"></img>";
$("#icon").html(iconHTTP);
$("#city").text(data.name);
});
};
$("#temp").on("click", function() {
var degree = document.getElementById("temp").innerHTML;
console.log(degree);
var degreeC, degreeF, tempNum, tempText;
var regexF = /\u2109/i, regexC = /\u2103/i;
var regexTestC = regexC.exec(degree);
var regexTestF = regexF.exec(degree);
if (regexTestC !== null) {
degreeC = degree.replace("\u2103", "");
console.log(degreeC);
degreeF = parseInt(degreeC) * 9 / 5 + 32;
tempNum = Math.round(degreeF);
console.log(tempNum);
tempText = tempNum + "&#x2109";
console.log(tempText);
$("#temp").html(tempText);
}
else if (regexTestF !== null) {
degreeF = degree.replace("\u2109", "");
console.log(degreeF);
degreeC = (parseInt(degreeF) - 32) * 5 / 9;
tempNum = Math.round(degreeC);
tempText = tempNum + "&#x2103";
$("#temp").html(tempText);
}
else {
console.warn("no matching conditional statements");
}
});
navigator.geolocation.getCurrentPosition(success, error, options);
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
Raw
style.scss
* {
box-sizing: border-box;
}
body {
margin: auto; height: 100%; overflow: hidden;
padding: auto; width: auto; height: auto;
background-position: center center;
background-size: cover; background-attachment: fixed;
}
.container-fluid {
margin-top: auto;
}
h1 {
text-shadow: 1px 1px 2px #222222;
font-family: 'Oswald', sans-serif;
margin-top: auto; padding-top: 40px;
}
#temp {
margin-top: 20px; margin-bottom: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment