A Pen by Anthony Welc

Thumbnail
This awesome code was written by AnthonyWelc, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright AnthonyWelc ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Anthony Welc</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
  
  
</head>

<body>

  <ul></ul>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/AnthonyWelc/a-pen-by-anthony-welc-dRLLZg */
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

var para = document.querySelector('ul');
var pokedex = [];

fetch('https://raw.githubusercontent.com/Biuni/PokemonGO-Pokedex/master/pokedex.json').then(function (res) {
  return res.json();
}).then(function (resJson) {
  return pokedex.push.apply(pokedex, _toConsumableArray(resJson.pokemon));
}).then(function (pokedex) {
  return pokedex.map(function (pokemon) {
    afficherPokemon(pokemon.name, pokemon.img, pokemon.id);
    console.log(pokedex[0].name);
  });
});

function afficherPokemon(name, img, id) {
  var item = document.createElement('li');
  item.setAttribute('data-id', id);
  var html = '<img src="' + img + '" title="' + name + '"/>' + name;
  item.innerHTML = html;
  para.appendChild(item);
  item.onclick = afficherDetails;
}

function afficherDetails() {
  var id = this.getAttribute('data-id') - 1;
  var html = '\n    ' + pokedex.name + '\n  ';
  console.log(html);
}

Comments