startup-systems · ichigooo · Sep 27, 2016 · Sep 27, 2016 · Sep 27, 2016 · Sep 27, 2016
diff --git a/.DS_Store b/.DS_Store
diff --git 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
diff --git a/index.html b/index.html
@@ -2,7 +2,20 @@
 <html>
   <head>
     <title>Mashup</title>
+	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
+ 		<script type="text/javascript" src="main.js"></script>
+
   </head>
-  <body>
+  <body style="background-color: lightblue;">
+    <div style="text-align:center; font-size:14px; color:white;" class="contact">Linna Wang | Contact Me: lw642@cornell.edu &#9993;</div>
+    <div style="text-align:center"><img src="https://upload.wikimedia.org/wikipedia/commons/f/f7/English_Pok%C3%A9mon_logo.svg"/></div>
+    <h2 style="text-align:center; color:white;" >Find a Pokemon</h2>
+    <h4 style="text-align:center; color:white;" >Enter the podex of the pokemon you want to explore!</h4>
+ 		<div style="text-align:center;" ><input style="width: 50%; height: 43px;
+    box-sizing: border-box;" id="pokedex" type="text"
+    placeholder="Please type the Pokedex of the Pokemon You Wish to Find">
+    <button style="width: 135px; height: 43px;" id="button">Search</button></div>
+ 		<div style="color:rgb(149, 151, 187); text-align:center; font-size:40px;" class="display"></div>
+
   </body>
 </html>
diff --git a/main.js 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("<p>" + "You got Pokemon Name: " + pokemon + "<p>");
+      $("div.display").append("<p>" + "Weight: " + weight + "<p>");
+      $("div.display").append("<p>" + pokemon + " have ability: " + ability + "<p>");
+ 		});
+ 	});
+ });