JavaScript Pokemon List

index.html

<h1>Pokedex</h1>
<div id="poke_container" class="poke-container">

</div>

javascript-pokemon-list.markdown

JavaScript Pokemon List

A Html website listing 150 pokemon from the first Pokemon series.

A Pen by Lwandile Rozani on CodePen.

License.

script.js

const poke_container = document.getElementById("poke_container");
const pokemon_number = 150;

const colors = {
  fire: '#FDDFDF',
  grass: '#DEFDE0',
  electric: '#FCF7DE',
  water: '#DEF3FD',
  ground: '#f4e7da',
  rock: '#d5d5d4',
  fairy: '#fceaff',
  poison: '#98d7d5',
  bug: '#f8d5a3',
  dragon: '#97b3e6',
  psychic: '#eaeda1',
  flying: '#F5F5F5',
  fighting: '#E6E0D4',
  normal: '#F5F5F5'
};

main_types = Object.keys(colors);

const fetchPokemon = async () => {
  for (let i = 1; i <= pokemon_number; i++) {
    await getPokemon(i);
  }
};

const getPokemon = async (id) => {
  const url = `https://pokeapi.co/api/v2/pokemon/${id}`;
  const res = await fetch(url);
  const pokemon = await res.json();
  createPokemonCard(pokemon);
};

fetchPokemon();

function createPokemonCard(pokemon) {
  const pokemonEl = document.createElement("div");
  pokemonEl.classList.add("pokemon");
  
const poke_types = pokemon.types.map(el => el.type.name);
const type = main_types.find(
  type => poke_types.indexOf(type) > -1
);
  
const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1); 
  
const color = colors[type];
  
 pokemonEl.style.backgroundColor = color;

  const pokeInnerHTML = `
    <div class="img-container">
    <img src="https://cdn.traction.one/pokedex/pokemon/${pokemon.id}.png" />
    </div>
    <div class="info">
    <span class="number">#${pokemon.id.toString().padStart(3, '0')}</span>
    <h3>${name}</h3>
    <small class="type">Type: <span>${type}</span></small>
    </div>
  `;

  pokemonEl.innerHTML = pokeInnerHTML;

  poke_container.appendChild(pokemonEl);
}

style.css

@import url("https://fonts.googleapis.com/css?family-lato: 300, 400 & display = swap");

* {
  box-sizing: border-box;
}

body {
  background: #efefbb;
  background: -webkit-linear-gradient(to right, #d4d3dd, #efefbb);
  background: linear-gradient(to right, #d4d3dd, #efefbb);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "lato";
  margin: 0;
}

h1 {
  letter-spacing: 3px;
}

.poke-container {
  display: flex;
  flex-wrap: wrap;
  align-items: space-between;
  justify-content: center;
  margin: 0 auto;
  max-width: 1200px;
}

.pokemon {
  background-color: #eee;
  border-radius: 20px;
  box-shadow: 0 3px 15px rgba(100, 100, 100, 0,5);
  padding: 20px;
  margin: 10px;
  text-align: center;
}

.pokemon .img-container {
  borde-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  height: 120px;
  width: 120px;
}

.pokemon .img-container img {
  margin-top: 20px;
  max-width: 90%;
}

.pokemon .info {
  margin-top: 20px;
}

.pokemon .number {
  background-color: #fff;
  border-radius: 10px;
  font-size: 0.8em;
  padding: 5px 10px;
}

.pokemon .name {
  margin: 15px;
  letter-spacing: 1px;
}