JSFiddle - React, Tailwind, and code Playground

by grendian

HTML

<div data-ng-app="app" data-ng-controller="mainCtrl">
    <input type="text" data-ng-model="zipSearch"/><button data-ng-click="search()">Search</button>
<div data-ng-show="errorMsg">Failed to retreive weather data, {{errorMsg}}.</div>
<div data-ng-show="weather">
    <h2>Weather for {{weather.city}}</h2>
    <p>Current Temperature is {{weather.temp}} degrees.</p>
</div>
</div>

JavaScript

(function(ng, mod) {
    
    mod.controller('mainCtrl', mainCtrl);

    mainCtrl.$inject = ['$scope', '$http'];
    function mainCtrl($scope, $http){
        ng.extend($scope, {
            search: search
        });
        
        function search(){
            $scope.errorMsg = null;
            $scope.weather = null;
            
            if(ng.isUndefined($scope.zipSearch)){ 
                $scope.errorMsg = 'please enter a zip code'; 
                return; 
            }
            
            $http.jsonp('http://api.wunderground.com/api/837ec39160ffa594/geolookup/conditions/q/'+$scope.zipSearch+'.json?callback=JSON_CALLBACK').success(function(data){
                if(data.response.error){
                    $scope.errorMsg = data.response.error.description;
                }else {
                    $scope.weather = {
                        city: data.location.city,
                        temp: data.current_observation.temp_f
                    };
                }
            });
        }
    }
    
}(angular, angular.module('app', [])));