<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Links -->
    <link rel="stylesheet" href="./css/style.css">
    <link rel="icon" type="image/png" sizes="16x16"  href="/favicons/favicon-16x16.png">
  <meta name="msapplication-TileColor" content="#ffffff">
  <meta name="theme-color" content="#ffffff">

    <!-- Main JS-->
    <script defer src="./js/script.js"></script>

    <title>Pokedex</title>
</head>
<body>
    
    <main>
        
        <img src="#" 
        alt="pokemon" 
        class="pokemon_image">
            
        <h1 class="pokemon_data">
            <span class="pokemon_number"></span> -
            <span class="pokemon_name"></span>
        </h1>

        <form>
            <input type="search"
            class="input_search"
            placeholder="Name or Number"
            required>
        </form>

        <div class="buttons">
            <button class="button btn-prev">Prev &lt;</button>
            <button class="button btn-next">Next &gt;</button>
        </div>
        

        <img src="https://pokedex-conrado.vercel.app/images/pokedex.png" alt="pokedex" class="pokedex">
    </main>

</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@300;400;500;600;700;800&family=Oxanium&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Oxanium', cursive;
}

body {
    text-align: center;
    background: linear-gradient(to bottom, #6ab7f5, #fff);
    min-height: 100vh;
    padding: 15px;
}

main {
    display: inline-block;
    margin-top: 2%;
    padding: 15px;
    position: relative;
}

.pokedex {
    width: 100%;
    max-width: 425px;
}

.pokemon_image {
    position: absolute;
    left: 0;
    bottom: 55%;
    left: 50%;
    transform: translate(-63%, 20%);
    height: 18%;
}

.pokemon_data{
    position: absolute;
    font-weight: 600;
    color: #aaa;
    top: 54.5%;
    right: 27%;
    font-size: clamp(8px, 5vw, 25px);
}

.pokemon_name{
    color: #3a444d;
    text-transform: capitalize;
}

form {
    position: absolute;
    width: 65%;
    top: 65%;
    left: 13.5%;
}

.input_search{
    width: 100%;
    padding: 4%;
    outline: none;
    border: 2px solid #333;
    border-radius: 5px;
    font-weight: 600;
    color: #3a444d;
    font-size: clamp(8px, 5vw, 1rem);
    box-shadow: -3px 4px 0 #888, -5px 7px 0 #333;
}

.buttons{
    position: absolute;
    bottom: 10%;
    left: 50%;
    width: 65%;
    transform: translate(-57%, 0);
    display: flex;
    gap: 20px;
}

button{
    width: 50%;
    padding: 4%;
    border: 2px solid #000;
    border-radius: 5px;
    font-size: clamp(8px, 5vw, 1rem);
    font-weight: 600;
    color: white;
    background-color: #444;
    box-shadow: -3px 4px 0 #222, -5px 7px 0 #000;
}

button:active{
    box-shadow: inset -4px 4px 0 #222;
    font-size: 0.9rem;
}
// Elements to use from html doc
const pokemonNumber = document.querySelector('.pokemon_number');
const pokemonName = document.querySelector('.pokemon_name');
const pokemonImage = document.querySelector('.pokemon_image');

const form = document.querySelector('form');
const input = document.querySelector('.input_search');

const buttonPrev = document.querySelector('.btn-prev');
const buttonNext = document.querySelector('.btn-next');

//To make the Pokemon with number id 1 always shows first
let searchPokemon = 1;

// Connect to the PokeAPI
const fetchPokemon = async (pokemon) => {

    const APIResponse = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemon}`);
    if (APIResponse.status == 200){
        const data = APIResponse.json();
        return data;
    }
    

}

// Visualize Pokemon 
const renderPokemon = async (pokemon) => {

    //Display name before searching
    pokemonName.innerHTML= 'Loading...'
    pokemonNumber.innerHTML= '';

    const data = await fetchPokemon(pokemon);
    
    //Connect the element from the top codes
    if (data) {
        pokemonName.innerHTML= data.name;
        pokemonNumber.innerHTML= data.id;
        pokemonImage.style.display = 'block';
        pokemonImage.src= data['sprites']['versions']['generation-v']['black-white']['animated']['front_default'];
    
        input.value = '';
        searchPokemon =data.id;
    } else {
        pokemonImage.style.display = 'none';
        pokemonName.innerHTML= 'Not found :(';
        pokemonNumber.innerHTML= '';
    }   
}


//So the searchbar can searh name or number id
form.addEventListener('submit', (event) => {
    event.preventDefault();
    renderPokemon(input.value.toLowerCase());
    
});

//To make Previous Button works
buttonPrev.addEventListener('click', () => {
    if (searchPokemon > 1) {
        searchPokemon -= 1;
    renderPokemon(searchPokemon);
    }
});

//To make Next Button works
buttonNext.addEventListener('click', () => {
    searchPokemon += 1;
    renderPokemon(searchPokemon);
});


//To shows up first Pokemon select
renderPokemon(searchPokemon);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.