JS PokeAPI

Consumes the PokeAPI for a pokedex-like experience. Also contains some useful utilities for building teams.

HTML

<script src="https://cdn.rawgit.com/iAmMortos/JSConsole/master/console.min.js"></script>
<div id="pokemonChooser">
    Choose a Pokémon<br />
<select id="pokeSelector"></select>
<button id="pokeSearchButton">Select</button>
</div>

<div id="page_content">

<div id="name"></div>
<span id="species"></span>
<div id="sprites">
</div>
Type(s): <span id="types"></span><br />
National Pokédex #: <span id="national_id"></span><br /><br />
<!--Pokedex ID: <span id="pkdx_id"></span><br />-->
<table id="stats">
    <tr>
        <th>HP</th><th>Atk</th><th>Def</th><th>SpAtk</th><th>SpDef</th><th>Spd</th><th>Total</th>
    </tr>
    <tr>
        <td id="hp"></td>
        <td id="attack"></td>
        <td id="defense"></td>
        <td id="sp_atk"></td>
        <td id="sp_def"></td>
        <td id="speed"></td>
        <td id="total"></td>
    </tr>
</table><br />
<span class="sctTitle">Descriptions</span><div id="descriptions" class="itemContainer"></div><br />
<table id="miscStats">
    <tr>
        <th>Catch Rate:</th><td id="catch_rate"></td>
    </tr>
    <tr>
        <th>Egg Cycles:</th><td id="egg_cycles"></td>
    </tr>
    <tr>
        <th>EV Yield:</th><td id="ev_yield"></td>
    </tr>
    <tr>
        <th>EXP Yield:</th><td id="exp"></td>
    </tr>
    <tr>
        <th>Growth Rate:</th><td id="growth_rate"></td>
    </tr>
    <tr>
        <th>Base Happiness:</th><td id="happiness"></td>
    </tr>
    <tr>
        <th>Height:</th><td id="height"></td>
    </tr>
    <tr>
        <th>Weight:</th><td id="weight"></td>
    </tr>
    <tr>
        <th>M/F Ratio:</th><td id="male_female_ratio"></td>
    </tr>
</table><br />
<span class="sctTitle">Abilities</span><div id="abilities" class="itemContainer"></div><br />
<span class="sctTitle">Evolutions</span><div id="evolutions" class="itemContainer"></div><br />
<span class="sctTitle">Egg Groups</span><div id="egg_groups" class="itemContainer"></div><br />
<div id="moves">
    <span class="sctTitle">Tutor Moves</span>
    <div...

CSS

body
{
    /* opacity: 0.3; */
    font-family: sans-serif;
}

.sctTitle
{
    font-weight: bold;
}

.itemContainer
{
    border: solid #666 1px;
}

#page_content
{
    background-color: #CCC;
    border-radius: 5px;
    padding: 10px;
    width: 400px;
    margin: 0 auto;
    display: none;
}

#name
{
    font-size: 34px;
}

#pokemonChooser
{
    max-width: 100%;
    overflow-x: hidden;
    text-align: center;
    margin-bottom: 10px;
}

#pokeSelector
{
    width: 310px;
}

#pokeSearchButton
{
    width: 100px;
}

#stats
{
    margin: 0 auto;
    text-align: center;
}

#stats td
{
    width: 50px;
}

#miscStats
{
    margin: 0 auto;
}
#miscStats td, #miscStats th
{
    width: 150px;
    text-align: left;
}

#sprites
{
    text-align: center;
    height: 120px;
}

#sprites img
{
    display: none;
}

#sprites .current
{
    display: inline;
}

JavaScript

var baseUrl = "http://pokeapi.co";
var api = "api";
var version = "v1";
var resources = {
    "pokedex":"pokedex",
    "pokemon":"pokemon",
    "type":"type",
    "move":"move",
    "ability":"ability",
    "egg":"egg",
    "description":"description",
    "sprite":"sprite",
    "game":"game"
};
var id = "1";
var curPokemon = "";

var loading = [];

function main()
{
    // enableConsole(400);
    populateSelectorFromApi("/api/v1/pokedex/1/");
    
    $("#pokeSearchButton").click(function()
	{
        $("#page_content").css("display", "block");
        displayPokemonFromApi($("#pokeSelector").val());
        curPokemon = $("#pokeSelector option:selected").text();
        updateSearchButton();
    });
    
    $("#sprites").click(function()
    {
        if ($("#sprites img").length > 1)
        	showNextSprite();
    });
    
    $("#pokeSelector").change(function()
    {
        updateSearchButton();
    });
}

function makeUrl(objects)
{
    if (typeof objects !== "object")
    {
        var errorMsg = "makeURL only accepts parameters of type 'object', not '" + typeof objects + "'";
        console.log(errorMsg);
        throw errorMsg;
    }
    for (var i = 0; i < objects.length; i++)
    {
        if (typeof objects[i] === "undefined")
        {
            var errorMsg = "One of array elements makeUrl received was undefined.";
            console.log(errorMsg);
            throw errorMsg;
        }
    }
    
    return objects.join("/");
}

function clearPokemon()
{
    $("#name").html("");
    $("#species").html("");
    $("#sprites").html("").css("cursor", "default");
    $("#types").html("");
    $("#national_id").html("");
    $("#pkdx_id").html("");
    $("#hp").html("");
    $("#attack").html("");
    $("#defense").html("");
    $("#sp_atk").html("");
    $("#sp_def").html("");
    $("#speed").html("");
    $("#total").html("");
    $("#descriptions").html("");
    $("#abilities").html("");
    $("#evolutions").html("");
   ...