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

homework commit #71

Open
charlessuo wants to merge 4 commits into
base: gh-pages
Choose a base branch
from
Open

homework commit #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
90693d7
homework commit
Sep 27, 2016
f5daa84
Update README.md
charlessuo Sep 27, 2016
09905b9
Update README.md
charlessuo Sep 27, 2016
4aa6291
Update README.md
whongyi Oct 12, 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
35 changes: 23 additions & 12 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,32 @@
# Mashup project

This project is open-ended! Requirements:
This project is open-ended!

* Build a site that uses data from at least one external API in an interesting, interactive way.
* [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.
* 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.
### Extra credit

* [AJAX demos](https://github.com/advanced-js/deck/tree/gh-pages/demos/ajax)
* [inspiration?](http://www.programmableweb.com/mashups)
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

Expand All @@ -21,11 +37,6 @@ A couple things to look for in an API (or at least the endpoints you're using) f

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):
Expand Down
50 changes: 50 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,57 @@
<html>
<head>
<title>Mashup</title>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
var res;
$.ajax({
//url: 'https://api.foursquare.com/v2/venues/explore',
url: 'https://api.foursquare.com/v2/venues/search?client_id=PVVASDR22PNQAJ0LRYBPFVLMGTJWQAEU1Z5FTRS5M4MSHBKQ&client_secret=WY23JCH4S1L4VAEO5FSCQUKCGJXMSJPJR3P53DT1SNYOTOCF&v=20130819&ll=40.7,-74&query=sushi',
dataType: 'jsonp',
success: function(result){
res = result;
var len = result.response.venues.length;
var temp_string = "";
for(var i = 0; i < 5; i++) {
console.log(result.response.venues[i].name);
temp_string = temp_string + result.response.venues[i].name + '; ';
$("#name").html(temp_string);
}
}});

$(document).ready(function() {
$("#btn1").click(function() {
$("#httpaddress").html("The website of your target restaurant is: ");
var len = res.response.venues.length;
//console.log(len);
for (var j = 0; j < len; j++) {
var cur = res.response.venues[j];
console.log("cur is " + cur.name);
console.log("place is " + $("#place").val());
if (cur.name === $("#place").val()) {
$("#httpaddress").html(cur.url);
//console.log(cur.url);
break;

} else {
//console.log('Not in records, please input valid name from listed above');
$("#errormessage").html("Sorry, but your input is not in records, please input valid name from listed above.");
}

}

});
});

</script>
</head>
<body>
<div>Show me the top 5 sushi places people go to:</div>
<div id="name"></div>
Type in your target sushi place name from above to find its website (such as: Blue Ribbon Sushi): <input name="place" type=text size="30" id="place"/>
<div id="httpaddress"></div>
<div id="errormessage"></div>
<button id="btn1">search</button>
</body>

</html>