Local Weather

index.html

<div class="container" ng-app="myApp" ng-controller="myCtrl"> 
         
           
              <div class="card" ng-style="style">
                <div class="card-content white-text">
                  <div class= "quote-text"> 
		
            				<br>
                     
                      <p>{{city}}<span ng-show="city">,</span>{{country}}</p>
                      <p>{{temp.temp}}<span ng-show="temp"> &ring;C</span></p>
                      <p>{{weather.main}}</p>
                      <img src = "{{weather.icon}}"></img>
                      
                 
                      
                      
                 </div><!--quote text-->
                </div><!--card content-->

                
              </div><!--card-->
          
      
          <!-- Place this tag in your head or just before your close body tag. -->


    </div><!--container-->

local-weather.markdown

Local Weather

A Pen by vignesh on CodePen.

License.

script.js

var app = angular.module("myApp", []);



app.controller("myCtrl", function($scope,$http) {
     var lat,long;
     var url = "https://fcc-weather-api.glitch.me/api/current?lat=";
        function IconGen(desc) {
                    var desc = desc.toLowerCase();
                    switch (desc) {
                      case 'drizzle':
                          return "#ffa726";
                      case 'haze':
                          return "#42a5f5";                                 
                      case 'rain':
                          return "#26a69a";                   
                      case 'snow':
                          return "#00acc1"; 
                      case 'clear':
                          return "#9ccc65"; 
                      case 'thunderstom':
                          return "#ab47bc"; 
                      default:
                          return "#5c6bc0"; 
                    }

             };
     if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
             
             url += position.coords.latitude + "&lon=" + position.coords.longitude;
             $http.get(url).then(function(response){
                  $scope.city = response.data.name;
                  $scope.country = response.data.sys.country;
                  $scope.weather = response.data.weather[0];
                  $scope.temp = response.data.main;
                  $scope.desc = $scope.weather.main 
                  var color = IconGen($scope.desc);
                  $scope.style ={"background-color":color};
                  $scope.$apply();
               
          });
     })

}});


     
    
     
  
 

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

style.scss

*{
  font-family: 'cabin',sans-serif;
  color:white;
  font-size:20px;
  text-align:center;
 
}

.card{width:200px;
      margin:20px auto;
      
      }

styles

<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet" />