Skip to content
This repository was archived by the owner on Jan 20, 2025. It is now read-only.

submitting for @recursion915 #88

Open
afeld wants to merge 7 commits into
base: gh-pages
Choose a base branch
from
Open

submitting for @recursion915 #88

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f11119f
Update index.html
recursion915 Sep 26, 2016
5d10ed2
Jquery added
recursion915 Sep 26, 2016
a9270b7
Update README.md
recursion915 Sep 26, 2016
3ebb8f2
Update index.html
recursion915 Sep 26, 2016
6b9dcd8
Update index.html
recursion915 Sep 26, 2016
f08f3a7
add readme
recursion915 Sep 27, 2016
7e80150
fixed a typo
recursion915 Sep 27, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 4 additions & 42 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,6 @@
# Mashup project

This project is open-ended! Requirements:

* Build a site that uses data from at least one external API in an interesting, interactive way.
* Replace this README with a description of the project.
* 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.

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.

* [AJAX demos](https://github.com/advanced-js/deck/tree/gh-pages/demos/ajax)
* [inspiration?](http://www.programmableweb.com/mashups)

## 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).

## Too easy?

* build in an object-oriented way
* add fancy interactivity/animations

## 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
```
Run: https://recursion915.github.io/mashup/
Put your name, and your address like this:(546 Main Street, New York)
Then click on get GEOCODE, this will use ajax to get GPS coordinates from Google GeoCode API.
If you like, click on GetMap, this use google map API to draw your GPS coordinates on the map.
110 changes: 105 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,108 @@
<!DOCTYPE html>

<html>
<head>
<title>Mashup</title>
</head>
<body>
</body>

<head>
<title>MashUp HW C.Zhang</title>
<script src="jquery-1.11.3.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
var LatLng;
$(document).ready(function() {
$("#CS").click(function(){
console.log("CS clicked");
$("#INTRO").html("Wow~ You start CS in Cornell?! Top 5 CS School!");
});
$("#CM").click(function(){
$("#INTRO").html("Gonna be a data scientist soon?");
});
$("#MBA").click(function(){
$("#INTRO").html("Ready to manage 200+ department soon?");
});
$("#LLM").click(function(){
$("#INTRO").html("Billable hour rate: 1000 USD/hr !");
});

$("#Button_submit").click(function(){


var searchdata= JSON.parse(localStorage.getItem("searchresult"));
var school=$("#address").val();
var yourname=$("#username").val();
//convert address to GPS location
//key is registered under: chenz915@gmail.com
//please make you own key
//if you want to use this code

$.getJSON('https://maps.googleapis.com/maps/api/geocode/json?address='+school+'&key=AIzaSyD0OpxP2jgLqKimr6KQumSEDmLxALX_V40', null, function (data) {
var p = data.results[0].geometry.location;
LatLng=new google.maps.LatLng(p.lat, p.lng);
console.log("your school is"+school+"its gps"+LatLng);
$("#GEOCODE").html(yourname + ", your address GPS is " + LatLng);
});


});




$("#Button_maps").click(function(){
console.log("buttonmaps clicked");

// Create a map object and specify the DOM element for display.
var map = new google.maps.Map(document.getElementById('googleMap'), {
center: LatLng,
scrollwheel: false,
zoom: 14
});

// Create a marker and set its position.
var marker = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Hello World!'
});
});
});


</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAJnVNr6Z0VZakSemow6cMh103Ksv8Mzz4&callback=initMap"
async defer></script>
</head>

<body>

<h1>Geocode API and Google Map API</h1>

Your Name: <input name="username" type=text size="15" id="username"/>
<br/>

Your Live at: <input name="address" type=text size="30" id="address"/>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Your Major at Cornell Tech?
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a id="CS" href="#">CS</a></li>
<li><a id="CM" href="#">CM</a></li>
<li><a id="LLM" href="#">LLM</a></li>
<li><a id="MBA" href="#">MBA</a></li>
</ul>
</div>
<div id="INTRO"></div>
<div id="GEOCODE"></div>
<br/> Your Live At:(Click the icon to zoom in) <div id="location"></div>
<div id="googleMap" style="width:500px;height:380px;"></div>
<p>
<button id="Button_submit">GEOCODE ADDRESS</button>
<button id="Button_maps">Get the Map!</button>
</p>
<div id="status"></div>

</body>
</html>
Loading