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
HTML
x
23
23
1
2
<html>3
<head>4
<title>Random Pokemon Generator - Edopedia</title>5
<link type="text/css" rel="stylesheet" href="./style.css" />6
<script src="./script.js"></script>7
</head>8
9
<body>10
<!-- fun with the poke-api!-->11
<!-- more animations to come soon :)-->12
<!-- find me on twitter: @flangerhanger-->13
<!-- open in desktop, or full screen on mobile (close the editor windows) for best effect-->14
<div id="page">15
<h1 class="title"> </h1>16
<div id="pokeball-container">17
<div id="ball"></div><button id="submit-number" type="submit"></button>18
<div id="shadow"></div>19
</div>20
<div id="characters"></div>21
</div>22
</body>23
</html>style.css
CSS
1
193
193
1
@import url("https://fonts.googleapis.com/css2?family=Fredoka+One&family=Raleway:wght@600&display=swap");2
:root {3
--size: 50;4
--unit: calc((var(--size) / 100) * 1vmin);5
font-family: "Raleway", sans-serif;6
}7
:root * {8
margin: 0;9
}10
#page {11
display: flex;12
flex-direction: column;13
flex-wrap: nowrap;14
justify-content: center;15
align-items: center;16
height: 100vh;17
background: #323235;18
}19
#characters {20
display: flex;21
flex-direction: column;22
flex-wrap: wrap;23
justify-content: center;24
visibility: hidden;25
height: calc(170 * var(--unit));26
width: calc(120 * var(--unit));27
background: white;28
border-radius: 8% / 6%;29
border: calc(4 * var(--unit)) solid whitesmoke;30
box-shadow: 1em 1em 2em black;31
transform: rotate(8deg);32
transition: box-shadow 1s ease;33
}34
#characters:hover {35
box-shadow: 4em 4em 2em black;36
}37
#characters h2 {38
color: #3a3a3f;39
letter-spacing: calc(2 * var(--unit));40
font-size: calc(10 * var(--unit));41
margin: 8% 0 2% 6%;42
}43
#characters h3 {44
font-size: calc(9 * var(--unit));45
text-align: right;46
margin-right: 5%;47
}48
#characters p {49
color: #3a3a3f;50
letter-spacing: calc(1 * var(--unit));51
font-size: calc(5 * var(--unit));52
margin: 0% 8%;53
}54
#characters #inner {55
color: #3a3a3f;56
letter-spacing: calc(0.5 * var(--unit));57
font-size: calc(4 * var(--unit));58
margin: 0% 8%;59
}60
#characters .mediaContainer {61
height: 60%;62
background: linear-gradient(0deg, whitesmoke 1%, transparent);63
clip-path: polygon(0% 7%, 100% 0%, 100% 100%, 0% 100%);64
}65
img {66
width: 60%;67
height: auto;68
object-fit: contain;69
transform: translate(30%, 20%);70
}71
#pokeball-container {72
animation: wobble 3s infinite both;73
position: absolute;74
}75
#pokeball-container #shadow {76
animation-play-state: paused;77
width: calc(50 * var(--unit));78
height: calc(20 * var(--unit));79
background-color: black;80
opacity: 0.2;81
box-shadow: 0 0 calc(4 * var(--unit)) calc(2 * var(--unit)) black;82
position: absolute;83
bottom: -10%;84
left: 10%;85
z-index: -1;86
border-radius: 50%;87
}88
#pokeball-container button {89
display: block;90
height: calc(70 * var(--unit));91
width: calc(70 * var(--unit));92
background: linear-gradient(100deg, #b8b8b8 0%, white);93
clip-path: circle(50% at 50% 50%);94
clip-path: circle(50% at 50% 50%);95
border: none;96
transform: translate(0%, 50%);97
border-radius: 50%;98
animation: wobble 2s infinite both;99
}100
#pokeball-container button::before {101
position: absolute;102
bottom: 48%;103
left: 0%;104
content: "";105
border-bottom: calc(4 * var(--unit)) solid #5e5c5c;106
height: calc(50 * var(--unit));107
width: calc(70 * var(--unit));108
background: linear-gradient(100deg, red 30%, #f77);109
z-index: 3;110
}111
#pokeball-container button::after {112
position: absolute;113
bottom: 37%;114
left: 38%;115
content: "";116
height: calc(10 * var(--unit));117
border-radius: 50%;118
width: calc(10 * var(--unit));119
border: calc(4 * var(--unit)) solid #5e5c5c;120
background: white;121
z-index: 3;122
}123
#pokeball-container button:active, #pokeball-container button:focus {124
border: none;125
outline: none;126
}127
#input {128
width: 100%;129
display: flex;130
flex-wrap: wrap;131
justify-content: center;132
}133
.title {134
text-align: center;135
font-family: Arial, Helvetica, sans-serif;136
font-size: calc(10 * var(--unit));137
}138
@-webkit-keyframes wobble {139
0%, 100% {140
transform: translateX(0%);141
transform: translateX(0%);142
transform-origin: 50% 50%;143
transform-origin: 50% 50%;144
}145
15% {146
transform: translateX(-30px) rotate(-6deg);147
transform: translateX(-30px) rotate(-6deg);148
}149
30% {150
transform: translateX(15px) rotate(6deg);151
transform: translateX(15px) rotate(6deg);152
}153
45% {154
transform: translateX(-15px) rotate(-3.6deg);155
transform: translateX(-15px) rotate(-3.6deg);156
}157
60% {158
transform: translateX(9px) rotate(2.4deg);159
transform: translateX(9px) rotate(2.4deg);160
}161
75% {162
transform: translateX(-6px) rotate(-1.2deg);163
transform: translateX(-6px) rotate(-1.2deg);164
}165
}166
@keyframes wobble {167
0%, 100% {168
transform: translateX(0%);169
transform: translateX(0%);170
transform-origin: 50% 50%;171
transform-origin: 50% 50%;172
}173
15% {174
transform: translateX(-30px) rotate(-6deg);175
transform: translateX(-30px) rotate(-6deg);176
}177
30% {178
transform: translateX(15px) rotate(6deg);179
transform: translateX(15px) rotate(6deg);180
}181
45% {182
transform: translateX(-15px) rotate(-3.6deg);183
transform: translateX(-15px) rotate(-3.6deg);184
}185
60% {186
transform: translateX(9px) rotate(2.4deg);187
transform: translateX(9px) rotate(2.4deg);188
}189
75% {190
transform: translateX(-6px) rotate(-1.2deg);191
transform: translateX(-6px) rotate(-1.2deg);192
}193
}script.js
JavaScript
1
111
111
1
const pokemonTypeColours = {2
ground: "#e7d39f",3
electric: "#fdd998",4
bug: "#cee397",5
dark: "#222831",6
dragon: "#8ac6d1",7
fairy: "#ffb6b9",8
fighting: "#ffc38b",9
fire: "#ff6363",10
flying: "#a4c5c6",11
ghost: "#827397",12
grass: "#b7efcd",13
ice: "#dae1e7",14
normal: "#eae7d9",15
poison: "#8566aa",16
psychic: "#efa8e4",17
rock: "#d2c6b2",18
steel: "#5f6769",19
water: "#9aceff"20
};21
var cardDiv = document.getElementById("characters");22
var pokeBall = document.getElementById("pokeball-container");23
24
function randomIdNumber() {25
return Math.floor(Math.random() * Math.floor(307));26
}27
28
function getCharacter(event) {29
event.preventDefault();30
let numberInput = document.getElementById("number-input");31
32
var pokemonId = randomIdNumber();33
if (pokemonId) {34
getCharacters(pokemonId);35
}36
}37
38
document39
.getElementById("submit-number")40
.addEventListener("click", getCharacter);41
42
function getCharacters(pokemonId) {43
fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonId}/`)44
.then((response) => response.json())45
.then((data) => showCard(data))46
.catch((error) => console.log(error));47
}48
49
function getMoveData(url) {50
fetch(url)51
.then((response) => response.json())52
.then((data) => showMoveData(data))53
.catch((error) => console.log(error));54
}55
56
function showCard(data) {57
pokeBall.style.display = "none";58
cardDiv.innerHTML = null;59
60
var pokemonName = document.createElement("h2");61
pokemonName.textContent = `${data.name.toUpperCase()}`;62
63
let mediaContainer = document.createElement("div");64
mediaContainer.setAttribute("class", "mediaContainer");65
66
let pokemonImage = document.createElement("img");67
pokemonImage.setAttribute(68
"src",69
`https://pokeres.bastionbot.org/images/pokemon/${data.id}.png`70
);71
pokemonImage.setAttribute("alt", data.name);72
73
cardDiv.appendChild(pokemonName);74
mediaContainer.appendChild(pokemonImage);75
cardDiv.appendChild(mediaContainer);76
77
let pokemonType = data.types[0].type.name;78
let pokemonTypeTitle = document.createElement("h3");79
pokemonTypeTitle.textContent = pokemonType;80
cardDiv.appendChild(pokemonTypeTitle);81
getMoveData(data.moves[0].move.url);82
83
setBackgroundColour(mediaContainer, pokemonType);84
setTextColour([pokemonTypeTitle], pokemonType);85
cardDiv.style.visibility = "visible";86
}87
88
function showMoveData(data) {89
var pokemonMoves = data.name;90
var cardBodyText = document.createElement("div");91
var moveData = data.flavor_text_entries[2].flavor_text;92
cardBodyText.innerHTML = `<p>${pokemonMoves.toUpperCase()}</p><br><p id="inner">${moveData}</p>`;93
cardDiv.appendChild(cardBodyText);94
}95
96
function reset() {97
cardDiv.style.visibility = "hidden";98
pokeBall.style.display = "block";99
}100
101
cardDiv.addEventListener("click", reset);102
103
function setBackgroundColour(element, data) {104
element.style.background = `linear-gradient(0deg, white 10%, ${pokemonTypeColours[data]})`;105
}106
107
function setTextColour(element, data) {108
element.forEach((item) => {109
item.style.color = pokemonTypeColours[data];110
});111
}