Build Random Pokemon Generator Using JavaScript, HTML5 & CSS3

In this tutorial, I’ll teach you how to create a random pokemon generator. I will use JavaScript, HTML5, and CSS3 to build this random pokemon generator.

Random Pokemon Generator Source Code

index.html

<!DOCTYPE html>
<html>
 <head>
  <title>Random Pokemon Generator - Edopedia</title>
  <link type="text/css" rel="stylesheet" href="./style.css" />
  <script src="./script.js"></script>
 </head>
 
 <body>
  <!-- fun with the poke-api!-->
  <!-- more animations to come soon :)-->
  <!-- find me on twitter: @flangerhanger-->
  <!-- open in desktop, or full screen on mobile (close the editor windows) for best effect-->
  <div id="page">
   <h1 class="title"> </h1>
   <div id="pokeball-container">
    <div id="ball"></div><button id="submit-number" type="submit"></button>
    <div id="shadow"></div>
   </div>
   <div id="characters"></div>
  </div>
 </body>
</html>

style.css

@import url("https://fonts.googleapis.com/css2?family=Fredoka+One&family=Raleway:wght@600&display=swap");
:root {
  --size: 50;
  --unit: calc((var(--size) / 100) * 1vmin);
  font-family: "Raleway", sans-serif;
}
:root * {
  margin: 0;
}
#page {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #323235;
}
#characters {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  visibility: hidden;
  height: calc(170 * var(--unit));
  width: calc(120 * var(--unit));
  background: white;
  border-radius: 8% / 6%;
  border: calc(4 * var(--unit)) solid whitesmoke;
  box-shadow: 1em 1em 2em black;
  transform: rotate(8deg);
  transition: box-shadow 1s ease;
}
#characters:hover {
  box-shadow: 4em 4em 2em black;
}
#characters h2 {
  color: #3a3a3f;
  letter-spacing: calc(2 * var(--unit));
  font-size: calc(10 * var(--unit));
  margin: 8% 0 2% 6%;
}
#characters h3 {
  font-size: calc(9 * var(--unit));
  text-align: right;
  margin-right: 5%;
}
#characters p {
  color: #3a3a3f;
  letter-spacing: calc(1 * var(--unit));
  font-size: calc(5 * var(--unit));
  margin: 0% 8%;
}
#characters #inner {
  color: #3a3a3f;
  letter-spacing: calc(0.5 * var(--unit));
  font-size: calc(4 * var(--unit));
  margin: 0% 8%;
}
#characters .mediaContainer {
  height: 60%;
  background: linear-gradient(0deg, whitesmoke 1%, transparent);
  clip-path: polygon(0% 7%, 100% 0%, 100% 100%, 0% 100%);
}
img {
  width: 60%;
  height: auto;
  object-fit: contain;
  transform: translate(30%, 20%);
}
#pokeball-container {
  animation: wobble 3s infinite both;
  position: absolute;
}
#pokeball-container #shadow {
  animation-play-state: paused;
  width: calc(50 * var(--unit));
  height: calc(20 * var(--unit));
  background-color: black;
  opacity: 0.2;
  box-shadow: 0 0 calc(4 * var(--unit)) calc(2 * var(--unit)) black;
  position: absolute;
  bottom: -10%;
  left: 10%;
  z-index: -1;
  border-radius: 50%;
}
#pokeball-container button {
  display: block;
  height: calc(70 * var(--unit));
  width: calc(70 * var(--unit));
  background: linear-gradient(100deg, #b8b8b8 0%, white);
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
  border: none;
  transform: translate(0%, 50%);
  border-radius: 50%;
  -webkit-animation: wobble 2s infinite both;
}
#pokeball-container button::before {
  position: absolute;
  bottom: 48%;
  left: 0%;
  content: "";
  border-bottom: calc(4 * var(--unit)) solid #5e5c5c;
  height: calc(50 * var(--unit));
  width: calc(70 * var(--unit));
  background: linear-gradient(100deg, red 30%, #f77);
  z-index: 3;
}
#pokeball-container button::after {
  position: absolute;
  bottom: 37%;
  left: 38%;
  content: "";
  height: calc(10 * var(--unit));
  border-radius: 50%;
  width: calc(10 * var(--unit));
  border: calc(4 * var(--unit)) solid #5e5c5c;
  background: white;
  z-index: 3;
}
#pokeball-container button:active, #pokeball-container button:focus {
  border: none;
  outline: none;
}
#input {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.title {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(10 * var(--unit));
}
@-webkit-keyframes wobble {
  0%, 100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-30px) rotate(-6deg);
    transform: translateX(-30px) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateX(15px) rotate(6deg);
    transform: translateX(15px) rotate(6deg);
  }
  45% {
    -webkit-transform: translateX(-15px) rotate(-3.6deg);
    transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
    -webkit-transform: translateX(9px) rotate(2.4deg);
    transform: translateX(9px) rotate(2.4deg);
  }
  75% {
    -webkit-transform: translateX(-6px) rotate(-1.2deg);
    transform: translateX(-6px) rotate(-1.2deg);
  }
}
@keyframes wobble {
  0%, 100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-30px) rotate(-6deg);
    transform: translateX(-30px) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateX(15px) rotate(6deg);
    transform: translateX(15px) rotate(6deg);
  }
  45% {
    -webkit-transform: translateX(-15px) rotate(-3.6deg);
    transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
    -webkit-transform: translateX(9px) rotate(2.4deg);
    transform: translateX(9px) rotate(2.4deg);
  }
  75% {
    -webkit-transform: translateX(-6px) rotate(-1.2deg);
    transform: translateX(-6px) rotate(-1.2deg);
  }
}

script.js

const pokemonTypeColours = {
 ground: "#e7d39f",
 electric: "#fdd998",
 bug: "#cee397",
 dark: "#222831",
 dragon: "#8ac6d1",
 fairy: "#ffb6b9",
 fighting: "#ffc38b",
 fire: "#ff6363",
 flying: "#a4c5c6",
 ghost: "#827397",
 grass: "#b7efcd",
 ice: "#dae1e7",
 normal: "#eae7d9",
 poison: "#8566aa",
 psychic: "#efa8e4",
 rock: "#d2c6b2",
 steel: "#5f6769",
 water: "#9aceff"
};
var cardDiv = document.getElementById("characters");
var pokeBall = document.getElementById("pokeball-container");

function randomIdNumber() {
 return Math.floor(Math.random() * Math.floor(307));
}

function getCharacter(event) {
 event.preventDefault();
 let numberInput = document.getElementById("number-input");

 var pokemonId = randomIdNumber();
 if (pokemonId) {
  getCharacters(pokemonId);
 }
}

document
 .getElementById("submit-number")
 .addEventListener("click", getCharacter);

function getCharacters(pokemonId) {
 fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonId}/`)
  .then((response) => response.json())
  .then((data) => showCard(data))
  .catch((error) => console.log(error));
}

function getMoveData(url) {
 fetch(url)
  .then((response) => response.json())
  .then((data) => showMoveData(data))
  .catch((error) => console.log(error));
}

function showCard(data) {
 pokeBall.style.display = "none";
 cardDiv.innerHTML = null;

 var pokemonName = document.createElement("h2");
 pokemonName.textContent = `${data.name.toUpperCase()}`;

 let mediaContainer = document.createElement("div");
 mediaContainer.setAttribute("class", "mediaContainer");

 let pokemonImage = document.createElement("img");
 pokemonImage.setAttribute(
  "src",
  `https://pokeres.bastionbot.org/images/pokemon/${data.id}.png`
 );
 pokemonImage.setAttribute("alt", data.name);

 cardDiv.appendChild(pokemonName);
 mediaContainer.appendChild(pokemonImage);
 cardDiv.appendChild(mediaContainer);

 let pokemonType = data.types[0].type.name;
 let pokemonTypeTitle = document.createElement("h3");
 pokemonTypeTitle.textContent = pokemonType;
 cardDiv.appendChild(pokemonTypeTitle);
 getMoveData(data.moves[0].move.url);

 setBackgroundColour(mediaContainer, pokemonType);
 setTextColour([pokemonTypeTitle], pokemonType);
 cardDiv.style.visibility = "visible";
}

function showMoveData(data) {
 var pokemonMoves = data.name;
 var cardBodyText = document.createElement("div");
 var moveData = data.flavor_text_entries[2].flavor_text;
 cardBodyText.innerHTML = `<p>${pokemonMoves.toUpperCase()}</p><br><p id="inner">${moveData}</p>`;
 cardDiv.appendChild(cardBodyText);
}

function reset() {
 cardDiv.style.visibility = "hidden";
 pokeBall.style.display = "block";
}

cardDiv.addEventListener("click", reset);

function setBackgroundColour(element, data) {
 element.style.background = `linear-gradient(0deg, white 10%, ${pokemonTypeColours[data]})`;
}

function setTextColour(element, data) {
 element.forEach((item) => {
  item.style.color = pokemonTypeColours[data];
 });
}

Furqan

Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.