Pokedex Website/index.html · web-scripting

<!DOCTYPE html>
<html>
  <head>
    <title>Essam's Pokedex</title>

    <link rel="stylesheet" href="main.css" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="http://fonts.cdnfonts.com/css/pokemon-solid" rel="stylesheet" />

    <script>
      //Creating Variables

      const ISOK = 200;
      var pokemonObject;
      var pokemonID;

      //Function to send GET request to URL provided and assign the returned parsed JSON to the pokemonObject

      function getJSONAsync(url) {
        var request = new XMLHttpRequest();

        request.onload = function () {
          if (request.status === ISOK) {
            pokemonObject = JSON.parse(request.responseText);
          }
        };
        request.open("GET", url, true);
        request.send();
      }

      //Function that is called onload in the body which assigns the request URL to variable and calls getJSONAsync() using it

      function getDataAsync() {
        var pokeURL =
          "https://raw.githubusercontent.com/Biuni/PokemonGO-Pokedex/master/pokedex.json";
        getJSONAsync(pokeURL);
      }

      //Function to retrieve the pokemon information using the pokemon id the user inputted which gets called on button click

      function getPokemonInfo() {
        //Getting user input from element and parsing Int then clearing element

        pokemonID = document.getElementById("userPokeID").value;
        pokemonID = parseInt(pokemonID);
        document.getElementById("userPokeID").value = "";

        //Validating user input and outputting pokemon information or error based on data validation

        if (pokemonID >= 1 && pokemonID <= 151) {
          document.getElementById("retrieveNav").innerHTML = "";
          this.num = pokemonObject.pokemon[pokemonID - 1].num;
          this.name = pokemonObject.pokemon[pokemonID - 1].name;
          this.height = pokemonObject.pokemon[pokemonID - 1].height;
          this.weight = pokemonObject.pokemon[pokemonID - 1].weight;
          document.getElementById("pokeImage").innerHTML =
            '<img src="' + pokemonObject.pokemon[pokemonID - 1].img + '">';
          document.getElementById("pokeInfo").innerHTML =
            "<p1>" +
            "Pokemon Number: " +
            this.num +
            "<br>Name: " +
            this.name +
            "<br>Height: " +
            this.height +
            "<br>Weight: " +
            this.weight +
            "</p1>";
        }

        //Outputting error
        else {
          document.getElementById("retrieveNav").innerHTML =
            '<div id="errorMessage">Please enter a valid pokemon ID.</div>';
          document.getElementById("pokeInfo").innerHTML = "";
          document.getElementById("pokeImage").innerHTML = "";
        }
      }

      //Function to get and output previous pokemon based on current pokemon ID while validating if there is a previous pokemon

      function getPrevious() {
        if (pokemonID - 1 >= 1 && pokemonID - 1 <= 150) {
          pokemonID--;
          document.getElementById("retrieveNav").innerHTML = "";
          this.num = pokemonObject.pokemon[pokemonID - 1].num;
          this.name = pokemonObject.pokemon[pokemonID - 1].name;
          this.height = pokemonObject.pokemon[pokemonID - 1].height;
          this.weight = pokemonObject.pokemon[pokemonID - 1].weight;
          document.getElementById("pokeImage").innerHTML =
            '<img src="' + pokemonObject.pokemon[pokemonID - 1].img + '">';
          document.getElementById("pokeInfo").innerHTML =
            "<p1>" +
            "Pokemon Number: " +
            this.num +
            "<br>Name: " +
            this.name +
            "<br>Height: " +
            this.height +
            "<br>Weight: " +
            this.weight +
            "</p1>";
        }
      }

      //Function to get and output next pokemon based on current pokemon ID while validating if there is a next pokemon

      function getNext() {

        if (pokemonID + 1 >= 2 && pokemonID + 1 <= 151) {
          pokemonID++;
          document.getElementById("retrieveNav").innerHTML = "";
          this.num = pokemonObject.pokemon[pokemonID - 1].num;
          this.name = pokemonObject.pokemon[pokemonID - 1].name;
          this.height = pokemonObject.pokemon[pokemonID - 1].height;
          this.weight = pokemonObject.pokemon[pokemonID - 1].weight;
          document.getElementById("pokeImage").innerHTML =
            '<img src="' + pokemonObject.pokemon[pokemonID - 1].img + '">';
          document.getElementById("pokeInfo").innerHTML =
            "<p1>" +
            "Pokemon Number: " +
            this.num +
            "<br>Name: " +
            this.name +
            "<br>Height: " +
            this.height +
            "<br>Weight: " +
            this.weight +
            "</p1>";
        }
      }
    </script>
  </head>

  <body onload="getDataAsync()">
    <div id="wrap">
      <header>
        <h1>Pokedex</h1>
      </header>
      <div>
        <input
          type="text"
          id="userPokeID"
          placeholder="  enter a pokemon id..."
        />

        <!--Note: buttons need to be click anywhere but the top edge to activate due to the way they are designed.
        if you click the top edge it will activate the press down animation but not actually fully click the button to activate-->

        <button type="button" onclick="getPokemonInfo();">Retrieve</button
        ><br />
      </div>
      <div id="retrieveNav"></div>
      <div id="pokeImage"></div>
      <div id="pokeInfo"></div>
      <div id="navButtons">
        <button type="button" id="nextButton" onclick="getPrevious();">
          Previous Pokemon
        </button>
        <button type="button" id="previousButton" onclick="getNext();">
          Next Pokemon
        </button>
      </div>
    </div>
  </body>
</html>