diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 8501e40..20f0596 100644 --- a/README.md +++ b/README.md @@ -1,55 +1,13 @@ -# Mashup project +# Pokemon Mashup project -This project is open-ended! +This project is a mashup using Pokeapi -* [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. +* [More about Pokeapi](https://pokeapi.co) +* [inspiration](http://www.programmableweb.com/mashups) ## 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 - ``` +* Enter any number from 1 and the pokemon's info will be displayed -1. Run the tests. +![ScreenShot](demo.png) - ```bash - npm test -s - ``` diff --git a/demo.png b/demo.png new file mode 100644 index 0000000..d343cf5 Binary files /dev/null and b/demo.png differ diff --git a/index.html b/index.html index 6524157..5924dcf 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,20 @@ Mashup + + + - + +
Linna Wang | Contact Me: lw642@cornell.edu ✉
+
+

Find a Pokemon

+

Enter the podex of the pokemon you want to explore!

+
+
+
+ diff --git a/main.js b/main.js new file mode 100644 index 0000000..59f0300 --- /dev/null +++ b/main.js @@ -0,0 +1,18 @@ +$(document).ready(function() { + $("#button").click(function() { + var pokedex = $("#pokedex").val(); + var url = "https://pokeapi.co/api/v2/pokemon/" + pokedex; + $.getJSON(url, function(data) { + pokemon = data.name; + weight = data.weight; + ability = data.abilities[0].ability.name; + var img = document.createElement("IMG"); + img.src = "https://pokeapi.co/media/img/" + pokedex +".png"; + $("div.display").html(""); + $("div.display").append(img); + $("div.display").append("

" + "You got Pokemon Name: " + pokemon + "

"); + $("div.display").append("

" + "Weight: " + weight + "

"); + $("div.display").append("

" + pokemon + " have ability: " + ability + "

"); + }); + }); + });