JSFiddle - React, Tailwind, and code Playground

by Anav02

HTML

<!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/x-icon" href="/img/fav.png">
    <link rel="stylesheet" href="styles.css">
    <title>Pokemon Search</title>
</head>
<body>
   <main>
    <h1 id="h1">PokeAPI</h1>
   <div class="input">
        <input type="text" name="" id="searchbar" placeholder="Search Pokemon Name">
        <span id="search"><i class="fa-solid fa-magnifying-glass"></i></span>
   </div>
   <div class="pokeBox">
   </div>
   </main>
</body>
</html>

CSS

/* Made with 💙 by Anav */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;    
    accent-color: var(--blue);   
    font-family: 'Poppins', sans-serif;
    transition: al .3s ease;
}

body {
    height: 100vh; 
    display: flex ;
    flex-direction: column;
    justify-content: center;
    align-items: center;
        background-color: var(--grey);
        width:100vw;
}

h1 {
    font-family: 'League Spartan', sans-serif;
    color:white;
}

::-webkit-scrollbar {
    display: none;
}

:root {
    --black: #151515;
    --grey: #282a30;
    --offwhite: rgba(255, 255, 255, 0.3);
    --blue:#38b6ff;
}

main {
    background-color: var(--grey);
    border-radius: 5px;
    padding: 10px;
    display: flex ;
    flex-direction: column;
    justify-content: center;
    width: 80%;
    scale:.70;
    border: 2px solid var(--blue)
    
}

input{
    margin-top: 10px;
    transition: all .3s ease;
    outline: none;
    caret-color: white;
    background-color: var(--grey);
    border: 2px solid var(--offwhite);
    font-size: 1.25rem;
    color: white;
    border-radius: 5px;
    padding: 5px 10px;
    width: 100%;
}

input:focus{
    border: 2px solid white;

}

.input {
    position: relative;
}

span {
    position: absolute;
    top: 60%;
    transform: translate(-40px, -50%);
    padding: 5px 7px;
    cursor: pointer;
} 

span i {
    color: white;
}

progress {
  margin-left:25px;
}

p {
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pokeBox {
  display:flex;
  align-items: center;
  justify-content: spcace-between;
  width: 100%;
  padding-right: 10px;
}

.img {
    width: 200px;
    margin: auto;
    pointer-events: none;
    scale:.9;
}

.img img{
    width: 100%;
}

@media only screen and (max-width: 600px) {
    main {
        width: 80%;     
    }
    
    .pokeBox {
      flex-direction: column;
      padding: 0px;
    
    }

    .img {
        width: 150px;
    }
  }

JavaScript

document.getElementById("search").addEventListener("click", getPokemon);
document.getElementById("searchbar").addEventListener("keypress", function(event) {
    if (event.key === "Enter") {
      event.preventDefault();
      getPokemon();
    }
});

let colors = {
    normal: '#A8A77A',
    fire: '#EE8130',
    water: '#6390F0',
    electric: '#F7D02C',
    grass: '#7AC74C',
    ice: '#96D9D6',
    fighting: '#C22E28',
    poison: '#A33EA1',
    ground: '#E2BF65',
    flying: '#A98FF3',
    psychic: '#F95587',
    bug: '#A6B91A',
    rock: '#B6A136',
    ghost: '#735797',
    dragon: '#6F35FC',
    dark: '#705746',
    steel: '#B7B7CE',
    fairy: '#D685AD',
};

function Cap(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

function getPokemon(e){

    const pokemon = document.getElementById("searchbar").value;
    const pokemonName = pokemon.toLowerCase();

    fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonName}`).then((Response) => Response.json()).then((data) => { 
    document.querySelector(".pokeBox").innerHTML = 
    `
    <div class="img">
    <img src="${data.sprites.other["official-artwork"].front_default}">
    </div>
    <div class="info">
        <p>${Cap(data.stats[0].stat.name)}<progress class="stat" value="${data.stats[0].base_stat}" max="100"></progress></p>
        <p>${Cap(data.stats[5].stat.name)}<progress class="stat" value="${data.stats[5].base_stat}" max="100"></progress></p>
        <p>${Cap(data.stats[1].stat.name)}<progress class="stat" value="${data.stats[1].base_stat}" max="100"></progress></p>
        <p>${Cap(data.stats[2].stat.name)}<progress class="stat" value="${data.stats[2].base_stat}" max="100"></progress></p>
        <p>${Cap(data.stats[3].stat.name)}<progress class="stat" value="${data.stats[3].base_stat}" max="100"></progress></p>
        <p>${Cap(data.stats[4].stat.name)}<progress class="stat" value="${data.stats[4].base_stat}" max="100"></progress></p>
    </div>
    `;
   ...