Random Pokemon Generator

Build Random Pokemon Generator Using JavaScript, HTML5 & CSS3

by

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

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.