diff --git a/chapter5/accuracy/myLoc.css b/chapter5/accuracy/myLoc.css
new file mode 100644
index 0000000..5776fe5
--- /dev/null
+++ b/chapter5/accuracy/myLoc.css
@@ -0,0 +1,20 @@
+/*
+ * myLoc.css
+ *
+*/
+
+body {
+ font-family: Arial, Helvetica, sans-serif;
+ margin: 10px;
+}
+form, div#location, div#distance {
+ padding: 5px;
+}
+
+div#map {
+ margin: 5px;
+ width: 400px;
+ height: 400px;
+ border: 1px solid black;
+}
+
diff --git a/chapter5/accuracy/myLoc.html b/chapter5/accuracy/myLoc.html
new file mode 100644
index 0000000..a35897a
--- /dev/null
+++ b/chapter5/accuracy/myLoc.html
@@ -0,0 +1,27 @@
+
+
+
+Where am I?
+
+Your location will go here.
+
+
+
+Distance from WickedlySmart HQ will go here.
+
+
+
+
+
+
+
+
+
diff --git a/chapter5/accuracy/myLoc.js b/chapter5/accuracy/myLoc.js
new file mode 100644
index 0000000..8f8487b
--- /dev/null
+++ b/chapter5/accuracy/myLoc.js
@@ -0,0 +1,119 @@
+/* myLoc.js */
+
+var map = null;
+var ourCoords = {
+ latitude: 47.624851,
+ longitude: -122.52099
+};
+
+window.onload = getMyLocation;
+
+function getMyLocation() {
+ if (navigator.geolocation) {
+
+ navigator.geolocation.getCurrentPosition(
+ displayLocation,
+ displayError);
+ }
+ else {
+ alert("Oops, no geolocation support");
+ }
+}
+
+function displayLocation(position) {
+ var latitude = position.coords.latitude;
+ var longitude = position.coords.longitude;
+
+ var div = document.getElementById("location");
+ div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
+ div.innerHTML += " (with " + position.coords.accuracy + " meters accuracy)";
+
+ var km = computeDistance(position.coords, ourCoords);
+ var distance = document.getElementById("distance");
+ distance.innerHTML = "You are " + km + " km from the WickedlySmart HQ";
+
+ showMap(position.coords);
+}
+
+
+// --------------------- Ready Bake ------------------
+//
+// Uses the Spherical Law of Cosines to find the distance
+// between two lat/long points
+//
+function computeDistance(startCoords, destCoords) {
+ var startLatRads = degreesToRadians(startCoords.latitude);
+ var startLongRads = degreesToRadians(startCoords.longitude);
+ var destLatRads = degreesToRadians(destCoords.latitude);
+ var destLongRads = degreesToRadians(destCoords.longitude);
+
+ var Radius = 6371; // radius of the Earth in km
+ var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) +
+ Math.cos(startLatRads) * Math.cos(destLatRads) *
+ Math.cos(startLongRads - destLongRads)) * Radius;
+
+ return distance;
+}
+
+function degreesToRadians(degrees) {
+ radians = (degrees * Math.PI)/180;
+ return radians;
+}
+
+// ------------------ End Ready Bake -----------------
+
+function showMap(coords) {
+ var googleLatAndLong = new google.maps.LatLng(coords.latitude,
+ coords.longitude);
+ var mapOptions = {
+ zoom: 10,
+ center: googleLatAndLong,
+ mapTypeId: google.maps.MapTypeId.ROADMAP
+ };
+ var mapDiv = document.getElementById("map");
+ map = new google.maps.Map(mapDiv, mapOptions);
+
+ // add the user marker
+ var title = "Your Location";
+ var content = "You are here: " + coords.latitude + ", " + coords.longitude;
+ addMarker(map, googleLatAndLong, title, content);
+
+}
+
+function addMarker(map, latlong, title, content) {
+ var markerOptions = {
+ position: latlong,
+ map: map,
+ title: title,
+ clickable: true
+ };
+ var marker = new google.maps.Marker(markerOptions);
+
+ var infoWindowOptions = {
+ content: content,
+ position: latlong
+ };
+
+ var infoWindow = new google.maps.InfoWindow(infoWindowOptions);
+
+ google.maps.event.addListener(marker, 'click', function() {
+ infoWindow.open(map);
+ });
+}
+
+
+function displayError(error) {
+ var errorTypes = {
+ 0: "Unknown error",
+ 1: "Permission denied",
+ 2: "Position is not available",
+ 3: "Request timeout"
+ };
+ var errorMessage = errorTypes[error.code];
+ if (error.code == 0 || error.code == 2) {
+ errorMessage = errorMessage + " " + error.message;
+ }
+ var div = document.getElementById("location");
+ div.innerHTML = errorMessage;
+}
+
diff --git a/chapter5/distance/myLoc.css b/chapter5/distance/myLoc.css
new file mode 100644
index 0000000..a057685
--- /dev/null
+++ b/chapter5/distance/myLoc.css
@@ -0,0 +1,12 @@
+/*
+ * myLoc.css
+ *
+*/
+
+body {
+ font-family: Arial, Helvetica, sans-serif;
+ margin: 10px;
+}
+div#location, div#distance {
+ padding: 5px;
+}
diff --git a/chapter5/distance/myLoc.html b/chapter5/distance/myLoc.html
new file mode 100644
index 0000000..8bc984e
--- /dev/null
+++ b/chapter5/distance/myLoc.html
@@ -0,0 +1,23 @@
+
+
+
+Where am I?
+
+Your location will go here.
+
+
+
+Distance from WickedlySmart HQ will go here.
+
+
+
+
+
+
diff --git a/chapter5/distance/myLoc.js b/chapter5/distance/myLoc.js
new file mode 100644
index 0000000..349af59
--- /dev/null
+++ b/chapter5/distance/myLoc.js
@@ -0,0 +1,77 @@
+/* myLoc.js */
+
+var ourCoords = {
+ latitude: 47.624851,
+ longitude: -122.52099
+};
+
+window.onload = getMyLocation;
+
+function getMyLocation() {
+ if (navigator.geolocation) {
+
+ navigator.geolocation.getCurrentPosition(
+ displayLocation,
+ displayError);
+ }
+ else {
+ alert("Oops, no geolocation support");
+ }
+}
+
+function displayLocation(position) {
+ var latitude = position.coords.latitude;
+ var longitude = position.coords.longitude;
+
+ var div = document.getElementById("location");
+ div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
+
+ var km = computeDistance(position.coords, ourCoords);
+ var distance = document.getElementById("distance");
+ distance.innerHTML = "You are " + km + " km from the WickedlySmart HQ";
+
+}
+
+
+// --------------------- Ready Bake ------------------
+//
+// Uses the Spherical Law of Cosines to find the distance
+// between two lat/long points
+//
+function computeDistance(startCoords, destCoords) {
+ var startLatRads = degreesToRadians(startCoords.latitude);
+ var startLongRads = degreesToRadians(startCoords.longitude);
+ var destLatRads = degreesToRadians(destCoords.latitude);
+ var destLongRads = degreesToRadians(destCoords.longitude);
+
+ var Radius = 6371; // radius of the Earth in km
+ var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) +
+ Math.cos(startLatRads) * Math.cos(destLatRads) *
+ Math.cos(startLongRads - destLongRads)) * Radius;
+
+ return distance;
+}
+
+function degreesToRadians(degrees) {
+ radians = (degrees * Math.PI)/180;
+ return radians;
+}
+
+// ------------------ End Ready Bake -----------------
+
+
+function displayError(error) {
+ var errorTypes = {
+ 0: "Unknown error",
+ 1: "Permission denied",
+ 2: "Position is not available",
+ 3: "Request timeout"
+ };
+ var errorMessage = errorTypes[error.code];
+ if (error.code == 0 || error.code == 2) {
+ errorMessage = errorMessage + " " + error.message;
+ }
+ var div = document.getElementById("location");
+ div.innerHTML = errorMessage;
+}
+
diff --git a/chapter5/final/myLoc.css b/chapter5/final/myLoc.css
new file mode 100644
index 0000000..5776fe5
--- /dev/null
+++ b/chapter5/final/myLoc.css
@@ -0,0 +1,20 @@
+/*
+ * myLoc.css
+ *
+*/
+
+body {
+ font-family: Arial, Helvetica, sans-serif;
+ margin: 10px;
+}
+form, div#location, div#distance {
+ padding: 5px;
+}
+
+div#map {
+ margin: 5px;
+ width: 400px;
+ height: 400px;
+ border: 1px solid black;
+}
+
diff --git a/chapter5/final/myLoc.html b/chapter5/final/myLoc.html
new file mode 100644
index 0000000..f240016
--- /dev/null
+++ b/chapter5/final/myLoc.html
@@ -0,0 +1,32 @@
+
+
+
+Wherever you go, there you are
+
+Your location will go here.
+
+
+
+Distance from WickedlySmart HQ will go here.
+
+
+
+
+
+
+
+
+
diff --git a/chapter5/final/myLoc.js b/chapter5/final/myLoc.js
new file mode 100644
index 0000000..7958725
--- /dev/null
+++ b/chapter5/final/myLoc.js
@@ -0,0 +1,159 @@
+/* myLoc.js */
+
+var watchId = null;
+var map = null;
+var ourCoords = {
+ latitude: 47.624851,
+ longitude: -122.52099
+};
+var prevCoords = null;
+
+window.onload = getMyLocation;
+
+function getMyLocation() {
+ if (navigator.geolocation) {
+ var watchButton = document.getElementById("watch");
+ watchButton.onclick = watchLocation;
+ var clearWatchButton = document.getElementById("clearWatch");
+ clearWatchButton.onclick = clearWatch;
+ }
+ else {
+ alert("Oops, no geolocation support");
+ }
+}
+
+function displayLocation(position) {
+ var latitude = position.coords.latitude;
+ var longitude = position.coords.longitude;
+
+ var div = document.getElementById("location");
+ div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
+ div.innerHTML += " (with " + position.coords.accuracy + " meters accuracy)";
+
+ var km = computeDistance(position.coords, ourCoords);
+ var distance = document.getElementById("distance");
+ distance.innerHTML = "You are " + km + " km from the WickedlySmart HQ";
+
+ if (map == null) {
+ showMap(position.coords);
+ prevCoords = position.coords;
+ }
+ else {
+ var meters = computeDistance(position.coords, prevCoords) * 1000;
+ if (meters > 20) {
+ scrollMapToPosition(position.coords);
+ prevCoords = position.coords;
+ }
+ }
+}
+
+
+// --------------------- Ready Bake ------------------
+//
+// Uses the Spherical Law of Cosines to find the distance
+// between two lat/long points
+//
+function computeDistance(startCoords, destCoords) {
+ var startLatRads = degreesToRadians(startCoords.latitude);
+ var startLongRads = degreesToRadians(startCoords.longitude);
+ var destLatRads = degreesToRadians(destCoords.latitude);
+ var destLongRads = degreesToRadians(destCoords.longitude);
+
+ var Radius = 6371; // radius of the Earth in km
+ var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) +
+ Math.cos(startLatRads) * Math.cos(destLatRads) *
+ Math.cos(startLongRads - destLongRads)) * Radius;
+
+ return distance;
+}
+
+function degreesToRadians(degrees) {
+ radians = (degrees * Math.PI)/180;
+ return radians;
+}
+
+// ------------------ End Ready Bake -----------------
+
+function showMap(coords) {
+ var googleLatAndLong = new google.maps.LatLng(coords.latitude,
+ coords.longitude);
+ var mapOptions = {
+ zoom: 10,
+ center: googleLatAndLong,
+ mapTypeId: google.maps.MapTypeId.ROADMAP
+ };
+ var mapDiv = document.getElementById("map");
+ map = new google.maps.Map(mapDiv, mapOptions);
+
+ // add the user marker
+ var title = "Your Location";
+ var content = "You are here: " + coords.latitude + ", " + coords.longitude;
+ addMarker(map, googleLatAndLong, title, content);
+}
+
+function addMarker(map, latlong, title, content) {
+ var markerOptions = {
+ position: latlong,
+ map: map,
+ title: title,
+ clickable: true
+ };
+ var marker = new google.maps.Marker(markerOptions);
+
+ var infoWindowOptions = {
+ content: content,
+ position: latlong
+ };
+
+ var infoWindow = new google.maps.InfoWindow(infoWindowOptions);
+
+ google.maps.event.addListener(marker, 'click', function() {
+ infoWindow.open(map);
+ });
+}
+
+
+function displayError(error) {
+ var errorTypes = {
+ 0: "Unknown error",
+ 1: "Permission denied",
+ 2: "Position is not available",
+ 3: "Request timeout"
+ };
+ var errorMessage = errorTypes[error.code];
+ if (error.code == 0 || error.code == 2) {
+ errorMessage = errorMessage + " " + error.message;
+ }
+ var div = document.getElementById("location");
+ div.innerHTML = errorMessage;
+}
+
+//
+// Code to watch the user's location
+//
+function watchLocation() {
+ watchId = navigator.geolocation.watchPosition(
+ displayLocation,
+ displayError);
+}
+
+function scrollMapToPosition(coords) {
+ var latitude = coords.latitude;
+ var longitude = coords.longitude;
+
+ var latlong = new google.maps.LatLng(latitude, longitude);
+ map.panTo(latlong);
+
+ // add the new marker
+ addMarker(map, latlong, "Your new location", "You moved to: " +
+ latitude + ", " + longitude);
+}
+
+function clearWatch() {
+ if (watchId) {
+ navigator.geolocation.clearWatch(watchId);
+ watchId = null;
+ }
+}
+
+
diff --git a/chapter5/latlong/myLoc.css b/chapter5/latlong/myLoc.css
new file mode 100644
index 0000000..5776fe5
--- /dev/null
+++ b/chapter5/latlong/myLoc.css
@@ -0,0 +1,20 @@
+/*
+ * myLoc.css
+ *
+*/
+
+body {
+ font-family: Arial, Helvetica, sans-serif;
+ margin: 10px;
+}
+form, div#location, div#distance {
+ padding: 5px;
+}
+
+div#map {
+ margin: 5px;
+ width: 400px;
+ height: 400px;
+ border: 1px solid black;
+}
+
diff --git a/chapter5/latlong/myLoc.html b/chapter5/latlong/myLoc.html
new file mode 100644
index 0000000..6fd843d
--- /dev/null
+++ b/chapter5/latlong/myLoc.html
@@ -0,0 +1,19 @@
+
+
+
+Where am I?
+
+Your location will go here.
+
+
+
+
+
+
diff --git a/chapter5/latlong/myLoc.js b/chapter5/latlong/myLoc.js
new file mode 100644
index 0000000..2d1dffb
--- /dev/null
+++ b/chapter5/latlong/myLoc.js
@@ -0,0 +1,41 @@
+/* myLoc.js */
+
+
+window.onload = getMyLocation;
+
+function getMyLocation() {
+ if (navigator.geolocation) {
+
+ navigator.geolocation.getCurrentPosition(
+ displayLocation,
+ displayError);
+ }
+ else {
+ alert("Oops, no geolocation support");
+ }
+}
+
+function displayLocation(position) {
+ var latitude = position.coords.latitude;
+ var longitude = position.coords.longitude;
+
+ var div = document.getElementById("location");
+ div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
+
+}
+
+function displayError(error) {
+ var errorTypes = {
+ 0: "Unknown error",
+ 1: "Permission denied",
+ 2: "Position is not available",
+ 3: "Request timeout"
+ };
+ var errorMessage = errorTypes[error.code];
+ if (error.code == 0 || error.code == 2) {
+ errorMessage = errorMessage + " " + error.message;
+ }
+ var div = document.getElementById("location");
+ div.innerHTML = errorMessage;
+}
+
diff --git a/chapter5/map/myLoc.css b/chapter5/map/myLoc.css
new file mode 100644
index 0000000..5a93036
--- /dev/null
+++ b/chapter5/map/myLoc.css
@@ -0,0 +1,20 @@
+/*
+ * myLoc.css
+ *
+*/
+
+body {
+ font-family: Arial, Helvetica, sans-serif;
+ margin: 10px;
+}
+div#location, div#distance {
+ padding: 5px;
+}
+
+div#map {
+ margin: 5px;
+ width: 400px;
+ height: 400px;
+ border: 1px solid black;
+}
+
diff --git a/chapter5/map/myLoc.html b/chapter5/map/myLoc.html
new file mode 100644
index 0000000..a35897a
--- /dev/null
+++ b/chapter5/map/myLoc.html
@@ -0,0 +1,27 @@
+
+
+
+Where am I?
+
+Your location will go here.
+
+
+
+Distance from WickedlySmart HQ will go here.
+
+
+
+
+
+
+
+
+
diff --git a/chapter5/map/myLoc.js b/chapter5/map/myLoc.js
new file mode 100644
index 0000000..b9b6cec
--- /dev/null
+++ b/chapter5/map/myLoc.js
@@ -0,0 +1,90 @@
+/* myLoc.js */
+
+var map = null;
+var ourCoords = {
+ latitude: 47.624851,
+ longitude: -122.52099
+};
+
+window.onload = getMyLocation;
+
+function getMyLocation() {
+ if (navigator.geolocation) {
+
+ navigator.geolocation.getCurrentPosition(
+ displayLocation,
+ displayError);
+ }
+ else {
+ alert("Oops, no geolocation support");
+ }
+}
+
+function displayLocation(position) {
+ var latitude = position.coords.latitude;
+ var longitude = position.coords.longitude;
+
+ var div = document.getElementById("location");
+ div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
+
+ var km = computeDistance(position.coords, ourCoords);
+ var distance = document.getElementById("distance");
+ distance.innerHTML = "You are " + km + " km from the WickedlySmart HQ";
+
+ showMap(position.coords);
+}
+
+
+// --------------------- Ready Bake ------------------
+//
+// Uses the Spherical Law of Cosines to find the distance
+// between two lat/long points
+//
+function computeDistance(startCoords, destCoords) {
+ var startLatRads = degreesToRadians(startCoords.latitude);
+ var startLongRads = degreesToRadians(startCoords.longitude);
+ var destLatRads = degreesToRadians(destCoords.latitude);
+ var destLongRads = degreesToRadians(destCoords.longitude);
+
+ var Radius = 6371; // radius of the Earth in km
+ var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) +
+ Math.cos(startLatRads) * Math.cos(destLatRads) *
+ Math.cos(startLongRads - destLongRads)) * Radius;
+
+ return distance;
+}
+
+function degreesToRadians(degrees) {
+ radians = (degrees * Math.PI)/180;
+ return radians;
+}
+
+// ------------------ End Ready Bake -----------------
+
+function showMap(coords) {
+ var googleLatAndLong = new google.maps.LatLng(coords.latitude,
+ coords.longitude);
+ var mapOptions = {
+ zoom: 10,
+ center: googleLatAndLong,
+ mapTypeId: google.maps.MapTypeId.ROADMAP
+ };
+ var mapDiv = document.getElementById("map");
+ map = new google.maps.Map(mapDiv, mapOptions);
+}
+
+function displayError(error) {
+ var errorTypes = {
+ 0: "Unknown error",
+ 1: "Permission denied",
+ 2: "Position is not available",
+ 3: "Request timeout"
+ };
+ var errorMessage = errorTypes[error.code];
+ if (error.code == 0 || error.code == 2) {
+ errorMessage = errorMessage + " " + error.message;
+ }
+ var div = document.getElementById("location");
+ div.innerHTML = errorMessage;
+}
+
diff --git a/chapter5/marker/myLoc.css b/chapter5/marker/myLoc.css
new file mode 100644
index 0000000..5776fe5
--- /dev/null
+++ b/chapter5/marker/myLoc.css
@@ -0,0 +1,20 @@
+/*
+ * myLoc.css
+ *
+*/
+
+body {
+ font-family: Arial, Helvetica, sans-serif;
+ margin: 10px;
+}
+form, div#location, div#distance {
+ padding: 5px;
+}
+
+div#map {
+ margin: 5px;
+ width: 400px;
+ height: 400px;
+ border: 1px solid black;
+}
+
diff --git a/chapter5/marker/myLoc.html b/chapter5/marker/myLoc.html
new file mode 100644
index 0000000..a35897a
--- /dev/null
+++ b/chapter5/marker/myLoc.html
@@ -0,0 +1,27 @@
+
+
+
+Where am I?
+
+Your location will go here.
+
+
+
+Distance from WickedlySmart HQ will go here.
+
+
+
+
+
+
+
+
+
diff --git a/chapter5/marker/myLoc.js b/chapter5/marker/myLoc.js
new file mode 100644
index 0000000..23f03a1
--- /dev/null
+++ b/chapter5/marker/myLoc.js
@@ -0,0 +1,118 @@
+/* myLoc.js */
+
+var map = null;
+var ourCoords = {
+ latitude: 47.624851,
+ longitude: -122.52099
+};
+
+window.onload = getMyLocation;
+
+function getMyLocation() {
+ if (navigator.geolocation) {
+
+ navigator.geolocation.getCurrentPosition(
+ displayLocation,
+ displayError);
+ }
+ else {
+ alert("Oops, no geolocation support");
+ }
+}
+
+function displayLocation(position) {
+ var latitude = position.coords.latitude;
+ var longitude = position.coords.longitude;
+
+ var div = document.getElementById("location");
+ div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
+
+ var km = computeDistance(position.coords, ourCoords);
+ var distance = document.getElementById("distance");
+ distance.innerHTML = "You are " + km + " km from the WickedlySmart HQ";
+
+ showMap(position.coords);
+}
+
+
+// --------------------- Ready Bake ------------------
+//
+// Uses the Spherical Law of Cosines to find the distance
+// between two lat/long points
+//
+function computeDistance(startCoords, destCoords) {
+ var startLatRads = degreesToRadians(startCoords.latitude);
+ var startLongRads = degreesToRadians(startCoords.longitude);
+ var destLatRads = degreesToRadians(destCoords.latitude);
+ var destLongRads = degreesToRadians(destCoords.longitude);
+
+ var Radius = 6371; // radius of the Earth in km
+ var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) +
+ Math.cos(startLatRads) * Math.cos(destLatRads) *
+ Math.cos(startLongRads - destLongRads)) * Radius;
+
+ return distance;
+}
+
+function degreesToRadians(degrees) {
+ radians = (degrees * Math.PI)/180;
+ return radians;
+}
+
+// ------------------ End Ready Bake -----------------
+
+function showMap(coords) {
+ var googleLatAndLong = new google.maps.LatLng(coords.latitude,
+ coords.longitude);
+ var mapOptions = {
+ zoom: 10,
+ center: googleLatAndLong,
+ mapTypeId: google.maps.MapTypeId.ROADMAP
+ };
+ var mapDiv = document.getElementById("map");
+ map = new google.maps.Map(mapDiv, mapOptions);
+
+ // add the user marker
+ var title = "Your Location";
+ var content = "You are here: " + coords.latitude + ", " + coords.longitude;
+ addMarker(map, googleLatAndLong, title, content);
+
+}
+
+function addMarker(map, latlong, title, content) {
+ var markerOptions = {
+ position: latlong,
+ map: map,
+ title: title,
+ clickable: true
+ };
+ var marker = new google.maps.Marker(markerOptions);
+
+ var infoWindowOptions = {
+ content: content,
+ position: latlong
+ };
+
+ var infoWindow = new google.maps.InfoWindow(infoWindowOptions);
+
+ google.maps.event.addListener(marker, 'click', function() {
+ infoWindow.open(map);
+ });
+}
+
+
+function displayError(error) {
+ var errorTypes = {
+ 0: "Unknown error",
+ 1: "Permission denied",
+ 2: "Position is not available",
+ 3: "Request timeout"
+ };
+ var errorMessage = errorTypes[error.code];
+ if (error.code == 0 || error.code == 2) {
+ errorMessage = errorMessage + " " + error.message;
+ }
+ var div = document.getElementById("location");
+ div.innerHTML = errorMessage;
+}
+
diff --git a/chapter5/myLoc.css b/chapter5/myLoc.css
new file mode 100644
index 0000000..9df9f76
--- /dev/null
+++ b/chapter5/myLoc.css
@@ -0,0 +1,42 @@
+/*
+ * myLoc.css
+ *
+*/
+
+body {
+ font-family: Arial, Helvetica, sans-serif;
+ margin: 10px;
+}
+form, div#location, div#distance {
+ padding: 5px;
+}
+
+div#map {
+ margin: 5px;
+ width: 400px;
+ height: 400px;
+ border: 1px solid black;
+}
+
+
+/*
+ * Use this CSS to make the map full screen
+ *
+
+html, body, div#map {
+ width: 100%;
+ height: 100%;
+ margin: 0px;
+}
+
+form {
+ position: absolute;
+ top: 40px;
+ right: 10px;
+ z-index: 2;
+}
+
+div#location, div#distance {
+ display: none;
+}
+ */
diff --git a/chapter5/myLoc.html b/chapter5/myLoc.html
new file mode 100644
index 0000000..9edfb1a
--- /dev/null
+++ b/chapter5/myLoc.html
@@ -0,0 +1,35 @@
+
+
+
+Wherever you go, there you are
+
+Your location will go here.
+
+
+
+Distance from WickedlySmart HQ will go here.
+
+
+
+
+
+
+
+
+
diff --git a/chapter5/myLoc.js b/chapter5/myLoc.js
new file mode 100644
index 0000000..c800810
--- /dev/null
+++ b/chapter5/myLoc.js
@@ -0,0 +1,178 @@
+/* myLoc.js */
+
+var watchId = null;
+var map = null;
+var ourCoords = {
+ latitude: 47.624851,
+ longitude: -122.52099
+};
+var prevCoords = null;
+
+window.onload = getMyLocation;
+
+function getMyLocation() {
+ if (navigator.geolocation) {
+
+ navigator.geolocation.getCurrentPosition(
+ displayLocation,
+ displayError,
+ {enableHighAccuracy: true, timeout:9000});
+
+ var watchButton = document.getElementById("watch");
+ watchButton.onclick = watchLocation;
+ var clearWatchButton = document.getElementById("clearWatch");
+ clearWatchButton.onclick = clearWatch;
+ }
+ else {
+ alert("Oops, no geolocation support");
+ }
+}
+
+function displayLocation(position) {
+ var latitude = position.coords.latitude;
+ var longitude = position.coords.longitude;
+
+ var div = document.getElementById("location");
+ div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
+ div.innerHTML += " (with " + position.coords.accuracy + " meters accuracy)";
+
+ var km = computeDistance(position.coords, ourCoords);
+ var distance = document.getElementById("distance");
+ distance.innerHTML = "You are " + km + " km from the WickedlySmart HQ";
+
+ if (map == null) {
+ showMap(position.coords);
+ prevCoords = position.coords;
+ }
+ else {
+ var meters = computeDistance(position.coords, prevCoords) * 1000;
+ if (meters > 20) {
+ scrollMapToPosition(position.coords);
+ prevCoords = position.coords;
+ }
+ }
+}
+
+
+// --------------------- Ready Bake ------------------
+//
+// Uses the Spherical Law of Cosines to find the distance
+// between two lat/long points
+//
+function computeDistance(startCoords, destCoords) {
+ var startLatRads = degreesToRadians(startCoords.latitude);
+ var startLongRads = degreesToRadians(startCoords.longitude);
+ var destLatRads = degreesToRadians(destCoords.latitude);
+ var destLongRads = degreesToRadians(destCoords.longitude);
+
+ var Radius = 6371; // radius of the Earth in km
+ var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) +
+ Math.cos(startLatRads) * Math.cos(destLatRads) *
+ Math.cos(startLongRads - destLongRads)) * Radius;
+
+ return distance;
+}
+
+function degreesToRadians(degrees) {
+ radians = (degrees * Math.PI)/180;
+ return radians;
+}
+
+// ------------------ End Ready Bake -----------------
+
+function showMap(coords) {
+ var googleLatAndLong = new google.maps.LatLng(coords.latitude,
+ coords.longitude);
+ var mapOptions = {
+ zoom: 10,
+ center: googleLatAndLong,
+ mapTypeId: google.maps.MapTypeId.ROADMAP
+ };
+ var mapDiv = document.getElementById("map");
+ map = new google.maps.Map(mapDiv, mapOptions);
+
+ // add the user marker
+ var title = "Your Location";
+ var content = "You are here: " + coords.latitude + ", " + coords.longitude;
+ addMarker(map, googleLatAndLong, title, content);
+
+/*
+ // add the WickedlySmart HQ marker
+ var wsLatLong = new google.maps.LatLng(
+ ourCoords.latitude,
+ ourCoords.longitude);
+ addMarker(map, wsLatLong, "WickedlySmart HQ",
+ "WickedlySmart HQ latitude: " +
+ ourCoords.latitude +
+ ", longitude: " +
+ ourCoords.longitude);
+*/
+}
+
+function addMarker(map, latlong, title, content) {
+ var markerOptions = {
+ position: latlong,
+ map: map,
+ title: title,
+ clickable: true
+ };
+ var marker = new google.maps.Marker(markerOptions);
+
+ var infoWindowOptions = {
+ content: content,
+ position: latlong
+ };
+
+ var infoWindow = new google.maps.InfoWindow(infoWindowOptions);
+
+ google.maps.event.addListener(marker, 'click', function() {
+ infoWindow.open(map);
+ });
+}
+
+
+function displayError(error) {
+ var errorTypes = {
+ 0: "Unknown error",
+ 1: "Permission denied",
+ 2: "Position is not available",
+ 3: "Request timeout"
+ };
+ var errorMessage = errorTypes[error.code];
+ if (error.code == 0 || error.code == 2) {
+ errorMessage = errorMessage + " " + error.message;
+ }
+ var div = document.getElementById("location");
+ div.innerHTML = errorMessage;
+}
+
+//
+// Code to watch the user's location
+//
+function watchLocation() {
+ watchId = navigator.geolocation.watchPosition(
+ displayLocation,
+ displayError,
+ {enableHighAccuracy: true, timeout:3000});
+}
+
+function scrollMapToPosition(coords) {
+ var latitude = coords.latitude;
+ var longitude = coords.longitude;
+
+ var latlong = new google.maps.LatLng(latitude, longitude);
+ map.panTo(latlong);
+
+ // add the new marker
+ addMarker(map, latlong, "Your new location", "You moved to: " +
+ latitude + ", " + longitude);
+}
+
+function clearWatch() {
+ if (watchId) {
+ navigator.geolocation.clearWatch(watchId);
+ watchId = null;
+ }
+}
+
+
diff --git a/chapter5/watchme/myLoc.css b/chapter5/watchme/myLoc.css
new file mode 100644
index 0000000..5776fe5
--- /dev/null
+++ b/chapter5/watchme/myLoc.css
@@ -0,0 +1,20 @@
+/*
+ * myLoc.css
+ *
+*/
+
+body {
+ font-family: Arial, Helvetica, sans-serif;
+ margin: 10px;
+}
+form, div#location, div#distance {
+ padding: 5px;
+}
+
+div#map {
+ margin: 5px;
+ width: 400px;
+ height: 400px;
+ border: 1px solid black;
+}
+
diff --git a/chapter5/watchme/myLoc.html b/chapter5/watchme/myLoc.html
new file mode 100644
index 0000000..f240016
--- /dev/null
+++ b/chapter5/watchme/myLoc.html
@@ -0,0 +1,32 @@
+
+
+
+Wherever you go, there you are
+
+Your location will go here.
+
+
+
+Distance from WickedlySmart HQ will go here.
+
+
+
+
+
+
+
+
+
diff --git a/chapter5/watchme/myLoc.js b/chapter5/watchme/myLoc.js
new file mode 100644
index 0000000..3e33dd4
--- /dev/null
+++ b/chapter5/watchme/myLoc.js
@@ -0,0 +1,138 @@
+/* myLoc.js */
+
+var watchId = null;
+var map = null;
+var ourCoords = {
+ latitude: 47.624851,
+ longitude: -122.52099
+};
+
+window.onload = getMyLocation;
+
+function getMyLocation() {
+ if (navigator.geolocation) {
+ var watchButton = document.getElementById("watch");
+ watchButton.onclick = watchLocation;
+ var clearWatchButton = document.getElementById("clearWatch");
+ clearWatchButton.onclick = clearWatch;
+ }
+ else {
+ alert("Oops, no geolocation support");
+ }
+}
+
+function displayLocation(position) {
+ var latitude = position.coords.latitude;
+ var longitude = position.coords.longitude;
+
+ var div = document.getElementById("location");
+ div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
+ div.innerHTML += " (with " + position.coords.accuracy + " meters accuracy)";
+
+ var km = computeDistance(position.coords, ourCoords);
+ var distance = document.getElementById("distance");
+ distance.innerHTML = "You are " + km + " km from the WickedlySmart HQ";
+
+ if (map == null) {
+ showMap(position.coords);
+ }
+}
+
+
+// --------------------- Ready Bake ------------------
+//
+// Uses the Spherical Law of Cosines to find the distance
+// between two lat/long points
+//
+function computeDistance(startCoords, destCoords) {
+ var startLatRads = degreesToRadians(startCoords.latitude);
+ var startLongRads = degreesToRadians(startCoords.longitude);
+ var destLatRads = degreesToRadians(destCoords.latitude);
+ var destLongRads = degreesToRadians(destCoords.longitude);
+
+ var Radius = 6371; // radius of the Earth in km
+ var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) +
+ Math.cos(startLatRads) * Math.cos(destLatRads) *
+ Math.cos(startLongRads - destLongRads)) * Radius;
+
+ return distance;
+}
+
+function degreesToRadians(degrees) {
+ radians = (degrees * Math.PI)/180;
+ return radians;
+}
+
+// ------------------ End Ready Bake -----------------
+
+function showMap(coords) {
+ var googleLatAndLong = new google.maps.LatLng(coords.latitude,
+ coords.longitude);
+ var mapOptions = {
+ zoom: 10,
+ center: googleLatAndLong,
+ mapTypeId: google.maps.MapTypeId.ROADMAP
+ };
+ var mapDiv = document.getElementById("map");
+ map = new google.maps.Map(mapDiv, mapOptions);
+
+ // add the user marker
+ var title = "Your Location";
+ var content = "You are here: " + coords.latitude + ", " + coords.longitude;
+ addMarker(map, googleLatAndLong, title, content);
+}
+
+function addMarker(map, latlong, title, content) {
+ var markerOptions = {
+ position: latlong,
+ map: map,
+ title: title,
+ clickable: true
+ };
+ var marker = new google.maps.Marker(markerOptions);
+
+ var infoWindowOptions = {
+ content: content,
+ position: latlong
+ };
+
+ var infoWindow = new google.maps.InfoWindow(infoWindowOptions);
+
+ google.maps.event.addListener(marker, 'click', function() {
+ infoWindow.open(map);
+ });
+}
+
+
+function displayError(error) {
+ var errorTypes = {
+ 0: "Unknown error",
+ 1: "Permission denied",
+ 2: "Position is not available",
+ 3: "Request timeout"
+ };
+ var errorMessage = errorTypes[error.code];
+ if (error.code == 0 || error.code == 2) {
+ errorMessage = errorMessage + " " + error.message;
+ }
+ var div = document.getElementById("location");
+ div.innerHTML = errorMessage;
+}
+
+//
+// Code to watch the user's location
+//
+function watchLocation() {
+ watchId = navigator.geolocation.watchPosition(
+ displayLocation,
+ displayError);
+}
+
+function clearWatch() {
+ if (watchId) {
+ navigator.geolocation.clearWatch(watchId);
+ watchId = null;
+ }
+}
+
+
diff --git a/chapter5/watchmepan/myLoc.css b/chapter5/watchmepan/myLoc.css
new file mode 100644
index 0000000..5776fe5
--- /dev/null
+++ b/chapter5/watchmepan/myLoc.css
@@ -0,0 +1,20 @@
+/*
+ * myLoc.css
+ *
+*/
+
+body {
+ font-family: Arial, Helvetica, sans-serif;
+ margin: 10px;
+}
+form, div#location, div#distance {
+ padding: 5px;
+}
+
+div#map {
+ margin: 5px;
+ width: 400px;
+ height: 400px;
+ border: 1px solid black;
+}
+
diff --git a/chapter5/watchmepan/myLoc.html b/chapter5/watchmepan/myLoc.html
new file mode 100644
index 0000000..f240016
--- /dev/null
+++ b/chapter5/watchmepan/myLoc.html
@@ -0,0 +1,32 @@
+
+
+
+Wherever you go, there you are
+
+Your location will go here.
+
+
+
+Distance from WickedlySmart HQ will go here.
+
+
+
+
+
+
+
+
+
diff --git a/chapter5/watchmepan/myLoc.js b/chapter5/watchmepan/myLoc.js
new file mode 100644
index 0000000..ee9c794
--- /dev/null
+++ b/chapter5/watchmepan/myLoc.js
@@ -0,0 +1,154 @@
+/* myLoc.js */
+
+var watchId = null;
+var map = null;
+var ourCoords = {
+ latitude: 47.624851,
+ longitude: -122.52099
+};
+
+window.onload = getMyLocation;
+
+function getMyLocation() {
+ if (navigator.geolocation) {
+ var watchButton = document.getElementById("watch");
+ watchButton.onclick = watchLocation;
+ var clearWatchButton = document.getElementById("clearWatch");
+ clearWatchButton.onclick = clearWatch;
+ }
+ else {
+ alert("Oops, no geolocation support");
+ }
+}
+
+function displayLocation(position) {
+ var latitude = position.coords.latitude;
+ var longitude = position.coords.longitude;
+
+ var div = document.getElementById("location");
+ div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
+ div.innerHTML += " (with " + position.coords.accuracy + " meters accuracy)";
+
+ var km = computeDistance(position.coords, ourCoords);
+ var distance = document.getElementById("distance");
+ distance.innerHTML = "You are " + km + " km from the WickedlySmart HQ";
+
+ if (map == null) {
+ showMap(position.coords);
+ }
+ else {
+ scrollMapToPosition(position.coords);
+ }
+}
+
+
+// --------------------- Ready Bake ------------------
+//
+// Uses the Spherical Law of Cosines to find the distance
+// between two lat/long points
+//
+function computeDistance(startCoords, destCoords) {
+ var startLatRads = degreesToRadians(startCoords.latitude);
+ var startLongRads = degreesToRadians(startCoords.longitude);
+ var destLatRads = degreesToRadians(destCoords.latitude);
+ var destLongRads = degreesToRadians(destCoords.longitude);
+
+ var Radius = 6371; // radius of the Earth in km
+ var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) +
+ Math.cos(startLatRads) * Math.cos(destLatRads) *
+ Math.cos(startLongRads - destLongRads)) * Radius;
+
+ return distance;
+}
+
+function degreesToRadians(degrees) {
+ radians = (degrees * Math.PI)/180;
+ return radians;
+}
+
+// ------------------ End Ready Bake -----------------
+
+function showMap(coords) {
+ var googleLatAndLong = new google.maps.LatLng(coords.latitude,
+ coords.longitude);
+ var mapOptions = {
+ zoom: 10,
+ center: googleLatAndLong,
+ mapTypeId: google.maps.MapTypeId.ROADMAP
+ };
+ var mapDiv = document.getElementById("map");
+ map = new google.maps.Map(mapDiv, mapOptions);
+
+ // add the user marker
+ var title = "Your Location";
+ var content = "You are here: " + coords.latitude + ", " + coords.longitude;
+ addMarker(map, googleLatAndLong, title, content);
+}
+
+function addMarker(map, latlong, title, content) {
+ var markerOptions = {
+ position: latlong,
+ map: map,
+ title: title,
+ clickable: true
+ };
+ var marker = new google.maps.Marker(markerOptions);
+
+ var infoWindowOptions = {
+ content: content,
+ position: latlong
+ };
+
+ var infoWindow = new google.maps.InfoWindow(infoWindowOptions);
+
+ google.maps.event.addListener(marker, 'click', function() {
+ infoWindow.open(map);
+ });
+}
+
+
+function displayError(error) {
+ var errorTypes = {
+ 0: "Unknown error",
+ 1: "Permission denied",
+ 2: "Position is not available",
+ 3: "Request timeout"
+ };
+ var errorMessage = errorTypes[error.code];
+ if (error.code == 0 || error.code == 2) {
+ errorMessage = errorMessage + " " + error.message;
+ }
+ var div = document.getElementById("location");
+ div.innerHTML = errorMessage;
+}
+
+//
+// Code to watch the user's location
+//
+function watchLocation() {
+ watchId = navigator.geolocation.watchPosition(
+ displayLocation,
+ displayError);
+}
+
+function scrollMapToPosition(coords) {
+ var latitude = coords.latitude;
+ var longitude = coords.longitude;
+
+ var latlong = new google.maps.LatLng(latitude, longitude);
+ map.panTo(latlong);
+
+ // add the new marker
+ addMarker(map, latlong, "Your new location", "You moved to: " +
+ latitude + ", " + longitude);
+}
+
+function clearWatch() {
+ if (watchId) {
+ navigator.geolocation.clearWatch(watchId);
+ watchId = null;
+ }
+}
+
+
+
diff --git a/chapter6/JSONP/mightygumball.css b/chapter6/JSONP/mightygumball.css
new file mode 100644
index 0000000..633beee
--- /dev/null
+++ b/chapter6/JSONP/mightygumball.css
@@ -0,0 +1,33 @@
+body {
+ margin-left: 40px;
+ margin-right: 40px;
+}
+div#sales {
+ background-color: #d9d9d9;
+ -webkit-border-radius: 6px;
+ border-radius: 6px;
+ margin: 10px 0px 0px 0px;
+ padding: 0px;
+ border: 1px solid #d9d9d9;
+}
+div.saleItem {
+ font-family: Verdana, Helvetica, sans-serif;
+ color: #434343;
+ padding: 10px;
+}
+div.saleItem:nth-child(2n) {
+ background-color: #fafafa;
+}
+div.saleItem:first-child {
+ -webkit-border-top-left-radius: 6px;
+ -webkit-border-top-right-radius: 6px;
+ border-top-left-radius: 6px;
+ border-top-right-radius: 6px;
+}
+div.saleItem:last-child {
+ -webkit-border-bottom-left-radius: 6px;
+ -webkit-border-bottom-right-radius: 6px;
+ border-bottom-left-radius: 6px;
+ border-bottom-right-radius: 6px;
+}
+
diff --git a/chapter6/JSONP/mightygumball.html b/chapter6/JSONP/mightygumball.html
new file mode 100644
index 0000000..97f9a67
--- /dev/null
+++ b/chapter6/JSONP/mightygumball.html
@@ -0,0 +1,28 @@
+
+
+
+Mighty Gumball
+Mighty Gumball Sales
+
+
+
+
+
+
diff --git a/chapter6/JSONP/mightygumball.js b/chapter6/JSONP/mightygumball.js
new file mode 100644
index 0000000..62e04f5
--- /dev/null
+++ b/chapter6/JSONP/mightygumball.js
@@ -0,0 +1,56 @@
+/* mightygumball.js */
+/*
+ * get the content of a JSON file using JSONP
+ * update every 3 seconds.
+ *
+ */
+var lastReportTime = 0;
+
+window.onload = init;
+
+function init() {
+ var interval = setInterval(handleRefresh, 3000);
+ handleRefresh();
+}
+
+function handleRefresh() {
+ console.log("here");
+ var url = "http://gumball.wickedlysmart.com" +
+ "?callback=updateSales" +
+ //"&lastreporttime=" + lastReportTime +
+ "&random=" + (new Date()).getTime();
+ var newScriptElement = document.createElement("script");
+ newScriptElement.setAttribute("src", url);
+ newScriptElement.setAttribute("id", "jsonp");
+ var oldScriptElement = document.getElementById("jsonp");
+ var head = document.getElementsByTagName("head")[0];
+ if (oldScriptElement == null) {
+ head.appendChild(newScriptElement);
+ }
+ else {
+ head.replaceChild(newScriptElement, oldScriptElement);
+ }
+}
+
+function updateSales(sales) {
+ var salesDiv = document.getElementById("sales");
+ for (var i = 0; i < sales.length; i++) {
+ var sale = sales[i];
+ var div = document.createElement("div");
+ div.setAttribute("class", "saleItem");
+ div.innerHTML = sale.name + " sold " + sale.sales + " gumballs";
+ //salesDiv.appendChild(div);
+ if (salesDiv.childElementCount == 0) {
+ salesDiv.appendChild(div);
+ }
+ else {
+ salesDiv.insertBefore(div, salesDiv.firstChild);
+ }
+ }
+
+ if (sales.length > 0) {
+ lastReportTime = sales[sales.length-1].time;
+ }
+}
+
+
diff --git a/chapter6/luckyornot.html b/chapter6/luckyornot.html
new file mode 100644
index 0000000..ca886f8
--- /dev/null
+++ b/chapter6/luckyornot.html
@@ -0,0 +1,20 @@
+
+
+
+Lucky or Not
+Lucky or Not
+
+
+
+
+
+
+
+
diff --git a/chapter6/luckyornot.js b/chapter6/luckyornot.js
new file mode 100644
index 0000000..5d480fb
--- /dev/null
+++ b/chapter6/luckyornot.js
@@ -0,0 +1,30 @@
+/* luckyornot.js */
+/*
+ * get the content of a JSON file using Ajax
+ *
+ */
+
+window.onload = init;
+
+function init() {
+ var button = document.getElementById("amilucky");
+ button.onclick = getLuck;
+}
+
+function getLuck() {
+ var url = "luckyornot.txt";
+ var request = new XMLHttpRequest();
+ request.onload = function() {
+ if (request.status == 200) {
+ displayLuck(request.responseText);
+ }
+ };
+ request.open("GET", url);
+ request.send(null);
+}
+
+function displayLuck(luck) {
+ var p = document.getElementById("luck");
+ p.innerHTML = luck;
+}
+
diff --git a/chapter6/luckyornot.txt b/chapter6/luckyornot.txt
new file mode 100644
index 0000000..900ae61
--- /dev/null
+++ b/chapter6/luckyornot.txt
@@ -0,0 +1 @@
+lucky
diff --git a/chapter6/mightygumball.css b/chapter6/mightygumball.css
new file mode 100644
index 0000000..79d998c
--- /dev/null
+++ b/chapter6/mightygumball.css
@@ -0,0 +1,35 @@
+/* mightgumball.css */
+
+body {
+ margin-left: 40px;
+ margin-right: 40px;
+}
+div#sales {
+ background-color: #d9d9d9;
+ -webkit-border-radius: 6px;
+ border-radius: 6px;
+ margin: 10px 0px 0px 0px;
+ padding: 0px;
+ border: 1px solid #d9d9d9;
+}
+div.saleItem {
+ font-family: Verdana, Helvetica, sans-serif;
+ color: #434343;
+ padding: 10px;
+}
+div.saleItem:nth-child(2n) {
+ background-color: #fafafa;
+}
+div.saleItem:first-child {
+ -webkit-border-top-left-radius: 6px;
+ -webkit-border-top-right-radius: 6px;
+ border-top-left-radius: 6px;
+ border-top-right-radius: 6px;
+}
+div.saleItem:last-child {
+ -webkit-border-bottom-left-radius: 6px;
+ -webkit-border-bottom-right-radius: 6px;
+ border-bottom-left-radius: 6px;
+ border-bottom-right-radius: 6px;
+}
+
diff --git a/chapter6/mightygumball.html b/chapter6/mightygumball.html
new file mode 100644
index 0000000..3f14d33
--- /dev/null
+++ b/chapter6/mightygumball.html
@@ -0,0 +1,18 @@
+
+
+
+Mighty Gumball
+Mighty Gumball Sales
+
+
+
+
+
+
+
diff --git a/chapter6/mightygumball.js b/chapter6/mightygumball.js
new file mode 100644
index 0000000..90d97f9
--- /dev/null
+++ b/chapter6/mightygumball.js
@@ -0,0 +1,62 @@
+/* mightygumball.js */
+/*
+ * get the content of a JSON file using Ajax
+ *
+ */
+
+window.onload = init;
+
+function init() {
+ getSales();
+}
+
+//
+// This function is written using XMLHttpRequest Level 1, so if you're
+// using IE or Opera, or a really old version of Safari, Firefox or
+// Chrome, you can use this instead of Level 2 (below).
+//
+function getSales_XHRv1() {
+ // change the URL to match the location where you
+ // put the sales.json file
+ var url = "http://localhost/gumball/sales.json";
+ var request = new XMLHttpRequest();
+ request.open("GET", url);
+ request.onreadystatechange = function() {
+ if (request.readyState == 4 && request.status == 200) {
+ updateSales(request.responseText);
+ }
+ };
+ request.send(null);
+}
+
+//
+// With XMLHttpRequest Level 2 (implemented in new versions of Firefox, Safari
+// and Chrome) you can check progress and check for the "load" event with the
+// onload event handler instead of checking the onreadystatechange
+//
+function getSales() {
+ // change the URL to match the location where you
+ // put the sales.json file
+ var url = "http://localhost/gumball/sales.json";
+ var request = new XMLHttpRequest();
+ request.open("GET", url);
+ request.onload = function() {
+ if (request.status == 200) {
+ updateSales(request.responseText);
+ }
+ };
+ request.send(null);
+}
+
+function updateSales(responseText) {
+ var salesDiv = document.getElementById("sales");
+ var sales = JSON.parse(responseText);
+ for (var i = 0; i < sales.length; i++) {
+ var sale = sales[i];
+ var div = document.createElement("div");
+ div.setAttribute("class", "saleItem");
+ div.innerHTML = sale.name + " sold " + sale.sales + " gumballs";
+ salesDiv.appendChild(div);
+ }
+}
+
diff --git a/chapter6/sales.json b/chapter6/sales.json
new file mode 100644
index 0000000..0989e12
--- /dev/null
+++ b/chapter6/sales.json
@@ -0,0 +1 @@
+[{"name":"ARTESIA","time":1308774240669,"sales":8},{"name":"LOS ANGELES","time":1308774240669,"sales":2},{"name":"PASADENA","time":1308774240669,"sales":8},{"name":"STOCKTON","time":1308774240669,"sales":2},{"name":"FRESNO","time":1308774240669,"sales":2},{"name":"SPRING VALLEY","time":1308774240669,"sales":9},{"name":"ELVERTA","time":1308774240669,"sales":5},{"name":"SACRAMENTO","time":1308774240669,"sales":7},{"name":"SAN MATEO","time":1308774240669,"sales":1}]