AngularJS Weather App

AngularJS Weather App.markdown

AngularJS Weather App

Uses Angular, Weather Icons and Open Weather Map API to create a simple weather card, initially based on user location, but can be over-ridden by the input below.

If you take a look at the markup, the icons are based on a range of weather IDs from OWM, so this could oviously get more specific.

A Pen by Nick Moreton on CodePen.

License.

index.html

<h1>AngularJS Weather App</h1>

<p>
Uses AngularJS, <a href="http://erikflowers.github.io/weather-icons/" target="_blank">Weather Icons</a> and <a href="http://openweathermap.org/" target="_blank">Open Weather Map API</a> to create a simple weather card, initially based on user location, but can be over-ridden by the input below.
</p>  

<p>
If you take a look at the markup, the icons are based on a range of <a href="http://openweathermap.org/weather-conditions" target="_blank">weather IDs</a> from Open Weather Map, so this could obviously get more specific.
</p>

<p>The background colour of the card is controlled using <code>ng-class</code> based on the temperature.</p>

<div ng-app="weatherApp">
  <div ng-controller="weatherController as weather"> 
    <form ng-submit="refresh()">
      <input type="text" ng-model="location" placeholder="Type and hit enter to update location"/>
    </form>
    <div class="key">
    <h3>Key: <span class="cool">Cool</span> | <span class="mid">Mild</span> | <span class="hot">Hot</span><h3>
    </div>
     <h2 class="error" ng-show="!weatherData.name">
    {{weatherData.message}}
    </h2>
      <h2 class="loading">Loading...</h2>
    <div ng-if="weatherData.name" class="card" ng-class="{hot: weatherData.main.temp - 273 >= 23, mid: weatherData.main.temp - 273 > 15, cool: weatherData.main.temp - 273 < 15 }">
    <h2>{{weatherData.name}}, {{weatherData.sys.country}}</h2>
     
      
    <div class="icon">
    <!-- Clear Sky -->
      
    <!-- Day -->
    <i ng-if="weatherData.weather[0].id == 800 && weatherData.dt < weatherData.sys.sunset" class="wi wi-day-sunny"></i>  
    
    <!-- Night -->
    <i ng-if="weatherData.weather[0].id == 800 && weatherData.dt > weatherData.sys.sunset" class="wi wi-night-clear"></i> 
     
      
    <!-- Cloudy -->
    <i ng-if="weatherData.weather[0].id >= 801 && weatherData.weather[0].id <= 804 && weatherData.dt < weatherData.sys.sunset && weatherData.clouds.all < 50" class="wi wi-day-cloudy"></i>  
      
    <i ng-if="weatherData.weather[0].id >= 801 && weatherData.weather[0].id <= 804 && weatherData.dt > weatherData.sys.sunset && weatherData.clouds.all < 50" class="wi wi-night-cloudy"></i> 
      
    <i ng-if="weatherData.weather[0].id >= 801 && weatherData.weather[0].id <= 804 && weatherData.clouds.all >= 50" class="wi wi-cloudy"></i> 
      
    <!-- Drizzle -->
    <i ng-if="weatherData.weather[0].id >= 300 && weatherData.weather[0].id <= 321 && weatherData.dt < weatherData.sys.sunset && weatherData.clouds.all < 50" class="wi wi-day-rain-mix"></i>  
      
    <i ng-if="weatherData.weather[0].id >= 300 && weatherData.weather[0].id <= 321 && weatherData.dt > weatherData.sys.sunset && weatherData.clouds.all < 50" class="wi wi-night-alt-rain-mix"></i> 
      
    <i ng-if="weatherData.weather[0].id >= 300 && weatherData.weather[0].id <= 321 && weatherData.clouds.all >= 50" class="wi wi-rain-mix"></i>
      
    <!-- Rain -->
    <i ng-if="weatherData.weather[0].id >= 500 && weatherData.weather[0].id <= 531 && weatherData.dt < weatherData.sys.sunset && weatherData.clouds.all < 50" class="wi wi-day-rain"></i>  
      
    <i ng-if="weatherData.weather[0].id >= 500 && weatherData.weather[0].id <= 531 && weatherData.dt > weatherData.sys.sunset && weatherData.clouds.all < 50" class="wi wi-night-rain"></i> 
      
    <i ng-if="weatherData.weather[0].id >= 500 && weatherData.weather[0].id <= 531 && weatherData.clouds.all >= 50" class="wi wi-rain"></i>
      
    <!-- Snow -->
    <i ng-if="weatherData.weather[0].id >= 600 && weatherData.weather[0].id <= 622 && weatherData.dt < weatherData.sys.sunset && weatherData.clouds.all < 50" class="wi wi-day-snow"></i>  
      
    <i ng-if="weatherData.weather[0].id >= 600 && weatherData.weather[0].id <= 622 && weatherData.dt > weatherData.sys.sunset && weatherData.clouds.all < 50" class="wi wi-night-snow"></i> 
      
    <i ng-if="weatherData.weather[0].id >= 600 && weatherData.weather[0].id <= 622 && weatherData.clouds.all >= 50" class="wi wi-snow"></i>
      
    <!-- Thunder Storms -->
    <i ng-if="weatherData.weather[0].id >= 200 && weatherData.weather[0].id <= 232 && weatherData.dt < weatherData.sys.sunset && weatherData.clouds.all < 50" class="wi wi-day-thunderstorm"></i>  
      
    <i ng-if="weatherData.weather[0].id >= 200 && weatherData.weather[0].id <= 232 && weatherData.dt > weatherData.sys.sunset && weatherData.clouds.all < 50" class="wi wi-night-thunderstorm"></i> 
      
    <i ng-if="weatherData.weather[0].id >= 200 && weatherData.weather[0].id <= 232 && weatherData.clouds.all >= 50" class="wi wi-thunderstorm"></i>
      
    <!-- Mist and Fog -->
      
     <i ng-if="weatherData.weather[0].id >= 701 && weatherData.weather[0].id <= 781" class="wi wi-fog"></i>
      
    </div>
      
    <p class="info">
      <h3>{{weatherData.main.temp - 273 | number:0}}&deg;C</h3>{{weatherData.weather[0].main}}: {{weatherData.weather[0].description}}</p>
    </div>
    
  </div>
</div>

script.js

(function(){
 var app = angular.module('weatherApp',[]);
  
	app.controller('weatherController', function($scope, $http){

    $scope.location = '';
    
    $scope.initial = function(){
      navigator.geolocation.getCurrentPosition(function(position){
        var lat = position.coords.latitude;
        var lon = position.coords.longitude;

        $http.jsonp("http://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+lon+"&APPID=a8f5261ee6863849df5a45497bb2716&callback=JSON_CALLBACK").
        success(function(data){
          $scope.weatherData = data;
          console.log(data);
          $('.loading').hide();
        }).
        error(function(){
          $('.loading').hide();
          $('.error').show().html("Sorry there has been an error connecting to the API");
        });

      }); 
    };

    $scope.initial();  

    $scope.refresh = function(){
      $('.loading').show();
      if($scope.location != ''){ 
        $http.jsonp("http://api.openweathermap.org/data/2.5/weather?q="+$scope.location+"&APPID=a8f5261ee6863849df5a45497bb27163&callback=JSON_CALLBACK").
        	success(function(data){
            $scope.weatherData = data;
            console.log(data);
            $('.loading').hide();
        	}).
          error(function(){
            $('.loading').hide();
            $('.error').show().html("Sorry there has been an error connecting to the API");
          });
      } else {
        $scope.initial();
      }
    };
    
	});//End Controller
  
})();//End App

scripts

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

style.css

body {
  text-align:center;
  padding:0px 30px 120px;
  line-height:1.3;
}

p { 
  width: 70%;
  margin: 20px auto;
}

input {
  padding:30px;
  margin:10px;
  width:80%;
  font-size:3em;
  text-align:center;
}

.wi {
  font-size:12em;
  line-height:1.15;
}

.icon {
  padding:20px;
  color:white;
}

.card {
  width:450px;
  height:450px;
  display:flex;
  flex-direction: column;
  padding:20px;
  margin: 30px auto;
  border-radius:3px;
}

.key span {
  padding:10px;
  border-radius:3px;
}

.info {
  width:100%;
}

.cool {
  background: #BAE8E7;
}

.mid {
  background: #FCCA55;
}

.hot {
  background: #FF3D5A;
}

.error {
  color:red;
}

styles

<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110131/weather-icons.css" rel="stylesheet" />