-
Notifications
You must be signed in to change notification settings - Fork 0
/
Weather.html
86 lines (67 loc) · 3.2 KB
/
Weather.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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Angular Weather App - LdnDeveloper.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/angular.js"></script>
<script src="/JS/jquery-1.11.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<style type="text/css">
.container {
-webkit-box-shadow: 2px 2px 5px 2px rgba(51,51,51,0.34);
-moz-box-shadow: 2px 2px 5px 2px rgba(51,51,51,0.34);
box-shadow: 2px 2px 5px 2px rgba(51,51,51,0.34);
}
h1{margin-bottom:0;padding-bottom:0;}
h3{margin-top:0;padding-top:0;}
.forecastBlock { clear:both;min-height:100px;margin-bottom:20px; }
.caption{ padding:4px; font-weight:bold; font-size:18px;background:#ccc; }
.weatherIcon {float:left;width:30%;}
.oneThirdBlock{float:left;width:30%;}
</style>
<script>
var app = angular.module("MyApp", []);
</script>
<script src="js/angular-weather-service.js"></script>
<script src="js/usage.js"></script>
</head>
<body>
<div ng-app="MyApp">
<div ng-controller="MainCtrl1" class="container">
<h1>Angular Weather</h1>
<h3><a href="http://www.ldndeveloper.com">www.ldndeveloper.com</a></h3>
<strong>Factory Example Borrowed: <a href="https://gist.github.com/robhurring/6074128">Rob Hurring - GitHub</a></strong>
<hr />
<strong>Select Your City</strong>:
<select id="citySelect" ng-model="city">
<option>-- Select --</option>
<option>Toronto, On</option>
<option>Ottawa, On</option>
<option>London, On</option>
<option>New York</option>
<option>Chicago, Il</option>
</select>
<br /><br />
<div ng-repeat="li in forecast.list" class="forecastBlock">
<div class="caption">{{ li.dt * 1000 | date: "yyyy-MM-dd" }}</div>
<div ng-repeat="w in li.weather" class="weatherIcon">
<img src="http://openweathermap.org/img/w/{{w.icon}}.png" alt="{{ w.description }}" title="{{ w.description }} " />
<br />{{ w.main }}
</div>
<div class="oneThirdBlock">
<strong>Day: </strong> {{ li.temp.day - 273.15 | number:0 }}<br />
<strong>Min: </strong> {{ li.temp.min - 273.15 | number:0 }}<br />
<strong>Max: </strong> {{ li.temp.max - 273.15 | number:0 }}<br />
</div>
<div class="oneThirdBlock">
<strong>Morning: </strong> {{ li.temp.morn - 273.15 | number:0 }}<br />
<strong>Evening: </strong> {{ li.temp.eve - 273.15 | number:0 }}<br />
<strong>Night: </strong> {{ li.temp.night - 273.15 | number:0 }}<br />
</div>
</div>
</div>
</div>
</body>
</html>