#Project Folder Structure:
Let us take a quick look at the project structure. We have a project folder called – Pokemon Card Generator. Inside this folder, we have three files. The first one is the HTML document called index.html. Next one is the stylesheet named style.css, and the last one is the script file called script.js.
HTML:
The HTML consists of a container div that wraps the card div and the button element. We don’t have many other elements in HTML code as we will be generating them using Javascript.
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Pokemon Card Generator</title>
- <!-- Google Fonts -->
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"rel="stylesheet"/>
- <!-- Stylesheet -->
- <link rel="stylesheet" href="style.css" />
- </head>
- <body>
- <div class="container">
- <div id="card"></div>
- <button id="btn">Generate</button>
- </div>
- <!-- Script -->
- <script src="script.js"></script>
- </body>
- </html>
CSS:
Coming to the CSS Code, we do a CSS reset by removing the unwanted paddings and margins. We also centre the container using the transforms. We set the dimensions for the container and the card div.
For the pokemon image we set the width to 180px and max-height to 200px.
We style the span elements and place them inside the types div using the flex layout. We set the justify-content to space-around.
Similarly, we style the stats div and the button.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #eff3ff;
}
.container {
width: 350px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
#card {
position: relative;
width: 100%;
padding: 30px 20px;
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15);
border-radius: 10px;
}
#card img {
display: block;
width: 180px;
max-height: 200px;
position: relative;
margin: 20px auto;
}
.hp {
width: 80px;
background-color: #ffffff;
text-align: center;
padding: 8px 0;
border-radius: 30px;
margin-left: auto;
font-weight: 400;
}
.poke-name {
text-align: center;
font-weight: 600;
}
.types {
display: flex;
justify-content: space-around;
margin: 20px 0 40px 0;
}
.hp span,
.types span {
font-size: 12px;
letter-spacing: 0.4px;
font-weight: 600;
}
.types span {
padding: 5px 20px;
border-radius: 20px;
color: #ffffff;
}
.stats {
display: flex;
align-items: center;
justify-content: space-between;
text-align: center;
}
.stats p {
color: #404060;
}
#btn {
display: block;
padding: 15px 60px;
font-size: 18px;
background-color: #101010;
color: #ffffff;
position: relative;
margin: 30px auto;
border: none;
border-radius: 5px;
}
Javascript:
Now coming to javascript, we create an array for colours corresponding to each pokemon type. Next, we store the pokeAPI link in a constant called URL. We also get the card and btn elements and assign them to variables.
In the next step, we create a function called getPokeData. Within this function, we generate a random number between 1 and 150. This number will be our id.
We create the finalUrl by combining the URL and the id string. Now we fetch the data for the pokemon corresponding to the id generated. We use this data to create the card.
For the next step, we create a function called generateCard(). Now using the data fetched from the API we get necessary data and assign them to variables.
We now use the pokemon type to get a corresponding color value from the typeColor array. Now we assign this value to a variable called themeColor.
Next, we generate HTML for the card using variables we have created. At this point, we call the function appendTypes with the parameter data.types.
The appendTypes function iterates over the types array and wrap each type inside a span element. This span element is then appended to the types div.
We also call the styleCard function which applies the themeColor to the card background as radial-gradient and the span element inside the types div. And that’s it. Our random pokemon Card generator is now ready.
const typeColor = {
bug: "#26de81",
dragon: "#ffeaa7",
electric: "#fed330",
fairy: "#FF0069",
fighting: "#30336b",
fire: "#f0932b",
flying: "#81ecec",
grass: "#00b894",
ground: "#EFB549",
ghost: "#a55eea",
ice: "#74b9ff",
normal: "#95afc0",
poison: "#6c5ce7",
psychic: "#a29bfe",
rock: "#2d3436",
water: "#0190FF",
};
const url = " https://pokeapi.co/api/v2/pokemon/";
const card = document.getElementById("card");
const btn = document.getElementById("btn");
let getPokeData = () => {
// Generate a random number between 1 and 150
let id = Math.floor(Math.random() * 150) + 1;
// Combine the pokeapi url with pokemon id
const finalUrl = url + id;
// Fetch generated URL
fetch(finalUrl)
.then((response) => response.json())
.then((data) => {
generateCard(data);
});
};
//Generate Card
let generateCard = (data) => {
// Get necessary data and assign it to variables
console.log(data);
const hp = data.stats[0].base_stat;
const imgSrc = data.sprites.other.dream_world.front_default;
const pokeName = data.name[0].toUpperCase() + data.name.slice(1);
const statAttack = data.stats[1].base_stat;
const statDefense = data.stats[2].base_stat;
const statSpeed = data.stats[5].base_stat;
// Set themeColor based on pokemon type
const themeColor = typeColor[data.types[0].type.name];
console.log(themeColor);
card.innerHTML = `
<p class="hp">
<span>HP</span>
${hp}
</p>
<img src=${imgSrc} />
<h2 class="poke-name">${pokeName}</h2>
<div class="types">
</div>
<div class="stats">
<div>
<h3>${statAttack}</h3>
<p>Attack</p>
</div>
<div>
<h3>${statDefense}</h3>
<p>Defense</p>
</div>
<div>
<h3>${statSpeed}</h3>
<p>Speed</p>
</div>
</div>
`;
appendTypes(data.types);
styleCard(themeColor);
};
let appendTypes = (types) => {
types.forEach((item) => {
let span = document.createElement("SPAN");
span.textContent = item.type.name;
document.querySelector(".types").appendChild(span);
});
};
let styleCard = (color) => {
card.style.background = `radial-gradient(circle at 50% 0%, ${color} 36%, #ffffff 36%)`;
card.querySelectorAll(".types span").forEach((typeColor) => {
typeColor.style.backgroundColor = color;
});
};
btn.addEventListener("click", getPokeData);
window.addEventListener("load", getPokeData);
Top comments (4)
Nice work bro
Thanks a bunch
Big thanks for the exciting announcement! Your description got us all hyped up for what's to come. We truly appreciate the effort and creativity behind it. And hey, don't miss out on the fun – head over to My Boy! Free to grab the Gameboy Advance emulator for an amazing GBA gaming experience!
Also, check out the GEOMETRY DASH SubZero APK is a challenging rhythmic-based game developed and published by Robert Topala. He is also known as the founder of RobTop Games. This game has a unique variety of music blends, geometry, and precision-based challenges. A player will find it worthy and addictive as he goes through the experience.
Thanks for sharing this detailed guide on creating a Pokémon card generator. I love your article. The best part of such articles is that the writer spends a lot of time researching and providing valuable insights.
Here is a website I would like to suggest: pokemongenerators.us/pokemon-train...
You must check it out. This website offers a range of tools for generating Pokémon fusions and includes options for customizing your own Pokémon creations. It's a fantastic resource for fans and developers alike.