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

hw submission #83

Open
AHassanally wants to merge 1 commit into
base: gh-pages
Choose a base branch
from
Open

hw submission #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
54 changes: 1 addition & 53 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,3 @@
# 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)

## 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
```
This project uses the Google Maps API to show visitors some of my favorite places as locations on a map. I used some of my newly learned programming skills in HTML, CSS and JavaScript in order to build the page and implement the API.
59 changes: 58 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,65 @@
<!DOCTYPE html>

<!-- Sources:
http://stackoverflow.com/questions/28499141/how-to-change-google-map-center-by-clicking-a-button -->

<html>
<head>
<title>Mashup</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
width: 100%;
padding-top: 1em;
}
</style>

</head>


<body>

<div>
<h1>My Favorite Places in the World</h1>
<p>These are some of the areas I've lived, worked and loved:</p>
<button id="1" style="padding:10px; cursor:pointer;">Dubai</button>
<button id="2" style="padding:10px; cursor:pointer;">Mumbai</button>
<button id="3" style="padding:10px; cursor:pointer;">New York</button>
</div>

<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 13
});

google.maps.event.addDomListener(document.getElementById("1"), 'click', function () {
map.setCenter(new google.maps.LatLng(25.205,55.271));
});

google.maps.event.addDomListener(document.getElementById("2"), 'click', function () {
map.setCenter(new google.maps.LatLng(19.076,72.878));
});

google.maps.event.addDomListener(document.getElementById("3"), 'click', function () {
map.setCenter(new google.maps.LatLng(40.713,-74.006));
});
}

</script>

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

</body>
</html>
</html>