LAB 2 Team 4 ASE Spring 2019 - herbertkip/Advaced-Software GitHub Wiki

ASE LAB 3

TEAM 4 Class ID 3 : Chepsoy, Herbert Kiplagat Class ID 20: Oguntimehin, Josh Joshua

The main page has fields to accommodate for the City and State. These entries trigger the pulling of details from the API, Button Click event triggers the pull request from the api.

Code

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js" type="application/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.1/angular.min.js"></script>

</head>
<title>ASE Weather API</title>
ASE Weather API: LAB Task 
</div>
<style> .weatherInfo { background: #34ce57; height: auto; width: auto; border: 1px dashed #ccc; padding: 1em; align: center; } .error { color: #FF0000; } .background { background-color: ghostwhite; } </style> <script> // When Show Weather is clicked angular.module('weatherdetails', []) .controller('weathercontroller', function($scope, $http) { $scope.getWeatherDetails = function() { var state = $scope.stateCode; var city = $scope.cityName; // Hiding the Errors,Weather first $("#cityError").hide(); $("#stateCodeError").hide(); $("#weatherError").hide(); $('.weatherInfo').hide(); var errorPresent = false; // Validating City, State values. if (city == null || $.trim(city) == '') { errorPresent = true; // Show Error if City is Null/Empty $("#cityError").show(); } if (state == null || $.trim(state) == '') { errorPresent = true; // Show Error if State is Null/Empty $("#stateCodeError").show(); } // Return false if error present as it will stop next step. if (errorPresent) { return false; } $http.get('https://api.wunderground.com/api/4bbbc25f4f5946dd/conditions/q/' + state + '/' + city + '.json').success(function(data) { // Throwing a message if no weather records are found if (data.current_observation == null) { $("#weatherError").show(); return false; } console.log(state + " ->" + city); console.log(data); temperature = data.current_observation.temp_f; feelslike_temp = data.current_observation.feelslike_f; celsius = data.current_observation.temp_c; feelslike_celsius = data.current_observation.feelslike_c; icon = data.current_observation.icon_url; weather = data.current_observation.weather; wind = data.current_observation.wind_string; pressure_mb = data.current_observation.pressure_mb; humidity = data.current_observation.relative_humidity; $scope.presentweather = { html: "Current temperature is " + temperature + " ° F ( " + celsius + " ° C ) and " + weather + " but feels like " + feelslike_temp + " ° F ( " + feelslike_celsius + " ° C ) with wind : " + wind + " and pressure at sea level is : " + pressure_mb + " millibars " + " having a relative humidity of " + humidity + "" } $scope.weatherImage = { html: "" } // Showing Weather Details $('.weatherInfo').show(); }) } }); </script>

Weather API


Please select state: Alabama Alaska Arizona Arkansas California Colorado Connecticut Delaware District Of Columbia Florida Georgia Hawaii Idaho Illinois Indiana Iowa Kansas Kentucky Louisiana Maine Maryland Massachusetts Michigan Minnesota Mississippi Missouri Montana Nebraska Nevada New Hampshire New Jersey New Mexico New York North Carolina North Dakota Ohio Oklahoma Oregon Pennsylvania Rhode Island South Carolina South Dakota Tennessee Texas Utah Vermont Virginia Washington West Virginia Wisconsin Wyoming


Please specify the City :


Click to View Weather Status


Missing state details, please re-enter

Missing City Details, please re-enter

No weather details found for the input parameters



<script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
⚠️ **GitHub.com Fallback** ⚠️