Show the Local Weather [freeCodeCamp [Intermediate Projects]] (Challenge)

index.html

<div ng-app="weatherBadge" class="weather-container">
  
  <div class="weather-badge" ng-controller="badgeCtrl">
    <div ng-hide="data" class="text-center spinnner">
      <i class="fa fa-spinner fa-pulse"></i>
    </div>
    <div class="row" ng-show="data">
      <div class="col-xs-5">
          <div class="weather-info">
            <div class="weather-icon" ng-if="data">
              <i weather-icon class="wi pull-left"></i>
              <em>{{data.weather.weather[0].description}}</em>
              <span temp-info class="temp-info pull-right"></span>
            </div>
          </div>
      </div>
      <div class="col-xs-7 text-center">
        <h2 class="country-info"><i class="fa fa-map-marker"></i>
      {{data.ipInfo.city}}, {{data.ipInfo.country}}</h2>
      </div>
    </div>
  </div>
  
  <div class="copy"><a href="http://www.linuxenko.pro">&copy; Svetlana Linuxenko</a></div>
</div>

script.js

var app = angular.module('weatherBadge', []);

app.factory('weatherAPI', function($http) {
  var ID = '&appid=558bdce4b8d202bebd12734ff3582c27';
  return {
      ip : function() {
        return $http.get('http://ip-api.com/json');
      },
      openweathermap : function(country, city) {
        return $http.get(
            'http://api.openweathermap.org/data/2.5/weather?q='
            + city + ',' + country
            + '&units=imperial' + ID
        );
      },
      weather : function() {
       var self = this;
       return this.ip().then(function(ipinfo) {
         return self.openweathermap(
            ipinfo.data.countryCode.toLowerCase(),
            ipinfo.data.city
         ).then(function(weather) {
           return {
             ipInfo : ipinfo.data,
             weather : weather.data
           };
         });
        });
      }
  };
});

app.directive('weatherIcon', function(){
  function resolve(desc) {
    var icon = '';
      switch(desc) {
        case 'Clear':
          icon = 'wi-day-sunny';
          break;
        case 'Clouds':
          icon = 'wi-day-cloudy';
          break;
        case 'Additional':
          icon = 'wi-cloud';
          break;
        case 'Mist':
          icon = 'wi-sprinkle';
          break;  
        case 'Extreme':
          icon = 'wi-cloudy';
          break;
        case 'Drizzle':
           icon = 'wi-night-rain';
          break;     
        case 'Rain':
          icon = 'wi-rain';
          break;
        case 'Thunderstorm':
          icon = 'wi-thunderstorm';
          break;      
        case 'Snow':
          icon = 'wi-snow';
          break;
        case 'Atmosphere':
          icon = 'wi-windy';
          break;
        default :
          break;
      }
    return icon;
  };

  return {
    restrict : 'A',
    link : function(scope, element) {
      
      element.addClass(resolve
       ((scope.data.weather.weather.length > 1 ?
       scope.data.weather.weather[1].main :
       scope.data.weather.weather[0].main)
      ));
    }
  };
});

app.directive('tempInfo', function() {
  var metric = 'F';
  var temp;
  var outTemp = 0;
  
  function convert(f) {
    return Math.floor((f - 32) * 5 / 9);
  }
  
  return {
    
    restrict: 'A',
    link : function(scope, element) {
      temp = Math.floor(scope.data.weather.main.temp);
      outTemp = convert(temp);
      metric = 'C';
      
      element.on('click', function() {
        if (metric === 'F') {
          metric = 'C';
          outTemp = convert(temp);
        } else {
          metric = 'F';
          outTemp = temp;
        }
        element.html( outTemp + '<span>'+metric+'</span>');
      });
      
      element.html(outTemp + '<span>'+metric+'</span>'); 
    }
  }
});

app.controller('badgeCtrl', function($scope, weatherAPI) {
   weatherAPI.weather().then(function(info) {
     $scope.data = info;
   });
});

scripts

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

Show the Local Weather [freeCodeCamp [Intermediate Projects]] (Challenge) .markdown

Show the Local Weather [freeCodeCamp [Intermediate Projects]] (Challenge)

Rule #1: Don't look at the example project's code. Figure it out for yourself.

Rule #2: Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.

User Story: I can see the weather in my current location.

User Story: I can see a different icon or background image (e.g. snowy mountain, hot desert) depending on the weather.

User Story: I can push a button to toggle between Fahrenheit and Celsius.

We recommend using the Open Weather API. This will require creating a free API key. Normally you want to avoid exposing API keys on CodePen, but we haven't been able to find a keyless API for weather.

A Pen by Svetlana Linuxenko on CodePen.

License.

style.css

body, html, .weather-container {
  width: 100%;
  height: 100%;
}

.spinnner {
  font-size: 38px;
}

.weather-container {
  display: flex;
  flex-direction: column;
}

.weather-badge {
  margin: auto;
  background: #924da3;
  color: #eee;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 2px #444;
  min-width: 480px;
}

.weather-badge .weather-icon {
  position: relative;
  height: 70px;
  font-size: 70px;
}

.weather-badge .weather-icon em {
  display: block;
  position: absolute;
  right: 0px;
  bottom: -10px;
  font-size: 14px;
}

.weather-badge .temp-info {
  position: absolute;
  top: -15px;
  right: 0px;
  cursor: pointer;
  font-size: 38px;
}

.weather-badge .temp-info span {
  font-size: 22px;
  padding: 0px 5px;
}

.weather-badge .country-info {
  line-height: 70px;
  margin: auto 0px;
  white-space: nowrap;
}

.weather-badge .country-info .fa {
  font-size: 36px;
  margin: 0px 10px 0px 0px;
}

.weather-container .copy {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 10px 0px;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" />