pokeAPI/index.html at main · eaflorez/pokeAPI · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pokédex - Una Sola Tarjeta</title>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>

    <div class="search-container">
        <h2 class="titulo">Buscador Pokédex</h2>

        <!-- Búsqueda por nombre -->
        <div class="search-actions">
            <input type="text" id="inputPokemon" class="search-input" placeholder="Escribe el nombre del Pokémon">
            <button id="btnBuscar" class="search-button">Buscar por Nombre</button>
        </div>

        <!-- Búsqueda por ID -->
        <div class="search-actions">
            <input type="number" id="inputPokemonId" class="search-input" placeholder="Escribe el ID del Pokémon">
            <button id="btnBuscarId" class="search-button">Buscar por ID</button>
        </div>

        <div id="statusMessage" class="message-box"></div>
    </div>

    <section class="card" id="pokemonCard">
        <h1 class="titulo" id="cardTitle">Cargando...</h1>
        <div class="pokemon-display">
            <h2 id="result_name" class="pokemon-name"></h2>
            <img class="pokemon-img" src="" id="result_img" alt="Pokémon">
        </div>

        <!-- Información adicional -->
        <div class="pokemon-info">
            <p><strong>ID:</strong> <span id="result_id"></span></p>
            <p><strong>Peso:</strong> <span id="result_weight"></span></p>
            <p><strong>Altura:</strong> <span id="result_height"></span></p>
            <p><strong>Habilidades:</strong> <ul id="result_abilities"></ul></p>
        </div>
    </section>

    <script src="index.js"></script>
</body>
</html>