Skip to content

Instantly share code, notes, and snippets.

@benjaminadk
Last active May 21, 2017 17:48
Show Gist options
  • Save benjaminadk/31a2834ababc18ebccc95d39efa26a92 to your computer and use it in GitHub Desktop.
Save benjaminadk/31a2834ababc18ebccc95d39efa26a92 to your computer and use it in GitHub Desktop.
FCC Weather App Project

FCC Weather App Project

Project uses api ip lookup and openweather api to get data on users location and local weather. App doesnt seem to work with https codepen so if there is a problem try switching to http.

A Pen by Benjamin on CodePen.

License.

<input type='button' value='HELP ME!!!' onclick='newWindowObj.open()'/>
<div class='d-flex justify-content-center'>
<div id='display'>
</div>
<div class='node1'>
<span class='span1'></span>
</div>
<div class='node2'>
<span id='cel' class='invisible'>C</span><span id='far'>F<span class='tiny'>push me</span></span>
</div>
<div class='node3'><span class='span2'></span>
</div>
</div>
$(document).ready(function() {
var APIIP = "http://ip-api.com/json";
var hour = new Date().getHours();
var newWindowObj = window.open("", "newWindow","width=500,height=150,top=100,left=100,toolbar=1,location=true,scrollbars=false,menubar=true,resizable=false,personalbar=true");
newWindowObj.document.write("<p style='background-color:red; border: 1px solid black;'>hello, if the weather isn't showing up....try deleting the -s- in https in the address bar. If that doesn't work open me up in debugged and that should do the trick. sorry for the inconvience.</p>");
$.getJSON(
APIIP,
//requesting location data
function(data) {
var lat = data.lat;
var lon = data.lon;
var KEY = "6b214ab071f67d626e6b9e926901e3f9";
var URL =
"http://api.openweathermap.org/data/2.5/weather?lat=" +
lat +
"&lon=" +
lon +
"&appid=" +
KEY;
//requesting weather data
$.getJSON(URL, function(data) {
var type = data.weather[0].main;
var id = data.weather[0].id;
var city = data.name;
var tempCel = Math.round(data.main.temp - 273.15);
var tempC = tempCel + "°";
var weather = data.weather[0].description;
var tempF = Math.round(tempCel * (9 / 5) + 32) + "°";
console.log(tempF);
console.log(id);
//setting data on page
$(".span1").text(tempF);
$(".span2").text(city);
//want to have one bg for night time
/*
if(hour > 5 || hour < 18){
$('#display').css("background-image", "url ('https://i.kinja-img.com/gawker-media/image/upload/s--EUYvNPnM--/c_scale,f_auto,fl_progressive,q_80,w_800/ke9svxml3ctkvgix59xl.jpg')");
}
*/
//if black for different types of weather id
//clear sky bg
if (id === 800 || id ===801) {
$("#display").css({
"background-image": "url('http://ak5.picdn.net/shutterstock/videos/1747219/thumb/1.jpg')",
"background-position": "-80px 10"
});
}
//thunderstorm
else if (id <= 232 && id >= 200) {
$("#display").css({
"background-color": "black",
"background-image": "url('http://www.clker.com/cliparts/o/9/6/H/6/x/storm-cloud.svg')"
});
}
//rain bg
else if (id < 532 && id >= 500) {
$("#display").css({
"background-image": "url('http://www.hartstoneinn.com/wp-content/uploads/2013/06/rainy_day.jpg')",
"background-position": "-200px 0"
});
}
//snow bg
else if (id <= 622 && id >= 600) {
$("#display").css(
"background-image",
"url('http://uiconstock.com/wp-content/uploads/2014/03/Winter_Background.jpg')"
);
}
//cloudy no rain bg
else if (id <= 804 && id >= 802) {
$("#display").css({
"background-color": "lightblue",
"background-image": "url('http://www.clipartbest.com/cliparts/ncE/BBb/ncEBBbMRi.png')",
"background-position": "-120px -190px"
});
}
//foggy or hazy bg
else if (id < 782 && id > 700) {
$("#display").css({"background-image":"url('http://clipground.com/images/fog-day-clipart-9.jpg')", "background-size": "cover"});
}
//default chicken cartoon bg
else {
$("#display").css({
"background-image": "url('https://www.wpclipart.com/cartoon/animals/bird/bird_cartoons_2/confused_chickens.png')",
"background-position": "140px 50px"
});
}
//celcius farenheit toggle
$(".node2").on("click", function() {
$("#cel, #far").toggleClass("invisible");
if ($(".span1").text() === tempF) {
$(".span1").text(tempC);
} else {
$(".span1").html(tempF);
}
});
});
}
);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
body {
background-color: rgba(219, 214, 219, 0.39);
}
#display {
width: 800px;
height: 500px;
border: 3px solid black;
margin: 100px 0;
border-radius: 50%;
position: fixed;
box-shadow: 10px 10px black;
}
.node1 {
width: 300px;
height: 300px;
border: 4px solid black;
border-radius: 50%;
position: relative;
left: 470px;
top: 10px;
z-index: 10;
background-color: rgb(254, 252, 148);
color: black;
box-shadow: 5px 5px black;
cursor: default;
}
.node2 {
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 50%;
position: relative;
left: -300px;
top: 400px;
z-index: 10;
background-color: rgb(254, 252, 148);
color: black;
box-shadow: 5px 5px black;
cursor: pointer;
}
.node3 {
border: 1px solid black;
position: relative;
top: 430px;
left: 100px;
height: 100px;
border-radius: 50px;
padding: 10px 15px 20px 15px;
background-color: rgb(254, 252, 148);
color: black;
box-shadow: 5px 5px black;
cursor: default;
}
.span1 {
font-size: 120px;
position: relative;
top: 55px;
left: 65px;
}
.span2 {
font-size: 50px;
position: relative;
}
#cel,
#far {
font-size: 100px;
position: relative;
}
#cel {
top: 30px;
left: 62px;
}
#far {
top: 30px;
}
.invisible {
visibility: hidden;
}
.tiny {
font-size: 10px;
border: 1px solid black;
border-radius: 30px;
padding: 2px 4px;
background-color: white;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment