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).

David Jones

Oct. 30, 24 · Tutorial

Likes (1)

Comment

Save

6.6K Views

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

OSZAR »

" data-lang="text/html">

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
   
 

   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.

    JavaScript
   
 

   <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.

API CSS HTML JavaScript Video gaming

Opinions expressed by DZone contributors are their own.

Related

Trending