JavaScript: Show the Local Weather

Demo: https://codepen.io/dragoncoin/pen/xqGgwg

HTML Code:

<html>
<body>
<h3 class="text-center">A Free Code Camp JavaScript Intermediate Level Project</h3>
<div class="container">

<div class="text-center">
<ul class="list-unstyled">
<li id="city"></li>
<li id="temperature"></li>
<!-- <li id="weatherType"></li> -->
<!-- <li id="windSpeed"></li> -->
<li id="dateTime"></li>

</ul>
</div>
</div>
</body>
</html>

CSS Code:

body{
font-family: "Garamond";
color: black;
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: black;
}

h3{
text-shadow: 1px 1px white;
}
li {
text-decoration: none;
font-size: 36px;
text-shadow:
-1px -1px 0 white,
1px -1px 0 white,
-1px 1px 0 white,
1px 1px 0 white;
}

#temperature:hover {
text-decoration: none;
color: red;
font-size: 36px;
}

.container{
width: 320px;
height: 320px;
background: transparent;
// opacity: 0.5;
// border-color: yellow;
// border-style: solid;
// border: 1px solid blue;
border-radius: 50%;
box-shadow: 5px 5px 20px 1px black, inset -5px -5px 12px 0.5px black;
// padding: 20px;
padding-top: 20px;
// text-shadow: 1px 1px black;
margin-top: 50px;
font-weight: bold;

}

JavaScript Code:

$(document).ready(function(){
var long, lat, api, geolocate;
var fTemp, cTemp, kTemp;
var faren=true;
var city;

/* This navigator gelocation doesn't work consistently; thus, such method is scrapped
navigator.geolocation.getCurrentPosition(function(success) {
console.log("geolocation allowed");

// if (navigator.geolocation){
// navigator.geolocation.getCurrentPosition(function(position){
long=position.coords.longitude;
lat =position.coords.latitude;
api="http://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&appid=d5728c268a278fe861a3a2610bd3c6f9";
// console.log(api) ;

$.getJSON(api,function(data){

// var weatherType=data.weather[0].description;
var weatherIcon=data.weather[0].icon;
kTemp=data.main.temp;
// var windSpeed=(2.237*data.wind.speed).toFixed();
city=data.name;
fTemp=Math.round((kTemp)*(9/5)-459.67);
cTemp=Math.round(kTemp-273);

function dateTime() {
var d = new Date(),
minutes = d.getMinutes().toString().length == 1 ? '0'+d.getMinutes() : d.getMinutes(),
// hours = d.getHours().toString().length == 1 ? '0'+d.getHours() : d.getHours(),
hours = d.getHours()< 13 ? d.getHours() : d.getHours()-12,
ampm = d.getHours() >= 12 ? 'PM' : 'AM',
months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
return days[d.getDay()]+' '+months[d.getMonth()]+' '+d.getDate()+' '+hours+':'+minutes+' '+ampm;
}


$("#city").html(city);
// $("#weatherType").html("Current weather is: "+'"'+weatherType+'"');
$("#temperature").html("<img src='http://openweathermap.org/img/w/"+weatherIcon+".png'></img>"+fTemp+"&deg;F");
$("#temperature").hover(function(){if (faren===true){
$("#temperature").html("<img src='http://openweathermap.org/img/w/"+weatherIcon+".png'></img>"+cTemp+"&deg;C");
faren=false;}
else{
$("#temperature").html("<img src='http://openweathermap.org/img/w/"+weatherIcon+".png'></img>"+fTemp+"&deg;F");
faren=true;}
} );
// $("#windSpeed").html("Wind speed: "+windSpeed+" mph");
$("#dateTime").html(dateTime());


// Targeting the background. This should be redone to pick more accurate images to represent the actual weather conditions, time of day, and other factors.
if(fTemp>90){
$("body").css("background-image",'url("http://cdn20.patchcdn.com/users/119085/20160706/124451/styles/T600x450/public/article_images/screen_shot_2016-06-15_at_11.38.32_am.jpg")');}
else if(fTemp>75){
$("body").css("background-image",'url("http://cdn20.patchcdn.com/users/119085/20160620/044534/styles/T600x450/public/article_images/screen_shot_2016-06-20_at_12.39.50_pm_0.jpg")');}
else if(fTemp>60){
$("body").css("background-image",'url("https://2.bp.blogspot.com/-5YWs5CzX_l0/V3hA73_iiFI/AAAAAAAAFi4/HHwEo6hM1uQI5R3Bq2dYc3IOW8HOLeFagCLcB/s1600/070216SunHalo2.jpg")');}
else if(fTemp>45){
$("body").css("background-image",'url("https://i.ytimg.com/vi/AtG1paGpfv0/maxresdefault.jpg")');}
else if(fTemp>30){
$("body").css("background-image",'url("https://i.imgur.com/K8ZDc9H.jpg")');}
else if(fTemp>15){
$("body").css("background-image",'url("https://images.scribblelive.com/2016/10/15/79658c7e-aa22-4a8d-b274-48282d456c50.jpg")');}
else{
$("body").css("background-image",'url("http://previews.123rf.com/images/peterz/peterz0612/peterz061200031/683186-Winter-branches-with-snow-without-sky-White-background-Fairy-tale-of-winter-forest-Cold-weather-Hori-Stock-Photo.jpg")')};

}); //ends $getJSON(api,function(data))
// });} //ends navigator.geolocation

}, // ends geolocation success sequence
function(failure) {
console.log("geolocation allowed");
*/
$.getJSON("http://ip-api.com/json",function(location){
lat=location.lat;
long=location.lon;
api="http://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&appid=d5728c268a278fe861a3a2610bd3c6f9";

// console.log(api);

$.getJSON(api,function(data){

// console.log(data);
var weatherType=data.weather[0].description;
var weatherIcon=data.weather[0].icon;
kTemp=data.main.temp;
// var windSpeed=(2.237*data.wind.speed).toFixed();
city=data.name;
fTemp=Math.round((kTemp)*(9/5)-459.67);
cTemp=Math.round(kTemp-273);

function dateTime() {
var d = new Date(),
minutes = d.getMinutes().toString().length == 1 ? '0'+d.getMinutes() : d.getMinutes(),
// hours = d.getHours().toString().length == 1 ? '0'+d.getHours() : d.getHours(),
hours = d.getHours()< 13 ? d.getHours() : d.getHours()-12,
ampm = d.getHours() >= 12 ? 'PM' : 'AM',
months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
return days[d.getDay()]+' '+months[d.getMonth()]+' '+d.getDate()+' '+hours+':'+minutes+' '+ampm;
}

// Display to Screen
$("#city").html(city);
// $("#weatherType").html('"'+weatherType+'"');
$("#temperature").html("<img src='http://openweathermap.org/img/w/"+weatherIcon+".png' height='70px' width='70px'></img>"+fTemp+"&deg;F");
$("#temperature").hover(function(){if (faren===true){
$("#temperature").html("<img src='http://openweathermap.org/img/w/"+weatherIcon+".png'></img>"+cTemp+"&deg;C");
faren=false;}
else{
$("#temperature").html("<img src='http://openweathermap.org/img/w/"+weatherIcon+".png'></img>"+fTemp+"&deg;F");
faren=true;}
} );
// $("#windSpeed").html("Wind speed: "+windSpeed+" mph");

$("#dateTime").html(dateTime());


// Targeting the background. This should be redone to pick more accurate images to represent the actual weather conditions, time of day, and other factors.
if(fTemp>90){
$("body").css("background-image",'url("http://discovermagazine.com/~/media/import/images/2/0/5/desert.jpg")');}
else if(fTemp>75){
$("body").css("background-image",'url("https://az616578.vo.msecnd.net/files/2016/02/14/635910870933614574331807364_worms-hot-weather.jpg")');}
else if(fTemp>60){
$("body").css("background-image",'url("https://az616578.vo.msecnd.net/files/2016/02/22/635917212236923915842672207_warmweatherlead.jpg")');}
else if(fTemp>45){
$("body").css("background-image",'url("http://multimedia.resem.co/s838x629_1403494338584.jpg")');}
else if(fTemp>30){
$("body").css("background-image",'url("https://images.travelpod.com/tripwow/photos2/ta-0142-262a-e2ad/cool-weather-wisconsin-dells-united-states%2B1152_13025461545-tpfil02aw-20832.jpg")');}
else if(fTemp>15){
$("body").css("background-image",'url("https://images.scribblelive.com/2016/10/15/79658c7e-aa22-4a8d-b274-48282d456c50.jpg")');}
else{
$("body").css("background-image",'url("http://previews.123rf.com/images/peterz/peterz0612/peterz061200031/683186-Winter-branches-with-snow-without-sky-White-background-Fairy-tale-of-winter-forest-Cold-weather-Hori-Stock-Photo.jpg")')};

}); //ends $getJSON(api,function(data))

}); // ends function(location)

// } // ends geolocation failure sequence
//); // ends geolocation failure sequence

}); //ends document

Leave a Reply

Your email address will not be published. Required fields are marked *