Tutorials

Build Random Pokemon Generator Using JavaScript, HTML5 & CSS3

Random Pokemon Generator

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];
 });
}

Related posts:

  1. Build Random Song Lyrics Generator Using JavaScript HTML5 CSS3
  2. Find Random Lucky Draw Number Using Python 3 & random Module
  3. Build English Dictionary App Using JavaScript HTML5 CSS3
  4. Build File Downloader From URL Using JavaScript HTML5 CSS3
  5. Create Digital Alarm Clock With Ringtone & Custom Icons in JavaScript HTML5 CSS3
  6. Angular 13 ngx-cookie-service Generate Random Cookie & X-Auth Token
  7. Build Vorici Chromatic Calculator Using HTML5 and JavaScript
  8. Build Port Scanner For Domain Name in Python 3 pyfiglet
  9. Flutter Build PDF Documents Viewer From URL Using Syncfusion
  10. Build Ping Pong Game Using OpenGL and C Programming Code
  11. jsPDF Html2Canvas Tutorial: Convert Div With Attribute Hidden to PDF and Print it in Browser Using HTML5 and JavaScript
  12. JavaScript Keylogger Tutorial | How to Make a Simple Keylogger in JavaScript
  13. Create PDF Using Dynamic HTML5 Template in Python 3 Flask pdfkit
  14. JavaScript Code Plays Google Dinosaur/T-Rex Game Automatically
  15. PHP 7 FPDF Example: Create PDF Document From Text File Using Javascript
  16. PHP 7 jsPDF Html2Canvas Example: Send Generated PDF as Email Attachment to Client Using JavaScript
  17. JavaScript Word Guessing Game Source Code
  18. Find All Words Which are Greater Than Given Length X in String Using JavaScript
  19. PHP to JavaScript Converter Online Full Source Code
  20. jsPDF .fromHTML() Convert HTML Div Paragraphs to PDF in JavaScript
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.

Leave a Comment
Share
Published by
Furqan
September 7, 2022 9:29 am

Recent Posts

How can IT Professionals use ChatGPT?

If you're reading this, you must have heard the buzz about ChatGPT and its incredible…

September 2, 2023

ChatGPT in Cybersecurity: The Ultimate Guide

How to Use ChatGPT in Cybersecurity If you're a cybersecurity geek, you've probably heard about…

September 1, 2023

Add Cryptocurrency Price Widget in WordPress Website

Introduction In the dynamic world of cryptocurrencies, staying informed about the latest market trends is…

August 30, 2023

Best Addons for The Events Calendar Elementor Integration

The Events Calendar Widgets for Elementor has become easiest solution for managing events on WordPress…

August 30, 2023

Create Vertical Timeline in Elementor: A Step-by-step Guide

Introduction The "Story Timeline" is a versatile plugin that offers an innovative way to present…

August 30, 2023

TranslatePress Addon for Automate Page Translation in WordPress

Introduction In today's globalized world, catering to diverse audiences is very important. However, the process…

August 30, 2023