How to Create a Pokémon Breeding Gaming Calculator Using HTML, CSS, and JavaScript
Follow this step-by-step guide to build an interactive Pokémon Breeding Calculator with code examples and tips (ideal for beginners and game developers).
Gaming calculators can provide quick and useful features for gamers, such as calculating stats, damage, or compatibility between in-game elements. In this guide, I'll walk you through creating a simple, yet interactive Pokémon Breeding Calculator using HTML, CSS, and JavaScript. This project will fetch data from an API and determine if two Pokémon can breed based on their egg groups.
You can see a live version of this calculator on Game On Trend (Pokemon Breeding Calculator).
Prerequisites
To follow this guide, you should have a basic understanding of:
- HTML for structuring the content
- CSS for styling the elements
- JavaScript for adding interactivity and fetching data from an API
If you're new to building calculators, I also recommend checking out my previous article on DZone ("Step-by-Step Guide to Creating a Calculator App"). It provides a step-by-step introduction that will help you get familiar with building basic calculators.
Step 1: Setting Up the HTML Structure
Let's start by creating a basic HTML structure to house the calculator.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pokémon Breeding Calculator</title>
</head>
<body>
<div id="calculator">
<h1>Pokémon Breeding Calculator</h1>
<p>Enter two Pokémon to check if they can breed.</p>
<input type="text" id="pokemon1" placeholder="Parent 1 (e.g., Charizard)" required>
<input type="text" id="pokemon2" placeholder="Parent 2 (e.g., Dragonite)" required>
<button onclick="calculateBreeding()">Check Compatibility</button>
<div class="result" id="result"></div>
</div>
</body>
</html>Step 2: Adding Style With CSS
To make the calculator visually appealing, let's add some CSS. This will style the calculator's layout, buttons, and inputs.
css
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f8f9fa;
text-align: center;
padding: 20px;
}
#calculator {
background: #fff;
padding: 20px;
border-radius: 10px;
max-width: 600px;
margin: 0 auto;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
input {
padding: 10px;
margin: 10px 0;
width: 80%;
font-size: 1rem;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
padding: 10px 20px;
font-size: 1rem;
background-color: #4CAF50;
color: white;
border: none
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.result {
margin-top: 20px;
}
</style>Step 3: Adding Functionality With JavaScript
Now, let's write the JavaScript that will fetch data from the Pokémon API and determine if the two selected Pokémon can breed.
<script>
async function getPokemonData(pokemon) {
const url = `https://pokeapi.co/api/v2/pokemon/${pokemon.toLowerCase()}`;
try {
const response = await fetch(url);
if (!response.ok) throw new Error("Pokémon not found");
const data = await response.json();
return {
name: data.name,
eggGroups: await getEggGroups(data.species.url),
abilities: data.abilities.map(ability => ability.ability.name),
image: data.sprites.other["official-artwork"].front_default
};
} catch (error) {
alert(error.message);
return null;
}
}
async function getEggGroups(speciesUrl) {
const response = await fetch(speciesUrl);
const data = await response.json();
return data.egg_groups.map(group => group.name);
}
function canBreed(eggGroups1, eggGroups2) {
return eggGroups1.some(group => eggGroups2.includes(group));
}
async function calculateBreeding() {
const pokemon1 = document.getElementById('pokemon1').value.trim();
const pokemon2 = document.getElementById('pokemon2').value.trim();
if (!pokemon1 || !pokemon2) {
alert('Please enter both Pokémon names.');
return;
}
const parent1 = await getPokemonData(pokemon1);
const parent2 = await getPokemonData(pokemon2);
if (!parent1 || !parent2) return;
const compatible = canBreed(parent1.eggGroups, parent2.eggGroups);
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = `
<h3>Results:</h3>
<div class="pokemon-data">
<div>
<img src="${parent1.image}" class="pokemon-image">
<p><strong>${parent1.name}</strong></p>
<p>Egg Groups: ${parent1.eggGroups.join(', ')}</p>
</div>
<div>
<img src="${parent2.image}" class="pokemon-image">
<p><strong>${parent2.name}</strong></p>
<p>Egg Groups: ${parent2.eggGroups.join(', ')}</p>
</div>
</div>
<p><strong>Can they breed?</strong>: ${compatible ? 'Yes' : 'No'}</p>
`;
}
</script>Step 4: Testing and Deploying
Now, your calculator is complete! Test it by entering two Pokémon names and check if the breeding compatibility works. If everything is functioning as expected, you can deploy it to your website.
Conclusion
Creating a gaming calculator like this can add immense value to your gaming community. Whether it’s for calculating Pokémon compatibility, game stats, or other features, using APIs can simplify the process and enhance user interactivity. Feel free to customize this code to suit your specific needs.
Happy coding.
Opinions expressed by DZone contributors are their own.