Skills you will be using:
- JavaScript
- AJAX
- jQuery
- HTML
- CSS
You will also:
- Import and use WheelNavJS, a JavaScript library http://wheelnavjs.softwaretailoring.net/index.html
- Download the zip file of this repo and unzip it into your projects folder
- Download WheelNavJs from here: http://wheelnavjs.softwaretailoring.net/download.html
(Click the
Download
button underMain
) - Unzip the downloaded file
- Create a folder called wheelnavjs in the PokeAPI folder
- Copy and paste the following files from the wheelnav.js-1.6.1 folder:
raphael.min.js
raphael.icons.min.js
wheelnav.min.js
- In the
index.html
file, link up your javascript files, including the new WheelNavJS files you copied in.
Hint: That should look like this:
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="wheelnavjs/raphael.min.js"></script>
<script type="text/javascript" src="wheelnavjs/raphael.icons.min.js"></script>
<script type="text/javascript" src="wheelnavjs/wheelnav.min.js"></script>
- Start looking at the WheelNavJS documentation here: http://wheelnavjs.softwaretailoring.net/documentation/core.html
- Copy the code under
Properties
and paste it into the$(document).ready
function in yourmain.js
file - Make any color, size, or other attribute changes you'd like by using the documentation. Be sure to change the labels on the wheel to:
random
,color
,name
, andid
. Documentation on how to change those labels can be found here:
http://wheelnavjs.softwaretailoring.net/documentation/core.html UnderMethods
, click thecreate
button to see an example of defining labels in the built-in.createWheel
function. - Continue onto the Making it Work instructions.
- Take a look at the PokéAPI documentation here:
http://pokeapi.co/docsv2/# - The first API call should call a random Pokémon, so use the button already on the page (
Give me a random Pokémon!
) to trigger an API call for a random result. The button has already been set up to call a function calledrandomPoke
. - The API endpoint for calling a Pokémon by ID is:
'http://pokeapi.co/api/v2/pokemon/RANDOM_NUMBER_HERE
- Using the above endpoint and generating a random number from 1 to 721, use AJAX (an example can be found in the State API project) to make the request. This should live outside of the
$(document).ready
function. For now, log your results to the console or look at the results in Postman to see how the response JSON is structured. - Using the results returned, disply on the page the Pokémon's
name
,height
,weight
, andimage
(image coming fromsprites/front_shiny
).
Each piece of the the wheel has a different label. When each label is clicked, it should render a different button and, in some cases, a dropdown or form field for the user to input data.
For example:
When a user clicks the
color
section of the wheel, the wheel will spin and theGive me a random Pokémon!
button should disappear while a dropdown of Pokémon colors and a newGive me a Pokémon by color!
button should appear.
- Check out the WheelNavJS documentation to find out how to run code after a different section of the wheel is clicked. An example of the built-in
.navigateFunction
can be found here, in the second section underNavitem Basics
: http://wheelnavjs.softwaretailoring.net/documentation/navItem.html - Once your wheel navigation has been set, make sure the proper HTML elements are being displayed for whatever API call should be made (form field for searches by
name
, andid
. drop down for searching bycolor
. all four should have a button that executes the API call). - Look at the PokéAPI to find endpoints for searching by color and name. HINT: the endpoint for searching by ID is the same endpoint we used for the random search, just substituting the user input for the random number generated.
The term
acceptance criteria
is typically used with projects and tasks that are sent through quality testing. It defines the criteria used for determining when the project is considereddone and ready for deployment
- The
random
button should return a Pokémon's name, height, weight, and image. - The
color
button should return just the names of first 10 Pokémon for each color group. Pokémon color groups can be found on the interwebz. - The
name
button should return a Pokémon's name, height, weight, and image. - The
id
button should return a Pokémon's name, height, weight, and image. - The result should be styled in way that is pleasing to the eye.
- When returning the first 10 names in a color group, make each name clickable so the user may click on a name to then find the Pokémon's name, height, weight, and image. (HINT: This will require a second API call, but the url will be handed to you in the result from the color search).