Samples/JackTan_jQuery_SampleCode.html at master · jackziqitan/Samples · GitHub

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>Jack Tan jQuery Sample Code</title>
		<style type="text/css">
			li {
				cursor: pointer;
			}
			label {
				font-weight: bold;
			}
			#weather ul {
				list-style: none;
			}
		</style>
		<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

	</head>
	<body>

		<p>
			<h3>Sample 1</h3>
			<ol>
				<li>
					Listen for clicks on .item elements and log the result div.
				</li>
				<li>
					Dynamically add item 6 to the list and make sure the click event still works
				</li>
				<li>
					Dynamically add item 7 to the list and when you click this item, it empties the result div
				</li>
			</ol>

			<ul id="parent">
				<li class="item">one</li>
				<li class="item">two</li>
				<li class="item">three</li>
				<li class="item">four</li>
				<li class="item">five</li>
			</ul>

			<h4>result:</h4>
			<!-- put a nbsp here to take up a space so that the context won't shrink or expand when result shows up -->
			<div id="result">&nbsp;</div>

			<script>
				// Enable the strict mode (in short, it tells us some potential errors)
				"use strict";
				// Actually it's no longer necessary to use document ready callback because this <script> tag is put behind the corresponding HTML part
				$(document).ready(function() {
					// Create item 6 to the list
					$("<li/>", {
						text: "six",
						"class": "item"
					}).appendTo("#parent");

					// Create item 7 to the list
					$("<li/>", {
						text: "seven",
						"class": "item clrResult"
					}).appendTo("#parent");

					// For all list items with class name "item" and without "clrResult", apply onclick function that display content in result div
					$(".item:not(.clrResult)").click(function() {
						$("#result").html('You just clicked on "' + $(this).html() + '". ');
					});

					// For list items with class name "clrResult", apply onclick function that clear result div
					$(".clrResult").click(function() {
						$("#result").html("&nbsp;"); // Use nbsp here to avoid context shrinking when clearing the result div
					});
				});

			</script>

		</p>

		<p>
			<h3>Sample 2</h3>
			<ol>
				<li>
					Use XHR to load "API_URL" and construct a user friendly weather condition report from the json response then output in the weather div
				</li>
			</ol>

			<h4>weather condition:</h4>
			<div id="weather">
				<ul>
					<li><label>City: </label><span id="city"></span> <label>Lat: </label><span id="lat"> </span> <label>Lon: </label><span id="lon"></span></li>
					<span id="temp"></span></li>
					<li>Today: <span id="description"></span></li>
					<li><label>Sunrise: </label><span id="sunrise"></span></li>
					<li><label>Sunset: </label><span id="sunset"></span></li>
					<li><label>Humidity: </label><span id="humidity"></span></li>
					<li><label>Cloudiness: </label><span id="cloudiness"></span></li>
					<li><label>Wind: </label><span id="wind_speed"></span></li>
					<li><label>Pressure: </label><span id="pressure"></span></li>
				</ul>
			</div>

			<script>
				"use strict";
				var API_URL = 'http://api.openweathermap.org/data/2.5/weather?q=New_York,NY&units=imperial&APPID=bba5626a537a52bbab491759b1d21a75';

				// Same, no need to use document ready here
				$.getJSON(API_URL, function(data) {
					displayWeatherReport(data);
				});

				// Return a time string in 12-hour format from epoch seconds
				function getTime(utcSeconds) {
					var d = new Date(0);
					d.setUTCSeconds(utcSeconds);
					var hours = d.getHours();
					var minutes = d.getMinutes();
					var ampm = hours >= 12 ? "PM" : "AM";
					hours = hours % 12;
					hours = hours ? hours : 12; // the hour '0' should be '12'
					minutes = minutes < 10 ? "0" + minutes : minutes;
					var strTime = hours + ":" + minutes + " " + ampm;
					return strTime;
				}

				function displayWeatherReport(data) {
					$("#city").text(data.name + ", " + data.sys.country);
					$("#lat").text(data.coord.lat);
					$("#lon").text(data.coord.lon);
					$("#temp").text(data.main.temp + "°F (" + data.main.temp_min + "°F / " + data.main.temp_max + "°F )");
					$("#description").text(data.weather[0].description + " with " + data.wind.speed + " mps winds.");
					$("#sunrise").text(getTime(data.sys.sunrise));
					$("#sunset").text(getTime(data.sys.sunset));
					$("#humidity").text(data.main.humidity + "%");
					$("#cloudiness").text(data.clouds.all + "%");
					$("#wind_speed").text(data.wind.speed + " mps");
					$("#pressure").text(data.main.pressure + " hPa");
				}
			</script>

		</p>

	</body>
</html>