Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 59 views

    Build A Pokemon Search App

    Uploaded by

    1216malhupura

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd

    Build A Pokemon Search App

    Uploaded by

    1216malhupura
    59 views8 pages

    Original Title

    build-a-pokemon-search-app

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    59 views8 pages

    Build A Pokemon Search App

    Uploaded by

    1216malhupura

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    You are on page 1of 8

    ** start of undefined **

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
    rel="icon"
    type="image/png"
    href="https://cdn.freecodecamp.org/universal/favicons/favicon.ico"
    />
    <title>Pokémon Search App</title>
    <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
    <main>
    <img
    class="freecodecamp-logo"
    src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg"
    alt="freeCodeCamp Logo"
    />
    <h1>Pokémon Search App</h1>
    <div class="container">
    <form role="search" id="search-form">
    <label for="search-input">Search for Pokémon Name or ID:</label>
    <input type="text" name="pokemon" id="search-input" required />
    <button id="search-button">Search</button>
    </form>
    <div class="output">
    <div class="top-container">
    <div class="name-and-id">
    <span id="pokemon-name"></span>
    <span id="pokemon-id"></span>
    </div>
    <div class="size">
    <span id="weight"></span>
    <span id="height"></span>
    </div>
    <div id="sprite-container" class="sprite-container"></div>
    <div id="types"></div>
    </div>
    <div class="bottom-container">
    <table>
    <tr>
    <th>Base</th>
    <th>Stats</th>
    </tr>
    <tr>
    <td>HP:</td>
    <td id="hp"></td>
    </tr>
    <tr>
    <td>Attack:</td>
    <td id="attack"></td>
    </tr>
    <tr>
    <td>Defense:</td>
    <td id="defense"></td>
    </tr>
    <tr>
    <td>Sp. Attack:</td>
    <td id="special-attack"></td>
    </tr>
    <tr>
    <td>Sp. Defense:</td>
    <td id="special-defense"></td>
    </tr>
    <tr>
    <td>Speed:</td>
    <td id="speed" class="speed"></td>
    </tr>
    </table>
    </div>
    </div>
    </div>
    <script src="./script.js"></script>
    </main>
    </body>
    </html>

    ** end of undefined **

    ** start of undefined **

    /* CSS reset */

    *,
    *::before,
    *::after {
    box-sizing: border-box;
    }

    * {
    margin: 0;
    }

    body {
    line-height: 1.5;
    }

    img {
    display: block;
    }

    /* Project styling */

    body {
    height: 100vh;
    font-family: sans-serif;
    background-color: #1b1b32;
    color: #0a0a23;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    }

    main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    }

    .freecodecamp-logo {
    height: 30px;
    margin: 25px 0;
    }

    h1 {
    color: #f5f6f7;
    font-size: 1.7em;
    text-align: center;
    }

    .container {
    width: 325px;
    margin: 25px 0;
    background-color: #f5f6f7;
    border: 1px solid #f5f6f7;
    border-radius: 15px;
    box-shadow: 10px 10px 0px 0px rgba(223, 220, 220, 0.75);
    }

    .output,
    #search-form {
    display: flex;
    justify-content: center;
    }

    #search-form {
    flex-wrap: wrap;
    margin: 10px 0;
    padding: 5px;
    border-radius: 8px 8px 0 0;
    gap: 10px;
    }

    label {
    align-self: center;
    }

    #search-input:focus-visible,
    #search-button:focus-visible {
    outline: 3px solid #198eee;
    }

    #search-input {
    height: 40px;
    padding-left: 10px;
    width: 200px;
    }

    #search-button {
    padding: 14px 0;
    width: 80px;
    border-radius: 20px;
    text-align: center;
    background-color: #7f21ab;
    color: #f5f6f7;
    border: none;
    }

    .output {
    margin: 10px 0;
    padding: 5px;
    flex-direction: column;
    align-items: center;
    }

    .top-container,
    .bottom-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 325px;
    }

    .top-container {
    margin-bottom: 10px;
    padding: 10px;
    background-color: #f0f1f7;
    }

    .name-and-id {
    height: 28px;
    font-size: 1.1em;
    text-transform: capitalize;
    margin-bottom: 5px;
    }

    .size {
    height: 22px;
    font-size: 0.85rem;
    }

    .sprite-container {
    flex-grow: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    }

    #sprite {
    width: 180px;
    }

    #types {
    min-height: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 5px;
    }

    .type {
    width: 66px;
    padding: 5px;
    font-size: 0.7rem;
    text-align: center;
    border-radius: 5px;
    background-color: red;
    text-transform: uppercase;
    }

    table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    font-size: 1 rem;
    color: #f5f6f7;
    background-color: #7f21ab;
    }

    th:nth-child(even),
    td:nth-child(even) {
    border-left: 5px solid #f5f6f7;
    }

    tr {
    border-bottom: 5px solid #f5f6f7;
    }

    td,
    th {
    text-align: center;
    padding: 8px;
    }

    /* Special styling for Pokémon types */

    .normal {
    background-color: #b7b7aa;
    }

    .fire {
    background-color: #ff6f52;
    }

    .water {
    background-color: #42a1ff;
    }

    .electric {
    background-color: #fecc33;
    }

    .grass {
    background-color: #78cc55;
    }

    .ice {
    background-color: #66ccfe;
    }

    .fighting {
    background-color: #d3887e;
    }

    .poison {
    background-color: #c68bb7;
    }

    .ground {
    background-color: #dfba52;
    }

    .flying {
    background-color: #8899ff;
    }

    .psychic {
    background-color: #ff66a3;
    }

    .bug {
    background-color: #aabb23;
    }

    .rock {
    background-color: #baaa66;
    }

    .ghost {
    background-color: #9995d0;
    }

    .dragon {
    background-color: #9e93f1;
    }

    .dark {
    background-color: #b59682;
    }

    .steel {
    background-color: #abaabb;
    }

    .fairy {
    background-color: #ed99ed;
    }

    @media screen and (min-width: 550px) {


    h1 {
    font-size: 2em;
    }

    .container {
    width: 450px;
    }

    #search-form,
    .top-container,
    .bottom-container {
    width: 95%;
    }

    .type {
    width: 75px;
    }
    }

    ** end of undefined **

    ** start of undefined **

    const pokemonID = document.getElementById("pokemon-id");


    const pokemonName = document.getElementById("pokemon-name");
    const spriteContainer = document.getElementById("sprite-container");
    const types = document.getElementById("types");
    const height = document.getElementById("height");
    const weight = document.getElementById("weight");
    const hp = document.getElementById("hp");
    const attack = document.getElementById("attack");
    const defense = document.getElementById("defense");
    const specialAttack = document.getElementById("special-attack");
    const specialDefense = document.getElementById("special-defense");
    const speed = document.getElementById("speed");
    const searchForm = document.getElementById("search-form");
    const searchInput = document.getElementById("search-input");

    const getPokemon = async () => {


    try {
    const pokemonNameOrId = searchInput.value.toLowerCase();
    const response = await fetch(
    `https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${pokemonNameOrId}`,
    );
    const data = await response.json();

    // Set Pokémon info


    pokemonName.textContent = `${data.name.toUpperCase()}`;
    pokemonID.textContent = `#${data.id}`;
    weight.textContent = `Weight: ${data.weight}`;
    height.textContent = `Height: ${data.height}`;
    spriteContainer.innerHTML = `
    <img id="sprite" src="${data.sprites.front_default}" alt="${data.name} front
    default sprite">
    `;

    // Set stats
    hp.textContent = data.stats[0].base_stat;
    attack.textContent = data.stats[1].base_stat;
    defense.textContent = data.stats[2].base_stat;
    specialAttack.textContent = data.stats[3].base_stat;
    specialDefense.textContent = data.stats[4].base_stat;
    speed.textContent = data.stats[5].base_stat;

    // Set types
    types.innerHTML = data.types
    .map(
    (obj) => `<span class="type ${obj.type.name}">${obj.type.name}</span>`,
    )
    .join("");
    } catch (err) {
    resetDisplay();
    alert("Pokémon not found");
    console.log(`Pokémon not found: ${err}`);
    }
    };

    const resetDisplay = () => {


    const sprite = document.getElementById("sprite");
    if (sprite) sprite.remove();

    // reset stats
    pokemonName.textContent = "";
    pokemonID.textContent = "";
    types.innerHTML = "";
    height.textContent = "";
    weight.textContent = "";
    hp.textContent = "";
    attack.textContent = "";
    defense.textContent = "";
    specialAttack.textContent = "";
    specialDefense.textContent = "";
    speed.textContent = "";
    };

    searchForm.addEventListener("submit", (e) => {


    e.preventDefault();
    getPokemon();
    });

    ** end of undefined **

    You might also like