Jean's Local Weather App

index.html

html
  head
    title Jean's Local Weather Application

  body
    h1 Jean's
    h2 Local Weather Application

    #iconTemp Temperature:<br>
      #icon
      #temp

    #weatherWrapper
      .location.details Location:<br>
      #conditions.details Conditions:<br>
      #humidity.details Humidity:<br>
      #wind.details Wind:<br>

    footer Contact
      .container
        .row
          .col-md-12
             a(href='mailto:jcarlogonz@gmail.com')
                  i.fa.fa-envelope.fa-fw - 
               a(href='https://github.com/Jean13', target='_blank')
                  i.fa.fa-github.fa-fw -   
               a(href='https://www.linkedin.com/in/jcarlogonzalez', target='_blank')
                  i.fa.fa-linkedin -
               a(href='http://codepen.io/Jean13/', target='_blank')
                  i.fa.fa-codepen

Jean's Local Weather App.markdown

Jean's Local Weather App

See the weather in your current location. Get the temperature, humidity, and wind direction and speed. Temperatures are shown in both Fahrenheit and Celsius.

A Pen by Jean on CodePen.

License.

script.js

$(document).ready(function() {

  getLocation();
  var appId = "9a33832b04c64c9a07e91f3d243f7e8b";

  function getLocation() {
    $.get("http://ipinfo.io", function(location) {
      console.log(location);

      $('.location')
        .append(location.city + ", ")
        .append(location.region);

      var units = getUnits(location.country);
      getWeather(location.loc, units);

    }, "jsonp");
  }

  function getWeather(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 + "&APPID=" + appId;

    console.log(weatherApiUrl);

    $.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));
   
      var convert;
      
      if (units == "imperial") {
        convert = ((((temperature - 32) * 5) / 9).toFixed(1)+ "° C");
      }
      
      else {
        convert = (((1.8 * temperature + 32).toFixed(1)+ "° F"));
      }
      
      var humidity = weather.main.humidity;

      console.log(weather);

      $('#icon')
        .append("<img src='http://openweathermap.org/img/w/" + weather.weather[0].icon + ".png'>");

      $('#temp').append(temperature + "&deg; " + unitLabel + 
" | " + convert);

      $('#humidity').append(humidity + '%');
      $('#conditions').append(weather.weather[0].description);
      $('#wind').append(windDir + " " + weather.wind.speed + " mph");
    }, "jsonp");
  };

  function convertWindDirection(dir) {
    var rose = ['North', 'Northeast', 'East', 'Southeast', 'South', 'Southwest', 'West', 'Northwest'];
    var eightPoint = Math.floor(dir / 45);
    return rose[eightPoint];
  }

  function getUnits(country) {
    var imperialCountries = ['US', 'BS', 'BZ', 'KY', 'PW'];

    if (imperialCountries.indexOf(country) == -1) {
      var units = 'metric';
    } else {
      units = 'imperial';
    }

    console.log(country, units);
    return units;
  }
});

scripts

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

style.css

@import "bourbon";

@import url(https://fonts.googleapis.com/css?family=Cinzel|Philosopher|Kreon|Merriweather|Electrolize|Orbitron);

$lightGrey: #eaeaea;
$darkPurple: #2b0c36;
$aWhite: #f9f2f2;
$silver: #c0c0c0;

html{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: url("http://ndrocketteam.com/img/header-bg.jpg") no-repeat;
  background-size: cover;
}

body {
  font-family: 'Kreon';
  text-align: center;
  font-size: 16px;
}

h1 {
  font-family: 'Cinzel';
  font-size: 30px;
  text-align: center;
  color: white;
  padding: 1%;
}

h2 {
  font-family: 'Philosopher';
  text-align: center;
  color: $silver;
  font-weight: bold;
  margin-bottom: 4%;
  text-shadow: 1px 1px 8px grey;
}

#iconTemp {
  color: $aWhite;
  font-family: 'Orbitron';
}

#icon, #temp{
  display: inline-block;
  margin-bottom: .5%;
}

img{
  vertical-align: middle;
}

#icon{
  position: relative;
  bottom: 5px;
}

#temp{
  font-size: 1.8em;
  font-family: 'Electrolize';
  font-weight: bold;
  padding-bottom: 1%;
  color: white;
  text-shadow: 0 0 0.2em #333;
}

.location, #conditions, #humidity, #wind{
  display: inline-block;
}

.details{
  border: 2px solid #ffffff;
  color: $darkPurple;
  padding: 1.5% 1% 1.5% 1%;
  margin: 0 auto 0.7% auto; 
  background-color: #ffffff;
  border-radius: 0.4em;
  box-shadow: .2em .2em .2em #444;
  opacity: 0.7;
  margin-bottom: 4%;
}

footer {
  font-family: 'Orbitron';
  color: $darkPurple;
  display: inline-block;
  padding: .5% 1.5% .5% 1.5%;
  margin: 0 auto 0.7% auto; 
  background-color: #ffffff;
  border-radius: 0.2em;
  box-shadow: .2em .2em .2em #444;
  opacity: 0.4;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />