index.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 API Demo</title>
</head>
<body>
    <h1>Pokémon API Demo</h1>
    
    <button onclick="getRandomPokemon()">Get Random Pokémon</button>
    
    <div id="pokemonInfo">
        <!-- Pokémon information will be displayed here -->
    </div>

    <script>
        function getRandomPokemon() {
            // Send a GET request to your API endpoint to get a random Pokémon
            fetch('http://localhost:3000/api/pokemon/name/Bulbasaur')
                .then(response => response.json())
                .then(data => {
                    // Display the Pokémon information on the page
                    document.getElementById('pokemonInfo').innerHTML = `
                        <h2>${data.name}</h2>
                        <p>Type: ${data.type.join(', ')}</p>
                        <p>Abilities: ${data.abilities.join(', ')}</p>
                    `;
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                });
        }
    </script>
</body>
</html>