Pokedex API- Finished!! =^.^=

index.html

<div class="content">
  <div class="message">For better view: Click Change View -> Full Page View</div>
  <button onclick="showTutorial()" class="tutorial-button">Show / Hide instructions</button>
  <div class="pokedex">
    <div id="div_light" class="is-disabled turnOnOff pokedex-light"></div>
    <div id="div_screen" class="pokedex-screen"></div>
    <div id="div_error" class="pokedex-error">Pokemon not found!<br>Try again!</div>
    <div id="div_loader" class="loader"></div>
    <div id="div_data" class="is-disabled turnOnOff pokedex-data">
      <p class="pokedex-data-text">ID: <span id="text_id"></span></p>
      <p class="pokedex-data-text">Name: <span id="text_name"></span></p>
      <p class="pokedex-data-text">Ability: <span id="text_ability"></span></p>
      <p class="pokedex-data-text">Type: <span id="text_type"></span></p>
    </div>
    <img class="is-disabled turnOnOff pokedex-img" id="img" src="" alt="">
    <button id="btn_on" onclick="turnOnPokedex()" class="pokedex-button-on">ON</button>
    <input class="is-disabled turnOnOff pokedex-input" type="text" id="pokeInput">
    <button id="btn_go" class="is-disabled turnOnOff pokedex-button" onclick="pokeSubmit()">Go</button>
    <button id="btn_shiny" class="is-disabled turnOnOff pokedex-button-shiny">Shiny</button>
    <table class="is-disabled turnOnOff pokedex-table">
      <tr>
        <td class="pokedex-table-cell"><div class="randomNumber"></div></td>
        <td class="pokedex-table-cell"><div class="randomNumber"></div></td>
        <td class="pokedex-table-cell"><div class="randomNumber"></div></td>
        <td class="pokedex-table-cell"><div class="randomNumber"></div></td>
        <td class="pokedex-table-cell"><div class="randomNumber"></div></td>
      </tr>
      <tr>
        <td class="pokedex-table-cell"><div class="randomNumber"></div></td>
        <td class="pokedex-table-cell"><div class="randomNumber"></div></td>
        <td class="pokedex-table-cell"><div class="randomNumber"></div></td>
        <td class="pokedex-table-cell"><div class="randomNumber"></div></td>
        <td class="pokedex-table-cell"><div class="randomNumber"></div></td>
      </tr>
    </table>
    <button id="btn_zoom-in" class="is-disabled turnOnOff pokedex-button-zoom-in">+</button>
    <button id="btn_zoom-out" class="is-disabled turnOnOff pokedex-button-zoom-out">-</button>
    <button id="btn_clear" class="pokedex-button-clear turnOnOff is-disabled">x</button>
    <div id="div_tutorial" class="tutorial">
      <div class="tutorial-bubble tutorial-clear">Press for clear data <span class="tutorial-arrow">&rarr;</span></div>
      <div class="tutorial-bubble tutorial-bubble-blue tutorial-on">Turn on the Pokedex! <span class="tutorial-arrow">&rarr;</span></div>
      <div class="tutorial-bubble tutorial-shiny">Get shiny mode! <span class="tutorial-arrow">&rarr;</span></div>
      <div class="tutorial-bubble tutorial-random"><span class="tutorial-arrow">&larr;</span> Get random Pokemon!</div>
      <div class="tutorial-bubble tutorial-input">Write a name of<br>a Pokemon or a<br>random number <span class="tutorial-arrow">&rarr;</span></div>
      <div class="tutorial-bubble tutorial-zoom"><span class="tutorial-arrow">&larr;</span> Press for image zoom in and out</div>
    </div>
  </div>
</div>

pokedex-api-finished.markdown

Pokedex API- Finished!! =^.^=

Work for #CodepenChallenge, in this App you can search your favorite Pokemon for get all his information, view shiny mode and zoom-in and out on the photo. You can search for a random Pokemon too.

This work is made with jQuery and #PokeAPI.

A Pen by Brezo Lozano on CodePen.

License.

script.js

var isOn, haveResult, btn_shiny, btn_zoomIn, btn_zoomOut, btn_go, div_screen, 
div_data, btn_on, img, disabledElements, btn_clear, textId, textName, textAbility, textType, param, div_light, div_tutorial, div_error;

$(function() {
  isOn = false;
  haveResult = false;
  img = $('#img');
  btn_shiny = $('#btn_shiny');
  btn_zoomIn = $('#btn_zoom-in');
  btn_zoomOut = $('#btn_zoom-out');
  btn_go = $("#btn_go");
  div_screen = $('#div_screen');
  div_data = $('#div_data');
  btn_on = $('#btn_on');
  btn_clear = $('#btn_clear');
  textId = $('#text_id');
  textName = $('#text_name');
  textAbility = $('#text_ability');
  textType = $('#text_type');
  param = $('#pokeInput');
  div_light = $('#div_light');
  div_tutorial = $('#div_tutorial');
  div_error = $('#div_error');
  disabledElements = document.querySelectorAll('.turnOnOff');
  
  btn_zoomIn.click(function() {
    if(!isOn) {return;}
    img.addClass("zoom-in");
  })

  btn_zoomOut.click(function() {
    if(!isOn) {return;}
    img.removeClass("zoom-in");
  })
});

function showTutorial() {
  div_tutorial.toggle(600);
};

function enableElements() {
  for (var i = 0; i < disabledElements.length; i++) {
    disabledElements[i].classList.remove('is-disabled');
  }
}

function disableElements() {
  for (var i = 0; i < disabledElements.length; i++) {
    disabledElements[i].classList.add('is-disabled');
  }
}

function turnOnPokedex() {
  clearData();
  if(!isOn) {
    enableElements();
    randomNumbersData();
    div_screen.addClass("is-enabled");
    btn_on.html("OFF");
    isOn = true;
  } else {
    disableElements()
    div_screen.removeClass("is-enabled");
    btn_on.html("ON");
    isOn = false;
    $(".randomNumber").each(function (index, element) {
      $(element).off("click");
    });
  }
}

function clearData() {
  if(!isOn) {return;}
  haveResult = false;
  img.attr('src', '');
  textId.html('');
  textName.html('');
  textAbility.html(''); 
  textType.html('');
  param.val('');
}

function randomNumbersData() {
  $(".randomNumber").each(function (index, element) {
    var number = Math.floor(Math.random() * 100) + 1;
    $(element).html(number);
    $(element).click(function() {
      getRandomNumber(number);
    }); 
  });
};

function hideLoader() {
  $('#div_loader').fadeOut();
  img.fadeIn();
}

function pokeSubmit(){
  if(!isOn) {return;}
  var inputValue = $.trim(param.val());
  if (inputValue === '') return;
  div_error.hide();
  img.hide();
  $('#div_loader').show();
  
  var pokeURL = "https://pokeapi.co/api/v2/pokemon/" + param.val();

  $.ajax({
    type: "GET",
    url: pokeURL,
    success: function(data){ 
      ajaxSuccess(data);
      haveResult = true;
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
       ajaxError();
       haveResult = false;
    }
  });  
}

function ajaxSuccess(data){
  var imageURI = data.sprites.front_default;
  var imageURIShiny = data.sprites.front_shiny;
  var id = data.id;  
  var name = data.name;
  var ability = data.abilities;
  var type = data.types;
  var isShiny = false;

  img.attr('src', imageURI);
  textId.html(id);
  textName.html(name);
  textAbility.html(ability[0].ability.name); 
  textType.html(type[0].type.name);

  hideLoader();

  btn_shiny.click(function() {
    if(!haveResult) {return;}
    if(!isShiny) {
      btn_shiny.html("Normal");
      img.attr('src', imageURIShiny);
      isShiny = true;
    } else {
      btn_shiny.html("Shiny");
      img.attr('src', imageURI);
      isShiny = false;
    }
  });

  btn_clear.click(function() {
    clearData();
  });
}

function ajaxError(data){
  hideLoader();
  clearData();
  div_error.show();
}

function getRandomNumber(number) {
  param.val(number);
  pokeSubmit();
}

scripts

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

style.css

body {
  margin: 0;
  padding-top: 50px;
  height: 100vh;
  background: #ffca00 url("http://brezomadrid.es/Codepen-resources/img/pokedex-wallpaper.jpg") center bottom no-repeat;
  background-size: cover;
  font-family: 'Consolas', Arial;
}
.content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.message {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.4);
  padding: 10px;
  border-radius: 0 0 15px 0; 
  z-index: 9;
}
.tutorial-button {
  position: absolute;
  top: 0;
  right: 0;
  font-family: 'Consolas', Arial;
  font-size: 20px;
  color: white;
  border-radius: 0 0 0 15px;
  background: #f0072d;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
  outline: none;
}

.pokedex {
  position: relative;
  width: 786px;
  height: 577px;
  background: url('http://brezomadrid.es/Codepen-resources/img/pokedex.png') no-repeat;
}
.pokedex-screen {
  width: 237px;
  height: 158px;
  background: #002923;
  position: absolute;
  top: 169px;
  left: 73px;
  border-radius: 10px;
  transition: 0.5s;
}
.pokedex-error {
  display: none;
  text-align: center;
  position: absolute;
  top: 220px;
  left: 115px;
}
.pokedex-light {
  width: 58px;
  height: 60px;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  left: 50px;
  animation-duration: 1s;
  animation-name: light;
  animation-iteration-count:infinite;
}
.pokedex-input {
  width: 110px;
  height: 36px;
  bottom: 76px;
  right: 221px;
  border-radius: 8px;
  position: absolute;
  background: white;
  border: 2px solid #002923;
  color: #002923;
  font-size: 15px;
  outline: none;
  text-align: center;
  transition: 0.5s;
}
.pokedex-button {
  position: absolute;
  bottom: 80px;
  right: 96px;
  height: 32px;
  width: 100px;
  background: transparent;
  border: none;
  color: white;
  font-size: 30px;
  line-height: 15px;
  cursor: pointer;
  outline: none;
}
.pokedex-button-shiny {
  position: absolute;
  bottom: 75px;
  left: 100px;
  width: 110px;
  height: 45px;
  border: none;
  background: #00ad5e;
  color: white;
  font-family: 'Consolas', Arial;
  font-size: 30px;
  cursor: pointer;
  outline: none;
}
.pokedex-button-zoom-in {
  position: absolute;
  bottom: 150px;
  right: 285px;
  width: 40px;
  background: transparent;
  border: none;
  font-family: 'Consolas', Arial;
  font-size: 35px;
  font-weight: bolder;
  outline: none;
  cursor: pointer;
}
.pokedex-button-zoom-out {
  position: absolute;
  bottom: 150px;
  right: 237px;
  width: 40px;
  background: transparent;
  border: none;
  font-family: 'Consolas', Arial;
  font-size: 35px;
  font-weight: bolder;
  outline: none;
  cursor: pointer;
}
.pokedex-button-on {
  position: absolute;
  bottom: 143px;
  left: 45px;
  height: 45px;
  width: 45px;
  border: none;
  background: transparent;
  color: white;
  font-family: 'Consolas', Arial;
  font-size: 21px;
  font-weight: bolder;
  cursor: pointer; 
  outline: none;
}
.pokedex-button-clear {
  position: absolute;
  top: 337px;
  left: 95px;
  background: transparent;
  border: none;
  font-family: 'Consolas', Arial;
  font-weight: bolder;
  font-size: 27px;
  color: white;
  outline: none;
  cursor: pointer;
}
.pokedex-img {
  position: absolute;
  top: 200px;
  left: 145px;
  transition: 0.5s;
}
.pokedex-data {
  position: absolute;
  top: 190px;
  right: 100px;
  color: white;
  width: 225px;
}
.pokedex-data-text {
  margin: 0;
  color: white;
  font-size: 15px;
}
.pokedex-table {
  position: absolute;
  right: 90px;
  top: 290px;
  text-align: center;
  font-size: 20px;
  color: white;
  cursor: pointer;
}
.pokedex-table-cell {
  height: 30px;
  width: 43px;
}

.loader {
  display: none;
  width: 237px;
  height: 158px;
  top: 169px;
  left: 73px;
  border-radius: 10px;
  transition: 0.5s;
  position: absolute;
  z-index: 10;
  background: url('http://brezomadrid.es/Codepen-resources/img/pokeball-loader.gif') no-repeat;
  background-size: cover;
}

.tutorial {
  display: none;
}
.tutorial-bubble {
  background: white;
  display: inline-block;
  padding: 5px 10px;
  border-radius: 5px;
  position: absolute;
}
.tutorial-bubble-blue {
  background: #00a9f5;
  color: white;
}
.tutorial-clear {
  bottom: 203px;
  left: -132px;
}
.tutorial-on {
  bottom: 146px;
  left: -192px;
}
.tutorial-shiny {
  bottom: 78px;
  left: -90px;
}
.tutorial-random {
  bottom: 235px;
  right: -126px;
}
.tutorial-input {
  bottom: 77px;
  left: 287px;
}
.tutorial-zoom {
  bottom: 148px;
  right: -90px;
}
.tutorial-arrow {
  font-size: 25px;
  vertical-align: sub;
}

.is-enabled {
  background: transparent;
}
.is-disabled {
  opacity: 0;
  transition: 0.5s;
  cursor: initial;
}
.zoom-in {
  transform: scale(1.5);
}

@keyframes light {
  0% {
    background-color: #39beff4a;
    box-shadow: none;
  }
  50% {
    background-color: #39beff4a;
    box-shadow: 0 0 12px 8px white;
  }
  100% {
    background-color: #39beff4a;
    box-shadow: none;
  }
}