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

Finished HW #84

Open
diegow88 wants to merge 2 commits into
base: gh-pages
Choose a base branch
from
Open

Finished HW #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cd0e880
Finished HW
Sep 28, 2016
5b2f230
Commit changes that Travis rejected
Sep 28, 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
58 changes: 12 additions & 46 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,54 +2,20 @@

This project is open-ended!

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

## Requirements
The website intends to show the list of items to purchase in Etsy given a specific zip code. The page only has one input box and a button.
Once the information is sent, the page will display a list with the result count and each item with its title, price and link to purchase.

* 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.
In addition to the APIs described below, the code uses jQuery v3.1.1.

### Extra credit
## APIs Involved
For this project, I used only two APIs.

Too easy?
### ZipCode API
This API provides information related to a specific zip code. For this API I obtain the latitude and longitude given the zip code the user
inputs. The method used is called locToZips. To check more information about the API method, click [here](https://www.zipcodeapi.com/API#locToZips)

* 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
```
### Etsy API
Etsy's API provides a list of the current items available. In particular I use the method listing/active to get them all and filtering by the
latitude and longitude obtained from the zip code. To check more information about the API method, click [here](https://www.etsy.com/developers/documentation/reference/listing)
44 changes: 44 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,51 @@
<html>
<head>
<title>Mashup</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script>
function getClosestLists(lat, long) {
if ( (lat === '') || (long === '') ) {
alert("You must input a set of coordinates");
return;
}
var api_key = "";
var url = "https://openapi.etsy.com/v2/listings/active.json?api_key=" + api_key + "&lat=" + lat + "&lon=" + long;
console.log(url);
$.get('https://jsonp.afeld.me/?url=' + url, function( data ) {
destiny = $("#results");
destiny.append("<h1>Etsy found " + data.count +" results </h1>");
$.each(data.results, function(key, value) {
destiny.append("<p>Title: <a href='" + value.url + "'>" + value.title + "</a><br>Price: " + value.price + "</p>");
});
});
}

function getZipCodeInformation() {
var api_key ="";
var zip = $("#zipInput").val();
var url = "https://www.zipcodeapi.com/rest/" + api_key + "/info.json/" + zip + "/degrees";
$.get('https://jsonp.afeld.me/?url=' + url, function( data ) {
//getDemographicData(data.zip_codes.join(","));
getClosestLists(data.lat, data.lng);
});
}

$(document).ready( function() {
$("#searchProductsBtn").bind("click", getZipCodeInformation);
});
</script>

</head>
<body>

<form>
<input type="text" id='zipInput' />
<input type="button" id='searchProductsBtn' value="Enviar" />
</form>

<div id="results">
</div>
</body>
</html>