From 947cda98e8dc1898846ce6c95c2df82c1b0ee515 Mon Sep 17 00:00:00 2001 From: Chris M Wang Date: Mon, 26 Sep 2016 18:24:58 -0400 Subject: [PATCH 01/16] 1st commit --- "Icon\r" | 0 README.md | 59 +++++++------------------------------------------ index.html | 24 +++++++++++++++++++- "js/Icon\r" | 0 js/main.js | 30 +++++++++++++++++++++++++ "vendor/Icon\r" | 0 6 files changed, 61 insertions(+), 52 deletions(-) create mode 100644 "Icon\r" create mode 100644 "js/Icon\r" create mode 100644 js/main.js create mode 100644 "vendor/Icon\r" diff --git "a/Icon\r" "b/Icon\r" new file mode 100644 index 0000000..e69de29 diff --git a/README.md b/README.md index 8501e40..d4f84d4 100644 --- a/README.md +++ b/README.md @@ -1,55 +1,12 @@ -# Mashup project -This project is open-ended! -* [AJAX demos](https://github.com/advanced-js/deck/tree/gh-pages/demos/ajax) -* [inspiration?](http://www.programmableweb.com/mashups) +#IP-MAP Project Description +This is CS 5356 Homework - Mashup by student NetID _*mw866*_. +It mashes-up the outputs from two APIs: +1. GPS coordinates in your IPWHOIS record (API by ip-api.com/) +2. Visualize the GPS coordinates in a Google Map (API by maps.googleapis.com) -## Requirements +#Notes +(For Chrome) Please click on "Load the unsafe scripts butter" if see the warning "This page is trying to load scripts from unauthenticated sources." -* Build a site that uses data from at least one external API in an interesting, interactive way. (**80%**) -* HTML validation (using the [Nu HTML Checker](https://validator.w3.org/nu/)) must pass. (**10%**) -* JavaScript linting (using the configured [JSHint](http://jshint.com/about/)) must pass. (**10%**) -* Replace this README with a description of the project. - -### Extra credit - -Too easy? - -* Build in an [object-oriented](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript) way (**10%**) -* Add fancy interactivity/animations (**10%**) - -If you do either of these, please let Aidan know so he can take a look. - -## Tips - -* The JS code should be **non-trivial**. That being said... start simple! (Just get the data to show up on the page.) -* No server-side coding is required, but feel free to create a backend in whatever language if you like, if you need one. -* You are welcome to use any 3rd-party libraries/frameworks – just load them from a CDN (e.g. [cdnjs](http://cdnjs.com)), or put them under the [`vendor/`](vendor/) folder. -* **Do not commit the `client_secret` (or anything else from an API that says "token" or "secret")**, as a hacker could use this to make requests on behalf of you. - -## Finding an API - -A couple things to look for in an API (or at least the endpoints you're using) for this project: - -* Make sure it doesn't require authentication/authorization (e.g. [OAuth](http://oauth.net/)) - at least for the endpoints that you want to use - so that you don't need a server. -* If the API doesn't support cross-domain requests (JSONP or CORS), you will need to use [JSONProxy](https://jsonp.afeld.me/). - -Here is a [list of API suggestions](https://gist.github.com/afeld/4952991). - -## Running tests locally - -Within this repository directory in your [virtual machine](https://github.com/startup-systems/vm): - -1. [Install Node.js 6.x.](https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions) -1. Install the project dependencies. - - ```bash - npm install - ``` - -1. Run the tests. - - ```bash - npm test -s - ``` +It is just schoolwork. I do not track your location. Feel free to inspect my source code. diff --git a/index.html b/index.html index 6524157..746499f 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,30 @@ - Mashup + Mashup: IP+Location + + + +

[NetID: mw866] CS5356 Homework: Mashup

+

This is your approximate location based on your IP address.

+
+

This is your approximate WHOIS record based on your IP address.

+
+ + + + diff --git "a/js/Icon\r" "b/js/Icon\r" new file mode 100644 index 0000000..e69de29 diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..46d5354 --- /dev/null +++ b/js/main.js @@ -0,0 +1,30 @@ +//WHOIS API: + +function main(){ + var ipLng; + var ipLat; + $.getJSON("http://ip-api.com/json/?callback=?", function(data) { + var table_body = ""; + $.each(data, function(k, v) { + table_body += "" + k + "" + v + ""; + }); + $("#whois").html(table_body); + initMap(data.lon, data.lat); + console.log(data.lon, data.lat) + + }); +} + +//Google Map API: + +function initMap(ipLng, ipLat){ + var map; + map = new google.maps.Map(document.getElementById('map'), { + center: {lat: ipLat, lng: ipLng}, + zoom: 8 + }); + var marker = new google.maps.Marker({ + position: {lat: ipLat, lng: ipLng}, + map: map + }); +} diff --git "a/vendor/Icon\r" "b/vendor/Icon\r" new file mode 100644 index 0000000..e69de29 From cdcf0ba46fec578a6a0fe62c2d7c230c7b65c0f3 Mon Sep 17 00:00:00 2001 From: Chris M Wang Date: Mon, 26 Sep 2016 18:40:40 -0400 Subject: [PATCH 02/16] 2nd --- js/main.js | 27 ++++++++++++++------------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/js/main.js b/js/main.js index 46d5354..0244c4d 100644 --- a/js/main.js +++ b/js/main.js @@ -1,3 +1,16 @@ +///Google Map API: + +function initMap(ipLng, ipLat){ + var map; + map = new google.maps.Map(document.getElementById('map'), { + center: {lat: ipLat, lng: ipLng}, + zoom: 8 + }); + var marker = new google.maps.Marker({ + position: {lat: ipLat, lng: ipLng}, + map: map + }); +} //WHOIS API: function main(){ @@ -10,21 +23,9 @@ function main(){ }); $("#whois").html(table_body); initMap(data.lon, data.lat); - console.log(data.lon, data.lat) + console.log(data.lon, data.lat); }); } -//Google Map API: -function initMap(ipLng, ipLat){ - var map; - map = new google.maps.Map(document.getElementById('map'), { - center: {lat: ipLat, lng: ipLng}, - zoom: 8 - }); - var marker = new google.maps.Marker({ - position: {lat: ipLat, lng: ipLng}, - map: map - }); -} From 531797a1a4f4f5dee5619be81dc2424e65df84ba Mon Sep 17 00:00:00 2001 From: Chris M Wang Date: Mon, 26 Sep 2016 18:57:21 -0400 Subject: [PATCH 03/16] 333 --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 746499f..cdfa1ef 100644 --- a/index.html +++ b/index.html @@ -14,9 +14,9 @@ height: 50%; } -

[NetID: mw866] CS5356 Homework: Mashup

+

[NetID: mw866] CS5356 Homework: Mashup

This is your approximate location based on your IP address.

This is your approximate WHOIS record based on your IP address.

From 7ab00e3aa4fadb0136eb4f2c7b4b6fd27235a48d Mon Sep 17 00:00:00 2001 From: Chris M Wang Date: Mon, 26 Sep 2016 19:18:33 -0400 Subject: [PATCH 04/16] 333 --- js/main.js | 29 +++++++++++++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/js/main.js b/js/main.js index 0244c4d..e1039eb 100644 --- a/js/main.js +++ b/js/main.js @@ -16,7 +16,7 @@ function initMap(ipLng, ipLat){ function main(){ var ipLng; var ipLat; - $.getJSON("http://ip-api.com/json/?callback=?", function(data) { + /*$.getJSON("http://ip-api.com/json/?callback=?", function(data) { var table_body = ""; $.each(data, function(k, v) { table_body += "" + k + "" + v + ""; @@ -25,7 +25,32 @@ function main(){ initMap(data.lon, data.lat); console.log(data.lon, data.lat); + });*/ + $.ajax({ + url: "http://ip-api.com/json/?callback=?", + type: "GET", + dataType : "json", + }) + + .done(function(data) { + var table_body = ""; + $.each(data, function(k, v) { + table_body += "" + k + "" + v + ""; }); -} + $("#whois").html(table_body); + initMap(data.lon, data.lat); + console.log(data.lon, data.lat); + }) + .fail(function( xhr, status, errorThrown ) { + alert( "Sorry, there was a problem!" ); + console.log( "Error: " + errorThrown ); + console.log( "Status: " + status ); + console.dir( xhr ); + }) + .always(function( xhr, status ) { + alert( "The request is complete!" ); + }); + +} From 091e4e9878181c9cbaa36fb6a1b3ab994e9397de Mon Sep 17 00:00:00 2001 From: Chris M Wang Date: Mon, 26 Sep 2016 19:20:48 -0400 Subject: [PATCH 05/16] 4`4`4`4` --- js/main.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/js/main.js b/js/main.js index e1039eb..5b896f6 100644 --- a/js/main.js +++ b/js/main.js @@ -16,7 +16,7 @@ function initMap(ipLng, ipLat){ function main(){ var ipLng; var ipLat; - /*$.getJSON("http://ip-api.com/json/?callback=?", function(data) { + $.getJSON("http://ip-api.com/json/?callback=?", function(data) { var table_body = ""; $.each(data, function(k, v) { table_body += "" + k + "" + v + ""; @@ -24,9 +24,8 @@ function main(){ $("#whois").html(table_body); initMap(data.lon, data.lat); console.log(data.lon, data.lat); - - });*/ - $.ajax({ + }); +/* $.ajax({ url: "http://ip-api.com/json/?callback=?", type: "GET", dataType : "json", @@ -52,5 +51,5 @@ function main(){ .always(function( xhr, status ) { alert( "The request is complete!" ); }); - +*/ } From 84c46d7f2f35c9857d04f027f300cb4a184ae0a8 Mon Sep 17 00:00:00 2001 From: Chris M Wang Date: Tue, 27 Sep 2016 10:38:57 -0400 Subject: [PATCH 06/16] try ajax() core method instead of convinience method --- js/main.js | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/js/main.js b/js/main.js index 5b896f6..3b5b4e4 100644 --- a/js/main.js +++ b/js/main.js @@ -16,7 +16,7 @@ function initMap(ipLng, ipLat){ function main(){ var ipLng; var ipLat; - $.getJSON("http://ip-api.com/json/?callback=?", function(data) { + /*$.getJSON("http://ip-api.com/json/?callback=?", function(data) { var table_body = ""; $.each(data, function(k, v) { table_body += "" + k + "" + v + ""; @@ -24,8 +24,8 @@ function main(){ $("#whois").html(table_body); initMap(data.lon, data.lat); console.log(data.lon, data.lat); - }); -/* $.ajax({ + });*/ + $.ajax({ url: "http://ip-api.com/json/?callback=?", type: "GET", dataType : "json", @@ -41,14 +41,11 @@ function main(){ console.log(data.lon, data.lat); }) - .fail(function( xhr, status, errorThrown ) { - alert( "Sorry, there was a problem!" ); - console.log( "Error: " + errorThrown ); - console.log( "Status: " + status ); - console.dir( xhr ); + .fail(function( ) { + alert( "Error!" ); }) - .always(function( xhr, status ) { + .always(function() { alert( "The request is complete!" ); }); */ From 707852ae8a89884a5404246509b5f47f0cba1af8 Mon Sep 17 00:00:00 2001 From: Chris M Wang Date: Tue, 27 Sep 2016 10:44:43 -0400 Subject: [PATCH 07/16] fix wrong comments. --- js/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/main.js b/js/main.js index 3b5b4e4..b2095d9 100644 --- a/js/main.js +++ b/js/main.js @@ -48,5 +48,5 @@ function main(){ .always(function() { alert( "The request is complete!" ); }); -*/ + } From 104b47e735e3f1afaad5ab9943b95c5db04085f2 Mon Sep 17 00:00:00 2001 From: Chris M Wang Date: Tue, 27 Sep 2016 10:48:13 -0400 Subject: [PATCH 08/16] try combine both functions into the main function. --- js/main.js | 27 +++++++++++++++++++-------- 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/js/main.js b/js/main.js index b2095d9..3efec5e 100644 --- a/js/main.js +++ b/js/main.js @@ -1,6 +1,6 @@ ///Google Map API: -function initMap(ipLng, ipLat){ +/*function initMap(ipLng, ipLat){ var map; map = new google.maps.Map(document.getElementById('map'), { center: {lat: ipLat, lng: ipLng}, @@ -10,13 +10,13 @@ function initMap(ipLng, ipLat){ position: {lat: ipLat, lng: ipLng}, map: map }); -} +}*/ //WHOIS API: function main(){ var ipLng; var ipLat; - /*$.getJSON("http://ip-api.com/json/?callback=?", function(data) { + $.getJSON("http://ip-api.com/json/?callback=?", function(data) { var table_body = ""; $.each(data, function(k, v) { table_body += "" + k + "" + v + ""; @@ -24,8 +24,18 @@ function main(){ $("#whois").html(table_body); initMap(data.lon, data.lat); console.log(data.lon, data.lat); - });*/ - $.ajax({ + }); + var map; + map = new google.maps.Map(document.getElementById('map'), { + center: {lat: ipLat, lng: ipLng}, + zoom: 8 + }); + var marker = new google.maps.Marker({ + position: {lat: ipLat, lng: ipLng}, + map: map + }); + +/* $.ajax({ url: "http://ip-api.com/json/?callback=?", type: "GET", dataType : "json", @@ -42,11 +52,12 @@ function main(){ }) .fail(function( ) { - alert( "Error!" ); + alert( "Error" ); + }) - .always(function() { + .always(function( xhr, status ) { alert( "The request is complete!" ); }); - +*/ } From 20831793432647fa2124c572f8a85e791a8c7519 Mon Sep 17 00:00:00 2001 From: Chris M Wang Date: Tue, 27 Sep 2016 11:07:21 -0400 Subject: [PATCH 09/16] add js to html --- index.html | 34 +++++++++++++++++++++++++++++++++- js/main.js | 14 +++----------- 2 files changed, 36 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index cdfa1ef..982fa42 100644 --- a/index.html +++ b/index.html @@ -23,8 +23,40 @@

[NetID: mw866] CS5356 Homework: Mashup

- + + + + diff --git a/js/main.js b/js/main.js index 3efec5e..731db24 100644 --- a/js/main.js +++ b/js/main.js @@ -1,6 +1,6 @@ ///Google Map API: -/*function initMap(ipLng, ipLat){ +function initMap(ipLng, ipLat){ var map; map = new google.maps.Map(document.getElementById('map'), { center: {lat: ipLat, lng: ipLng}, @@ -10,7 +10,7 @@ position: {lat: ipLat, lng: ipLng}, map: map }); -}*/ +} //WHOIS API: function main(){ @@ -25,15 +25,7 @@ function main(){ initMap(data.lon, data.lat); console.log(data.lon, data.lat); }); - var map; - map = new google.maps.Map(document.getElementById('map'), { - center: {lat: ipLat, lng: ipLng}, - zoom: 8 - }); - var marker = new google.maps.Marker({ - position: {lat: ipLat, lng: ipLng}, - map: map - }); + /* $.ajax({ url: "http://ip-api.com/json/?callback=?", From 624e96cab17381f9be6ae7e622c775346fdde508 Mon Sep 17 00:00:00 2001 From: Chris Wang Date: Thu, 15 Dec 2016 20:04:54 -0500 Subject: [PATCH 10/16] Delete Icon --- "vendor/Icon\r" | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 "vendor/Icon\r" diff --git "a/vendor/Icon\r" "b/vendor/Icon\r" deleted file mode 100644 index e69de29..0000000 From ebd4c92f3763b87fd6c50182f900902e0d328793 Mon Sep 17 00:00:00 2001 From: Chris Wang Date: Thu, 15 Dec 2016 20:04:59 -0500 Subject: [PATCH 11/16] Delete .keep --- vendor/.keep | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 vendor/.keep diff --git a/vendor/.keep b/vendor/.keep deleted file mode 100644 index e69de29..0000000 From fc766e7761078c0fafe4f16e88e043a5040254aa Mon Sep 17 00:00:00 2001 From: Chris Wang Date: Thu, 15 Dec 2016 20:06:11 -0500 Subject: [PATCH 12/16] Update index.html --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 982fa42..7192a07 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@ -

[NetID: mw866] CS5356 Homework: Mashup

+

A Javascript Mashup: IP + Location

This is your approximate location based on your IP address.

This is your approximate WHOIS record based on your IP address.

From b08e5023a5e45d414a7bf68fb5dc81fe61812126 Mon Sep 17 00:00:00 2001 From: Chris Wang Date: Thu, 15 Dec 2016 20:29:41 -0500 Subject: [PATCH 13/16] Update README.md --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index d4f84d4..ebbbf49 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,12 @@ +# IP-MAP Mashup - -#IP-MAP Project Description -This is CS 5356 Homework - Mashup by student NetID _*mw866*_. -It mashes-up the outputs from two APIs: +## Description +A mashup project that shows the the geolocation based on visitor's IP address. +It mashes up the outputs from two APIs: 1. GPS coordinates in your IPWHOIS record (API by ip-api.com/) 2. Visualize the GPS coordinates in a Google Map (API by maps.googleapis.com) -#Notes +## Notes (For Chrome) Please click on "Load the unsafe scripts butter" if see the warning "This page is trying to load scripts from unauthenticated sources." It is just schoolwork. I do not track your location. Feel free to inspect my source code. From 285353560a337a46b3e4dc12645003acb7b30c02 Mon Sep 17 00:00:00 2001 From: Chris Wang Date: Thu, 15 Dec 2016 21:47:11 -0500 Subject: [PATCH 14/16] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ebbbf49..661fcef 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ -# IP-MAP Mashup +# WHO - Google Map Mashup ## Description -A mashup project that shows the the geolocation based on visitor's IP address. +A mashup project that shows the the geolocation on Google Map based on visitor's WHOIS record. It mashes up the outputs from two APIs: 1. GPS coordinates in your IPWHOIS record (API by ip-api.com/) 2. Visualize the GPS coordinates in a Google Map (API by maps.googleapis.com) From 97bb2b5e6a6d5687ff4ecab6635eae1e604f6c79 Mon Sep 17 00:00:00 2001 From: Chris Wang Date: Thu, 15 Dec 2016 21:47:40 -0500 Subject: [PATCH 15/16] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 661fcef..6ef5e39 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# WHO - Google Map Mashup +# Google Map - Whois Mashup ## Description A mashup project that shows the the geolocation on Google Map based on visitor's WHOIS record. From 0fa50cd9a662b444550f90f9c184d8a218062c35 Mon Sep 17 00:00:00 2001 From: Chris Wang Date: Tue, 20 Dec 2016 13:04:50 -0500 Subject: [PATCH 16/16] Delete testAjax.js --- testAjax.js | 62 ----------------------------------------------------- 1 file changed, 62 deletions(-) delete mode 100644 testAjax.js diff --git a/testAjax.js b/testAjax.js deleted file mode 100644 index fb31d3e..0000000 --- a/testAjax.js +++ /dev/null @@ -1,62 +0,0 @@ -const fs = require('fs'); -const globby = require('globby'); - - -// get current file path, relative to directory that the script is run from -const currentFileRelative = () => { - // based off of http://stackoverflow.com/a/31856198/358804 - return __filename.slice(process.cwd().length + 1); -}; - -// match the patterns that JSHint is excluding -const getJSHintExcludes = () => { - let patterns = fs.readFileSync('.jshintignore').toString().split("\n"); - patterns = patterns.filter(pattern => { return !!pattern; }); - // exclude empty - return patterns.map(pattern => { return `!${pattern}`; }); -}; - -// attempt to match the files that JSHint is checking -const filePatterns = () => { - let patterns = getJSHintExcludes(); - const currentFile = currentFileRelative(); - patterns.unshift('*.html', '*.js', `!${currentFile}`); - - return patterns; -}; - -// covers: -// * http://api.jquery.com/category/ajax/ -// * https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest -// * https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch -// * https://developers.google.com/maps/documentation/javascript/3.exp/reference -// * https://developers.google.com/api-client-library/javascript/ -const matchAjax = /((\$|\bjQuery)\.(ajax|get(JSON|Script)?)|new XMLHttpRequest|fetch)\(|\bnew google\.|\bgapi\.|\$http\b/; - -const isAjaxCalled = source => { - return matchAjax.test(source); -}; - -const containsAjaxCall = path => { - const contents = fs.readFileSync(path).toString(); - return isAjaxCalled(contents); -}; - - -const patterns = filePatterns(); - -globby(patterns).then(paths => { - const ajaxFound = paths.some(path => { - return containsAjaxCall(path); - }); - - if (ajaxFound) { - console.log("AJAX call found!"); - } else { - console.error("ERROR: No use of AJAX found."); - process.exit(1); - } -}).catch(e => { - console.error(e); - process.exit(1); -});