Show the Local Weather

index.html

<div class="container-fluid video theme-showcase">
  <div class="row">
    <div class="jumbotron text-center col-lg-8 col-sm-offset-2">
      <h2> Zipline: Show the Local Weather </h2>
      <div class="row ">
        <div class="col-lg-4">
            <div class="circle col-lg-offset-1">
            <p id="location">...</p>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="circle circle-temperature col-lg-offset-1">
            <h1 id="temperature">...</h1>
            <div id="icon"></div>
            </div>
        </div>
        <div class="col-lg-4 text-center">
            <div class="circle col-lg-offset-1">
            <p id="wind">...</p>
            </div>
        </div>        
      </div>
    </div>    
  </div>
</div> 
<div class="pattern-black">
</div>

 
  

script.js

$("html").addClass("full");

convertWindDirection = function (dir) {
  var rose = ['N','NE','E','SE','S','SW','W','NW'];
  var eightPoint = Math.floor(dir / 45);
  return rose[eightPoint];
}
getUnits = function (country) {
  var imperialCountries = ['US', 'BS', 'BZ', 'KY', 'PW'];
        
  if (imperialCountries.indexOf(country) === -1) {
    var units = 'metric';
  } else {
    units = 'imperial';
  }
  return units;
}

getWeather = function (loc, units) {
  lat = loc.split(',')[0];
  lon = loc.split(',')[1];
  var weatherApiUrl = 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&units=' + units;

  $.get(weatherApiUrl, function (weather) {
    var windDir = convertWindDirection(weather.wind.deg);
    var temperature = weather.main.temp;
    var unitLabel;
    if (units === 'imperial') {
      unitLabel = 'F';
    } else {
      unitLabel = 'C';
    }
    temperature = parseFloat(temperature.toFixed(1));

    objTemperature = getTemperature();
    objTemperature.value = temperature;
    changeBackground(objTemperature);
    
    $('#icon').append('<img src=\'http://openweathermap.org/img/w/' + weather.weather[0].icon + '.png\'>');
    $('#temperature').text(temperature + ' ' + unitLabel);
    $('#conditions').text(weather.weather[0].description);
    $('#wind').text(windDir + ' ' + weather.wind.speed + ' knots');
  }, 'jsonp');
}

 getLocation = function() {
    console.log(location.city);
        $.get('http://ipinfo.io', function (location) {
            if (location.city === null){
              location.city = 'N/A';
            }
            $('#location').text(location.city + ', ').append(location.region);
            var units = getUnits(location.country);
            getWeather(location.loc, units);
        }, 'jsonp');
    }


backGroundList = {lowTemp: "url('http://www.desktopwallpaperhd.net/wallpapers/15/7/spitsbergen-norway-mountain-reflections-background-image-travel-wallpaper-150999.jpg') no-repeat center fixed",
                 mediumTemp: "url('http://www.desktopwallpaperhd.net/wallpapers/6/b/tranoy-hamaroy-lighthouse-norway-wallpaper-nature-background-web-62459.jpg') no-repeat center fixed",
                  goodTemp:"url('http://www.desktopwallpaperhd.net/wallpapers/7/7/wallpaper-lake-tahoe-california-web-sunrise-emerald-eagle-creek-70135.jpg') no-repeat center fixed",
                 };

getTemperature = function(){
  var objTemperature = {
    value: 6
  }
  return objTemperature;
}

changeBackground = function(temperature){
  
  if (temperature===null){    
    $("html").css("background", "url('http://placehold.it/1920x1080') no-repeat center fixed");
   return; 
  }
  
  if (temperature.value <= 7){
    $("html").css("background", backGroundList.lowTemp);  
    return;
  };

  if ((temperature.value > 7) && (temperature.value < 15)){
    console.log('snowSoft');
    $("html").css("background", backGroundList.mediumTemp);  
  };  
  
  if (temperature.value > 15){
    console.log('snowSoft');
    $("html").css("background", backGroundList.goodTemp);  
  };    
} 

getLocation();

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Show the Local Weather.markdown

Show the Local Weather

A Pen by Paulo Leonardo Vieira Rodrigues on CodePen.

License.

style.css

.full {
    background: url('http://placehold.it/1920x1080') no-repeat center center fixed;    
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.theme-showcase {
  padding: 10%;
}

#icon{
  position: relative;
  bottom: 5px;
}
.jumbotron {
  background: rgba(0,0,0,0.7);
  background-size: cover;    
  border: 1px #7ec0ee solid;
}

.jumbotron h2 {
  color: #7ec0ee; 
}

.pattern-black:after {
  background: url("http://www.geend.com/images/raster.png") repeat;
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;  
  position: absolute;
  	z-index: -200;
  
}	  

.video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	background: rgba(0,0,0,0.7);
	background-size: cover;
}

p{
  color: #7ec0ee; 
}

.jumbotron h2{
  padding-bottom: 50px;
}

.circle h1 {
  font-size: 45px;
  color: #7ec0ee; 
}
.circle {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  position: relative;
  border: 5px #7ec0ee solid; 
  padding-top: 25%;  

}

.circle-temperature {
  padding-top: 10%;  
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />