diff --git a/vendor/.keep "b/Icon\r" similarity index 100% rename from vendor/.keep rename to "Icon\r" diff --git a/README.md b/README.md index 8501e40..6ef5e39 100644 --- a/README.md +++ b/README.md @@ -1,55 +1,12 @@ -# Mashup project +# Google Map - Whois Mashup -This project is open-ended! +## Description +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) -* [AJAX demos](https://github.com/advanced-js/deck/tree/gh-pages/demos/ajax) -* [inspiration?](http://www.programmableweb.com/mashups) +## 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." -## Requirements - -* 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..7192a07 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,62 @@ - Mashup + Mashup: IP+Location + + + +

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.

+
+ + + + + + + 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..731db24 --- /dev/null +++ b/js/main.js @@ -0,0 +1,55 @@ +///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(){ + 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); + }); + + +/* $.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( ) { + alert( "Error" ); + + }) + + .always(function( xhr, status ) { + alert( "The request is complete!" ); + }); +*/ +} 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); -});