Pokemon Search | Pokemon API

index.html

<div class="container">
  <div class="searchBar">
    <form action="">
      <label for="pokemon">PokeSearch:</label>
      <input type="text" name="pokemon" id="search" placeholder="Ex: Charizard or 6">
    </form>
  </div>

  <div id="pokeOutput">
    <div class="top-container">
      <div class="image-container">
        <button type="button" name="left" id="leftBtn" class="changeBtn"><i class="fa fa-caret-square-o-left" aria-hidden="true"></i></button><button type="button" name="default" id="defaultBtn" class="bigBtn">Default</button><button type="button" name="Shiny"
          id="shinyBtn" class="bigBtn">Shiny</button><button type="button" name="left" id="rightBtn" class="changeBtn"><i class="fa fa-caret-square-o-right" aria-hidden="true"></i></button>

        <div class="poke-name-num">
          <span class="name poke-info"></span>
          <span class="idNum poke-info"></span>
        </div>

        <div class="size">
          <span class="poke-info"><span class="weight"></span></span>
          <span class="poke-info"><span class="height"></span></span>
        </div>

        <img src="" alt="" id="pokeImage">
        <div id="types"></div>
      </div>
    </div>

    <div class="bottom-container">

      <table>
        <tr>
          <th>Base</th>
          <th>Stats</th>
        </tr>
        <tr>
          <td>HP:</td>
          <td class="hp"></td>
        </tr>
        <tr>
          <td>Attack:</td>
          <td class="attack"></td>
        </tr>
        <tr>
          <td>Defense:</td>
          <td class="defense"></td>
        </tr>
        <tr>
          <td>Sp.Attack:</td>
          <td class="special-attack"></td>
        </tr>
        <tr>
          <td>Sp.Defense:</td>
          <td class="special-defense"></td>
        </tr>
        <tr>
          <td>Speed:</td>
          <td class="speed"></td>
        </tr>
      </table>
    </div>
  </div>
</div>

<footer>
  <p>Created with: <a href="https://pokeapi.co/">PokeAPI</a></p>
</footer>

pokemon-search-pokemon-api.markdown

Pokemon Search | Pokemon API

Search up Pokemon using their names or Pokédex number. Created with PokeAPI.

A Pen by Steven on CodePen.

License.

script.js

$(document).ready(function() {
  $("form").on("submit", function(e) {
    e.preventDefault();

    function createCORSRequest(method, url) {
      var xhr = new XMLHttpRequest();
      if ("withCredentials" in xhr) {
        // XHR for Chrome/Firefox/Opera/Safari.
        xhr.open(method, url, true);
      } else if (typeof XDomainRequest != "undefined") {
        // XDomainRequest for IE.
        xhr = new XDomainRequest();
        xhr.open(method, url);
      } else {
        // CORS not supported.
        xhr = null;
      }
      return xhr;
    }
    // Helper method to parse the title tag from the response.
    function getTitle(text) {
      return text.match("<title>(.*)?</title>")[1];
    }
    // Make the actual CORS request.
    function makeCorsRequest() {
      // This is a sample server that supports CORS.
      var url =
        "http://html5rocks-cors.s3-website-us-east-1.amazonaws.com/index.html";
      var xhr = createCORSRequest("GET", url);
      if (!xhr) {
        alert("CORS not supported");
        return;
      }
      // Response handlers.
      xhr.onload = function() {
        var text = xhr.responseText;
        var title = getTitle(text);
        alert("Response from CORS request to " + url + ": " + title);
      };
      xhr.onerror = function() {
        alert("Woops, there was an error making the request.");
      };
      xhr.send();
    }

    var userInput = $("#search").val();
    var url = "https://pokeapi.co/api/v2/pokemon/" + userInput;
    console.log(url);
    $.ajax({
      url: url,
      dataType: "json",
      method: "GET",
      success: function(data) {
        var name = data.forms[0].name,
          pokeImgFront = data.sprites.front_default,
          pokeImgBack = data.sprites.back_default,
          pokeImgShinyFront = data.sprites.front_shiny,
          pokeImgShinyBack = data.sprites.back_shiny,
          shiny = false,
          frontImg = true,
          speed = data.stats[0].base_stat,
          spDef = data.stats[1].base_stat,
          spAtk = data.stats[2].base_stat,
          def = data.stats[3].base_stat,
          atk = data.stats[4].base_stat,
          hp = data.stats[5].base_stat,
          id = "#" + data.id,
          weight = "<span class='stat'>Weight: </span>" + data.weight,
          height = "<span class='stat'>Height: </span>" + data.height,
          types = [];
        for (var i = 0; i < data.types.length; i++) {
          var type = data.types[i].type.name;
          types.push(type);
        }

        function pokemonType(types) {
          $("#types").html("");
          for (var i = 0; i < types.length; i++) {
            $("#types").append(
              "<div class='pokeType poke-info " +
                types[i] +
                "'>" +
                types[i] +
                " </div>"
            );
          }
        }

        $("#defaultBtn").click(function() {
          $("#pokeImage").attr("src", pokeImgFront);
          shiny = false;
          frontImg = true;
        });
        $("#shinyBtn").click(function() {
          $("#pokeImage").attr("src", pokeImgShinyFront);
          shiny = true;
          frontImg = true;
        });
        $(".changeBtn").click(function() {
          if (shiny == false && frontImg == true) {
            shiny = false;
            frontImg = false;
            $("#pokeImage").attr("src", pokeImgBack);
          } else if (shiny == false && frontImg == false) {
            shiny = false;
            frontImg = true;
            $("#pokeImage").attr("src", pokeImgFront);
          } else if (shiny == true && frontImg == true) {
            shiny = true;
            frontImg = false;
            $("#pokeImage").attr("src", pokeImgShinyBack);
          } else if (shiny == true && frontImg == false) {
            shiny = true;
            frontImg = true;
            $("#pokeImage").attr("src", pokeImgShinyFront);
          }
        });

        $(".name").html(name);
        $(".idNum").html(id);
        $("#pokeImage").attr("src", pokeImgFront);
        $(".hp").html(hp);
        $(".attack").html(atk);
        $(".defense").html(def);
        $(".special-attack").html(spAtk);
        $(".special-defense").html(spDef);
        $(".speed").html(speed);
        $(".weight").html(weight);
        $(".height").html(height);
        pokemonType(types);
        //console.log(data);
      } //SUCCESS
    }); //AJAX
  }); //FORM
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.scss

$pokeRed: #e8332a;
$pokeGrey: #bfbfc9;
$pokeBlue: #3661ac;
$pokeYellow: #ffcb08;

body {
  font-family: sans-serif;
  background-color: $pokeBlue;
  font-family: "Iceland", cursive;
}
.searchBar {
  padding: 20px 0;
  text-align: center;
  background-color: $pokeRed;
  border-radius: 8px 8px 0 0;
}
label {
  font-size: 1.3rem;
}
input[type="text"] {
  height: 40px;
  padding-left: 10px;
  font-family: "Iceland", cursive;
}
#pokeOutput {
  padding: 20px 50px 30px;
}
#pokeImage {
  display: block;
  margin: 20px 0;
  width: 180px;
  position: relative;
  left: -45px;
}
.base-title {
  font-size: 1.3rem;
  font-weight: 700;
}
.stat {
  font-weight: 700;
}
.poke-name-num {
  display: inline-block;
  float: left;
  margin-left: 5px;
}
.size {
  display: inline-block;
  float: right;
  margin-right: 5px;
}
.name {
  display: block;
  text-transform: capitalize;
  font-size: 1.6rem;
}
.poke-info {
  display: inline-block;
  margin-right: 2px;
}

.container {
  width: 450px;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  color: #000;
  border-radius: 15px;
  box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.75);
}

.image-container {
  height: 300px;
  background-color: $pokeGrey;
  white-space: nowrap;
  border: 1px solid $pokeRed;
  color: #fff;
  font-size: 1.2rem;
}
button {
  display: inline;
  margin: 0;
  background-color: #fff;
  color: $pokeRed;
  border: 1px solid $pokeRed;
  position: relative;
  left: 0px;
  outline: none;
  cursor: pointer;
}
button:hover {
  border: 2px solid $pokeRed;
}
button:active {
  background-color: #f4f1f1;
}
.bigBtn {
  height: 40px;
  width: 120px;
  font-weight: 700;
  position: relative;
  top: -2px;
}
.changeBtn {
  height: 40px;
  width: 54px;
  font-size: 1.5rem;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 1.2rem;
}

td,
th {
  border: 1px solid $pokeRed;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: $pokeRed;
}
.pokeType {
  padding: 5px;
  color: #fff;
  border-radius: 5px;
  text-transform: capitalize;
  margin-left: 5px;
  font-weight: 700;
}
.normal {
  background-color: #a8a878;
}
.grass {
  background-color: #78c850;
}
.ground {
  background-color: #e0c068;
}
.fighting {
  background-color: #c03028;
}
.rock {
  background-color: #b8a038;
}
.steel {
  background-color: #b8b8d0;
}
.fire {
  background-color: #f08030;
}
.electric {
  background-color: #f8d030;
}
.flying {
  background-color: #a890f0;
}
.psychic {
  background-color: #f85888;
}
.bug {
  background-color: #a8b820;
}
.dragon {
  background-color: #7038f8;
}
.water {
  background-color: #6890f0;
}
.ice {
  background-color: #98d8d8;
}
.poison {
  background-color: #a040a0;
}
.dark {
  background-color: #705848;
}
.ghost {
  background-color: #705898;
}
.fairy {
  background-color: #ffaec9;
}
footer {
  background-color: $pokeRed;
  text-align: center;
  position: fixed;
  left: 0px;
  bottom: 0px;
  height: 50px;
  width: 100%;
  color: #fff;
}

footer a {
  color: #fff;
  text-decoration: none;
}

footer a:hover {
  color: $pokeYellow;
}