-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
72 lines (65 loc) · 2.83 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Tour America Weather API">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>Tour America Weather API</title>
<link href="css/weather-icons.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="wetherapp" ng-controller="weatherControler">
<div class="wetherappin">
<select ng-model="selectedItem" ng-options="weather.accro as weather.name for weather in weathers" name="weather_app_sel" id="weather_app_sel" ng-change="weathers.weathclick(selectedItem)">
</select>
<h1 class="title1"> {{ topweathers.name }} </h1>
<h2 class="title2"> {{ topweathers.weatherDesc }} </h2>
<div class="left left1">
<span class="wi {{ topweathers.img }}"></span>
</div>
<div class="left left2">
<div class="left2div"> <p class="temp1">{{ topweathers.temp_C }}°</p> <p class="temp3"> <strong>Humidity</strong> {{ topweathers.humidity }}%</p> </div>
<div class="left2div"> <p class="temp2">{{ topweathers.temp_F }}<sup>f</sup> </p> <p class="temp4"> <strong>Wind</strong> {{ topweathers.windspeedKmph }} Kph</p> </div>
</div>
</div>
<br class="clear">
<div class="othercity">
<div class="eachCity" ng-repeat="weather in weathers | filter:{accro: '!'+topweathers.accro} | limitTo: 5" ng-click="weathers.weathclick(weather.accro)">
<p class="anna"> {{ weather.accro }} </p>
<p class="picother"> <span class="wi {{ weather.img }}"></span> </p>
<p class="temps"> {{ weather.temp_C }}C</p>
<p class="temps"> {{ weather.temp_F }}F</p>
</div>
</div>
<br class="clear">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("weatherControler", function($scope,$http) {
$http.get("inc/api.json").success( function(response) {
$scope.weathers = response;
$scope.selectedItem = response[0].accro;
$scope.topweathers = response[0];
$scope.weathers.weathclick = function(root) {
for (key in $scope.weathers) {
if ($scope.weathers[key].accro == root){
var chosKey = key;
}
}
$scope.topweathers = $scope.weathers[chosKey];
$scope.selectedItem = root;
}
});
});
</script>
</body>
</html>