<body>
  <container id="container">
    <!-- Card & Buttons -->
    <div class="card-btn">
      <!-- Card -->
      <div class="card">
        <h1 id="title">What's that Pokemon ?</h1>
        <div class="name"></div>
        <div class="img-container"></div>
        <div class="pokemon-info"></div>
      </div>
      <!-- Buttons -->
      <div class="button-container">
        <div class="buttons"></div>
        <div class="next-button"></div>
      </div>
    </div>
  </container>
  <!-- My Personal Script -->
  <script src="./main.js"></script>
</body>
* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
  background-size: cover;
}

#container {
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 400px;
  perspective-origin: center;
}

.card-btn {
  display: flex;
  flex-direction: row-reverse;
  position: relative;
  overflow: hidden;
  transform: rotateY(10deg);
  transition: 1s ease;
  background: #ffffff33;
  backdrop-filter: blur(10px);
  box-shadow: 15px 15px 7px #000000aa;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.541);
  text-shadow: 3px 3px 3px black;
}

.card-btn::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  z-index: -1;
  background: repeating-linear-gradient(
    90deg,
    #47a4da00 5%,
    #ffffff55 15%,
    #47a4da00 25%
  );
  background-size: 200% 200%;
  animation: gradient 15s linear infinite;
  transform: rotate(10deg);
}

@keyframes gradient {
  to {
    background-position: -400%;
  }
}

/* .card-btn:hover {
  transform: rotateY(-10deg);
} */

.card {
  width: 450px;
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}

#title {
  color: white;
}

.name {
  color: white;
  text-transform: uppercase;
}

.img-container {
  width: 170px;
  height: 170px;
}

.img-container img {
  width: 100%;
  height: 100%;
}

.pokemon-info {
  color: white;
  font-size: 20px;
}

.button-container {
  width: 300px;
  /* background: rgba(255, 255, 255, 0.5); */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.buttons {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}

.buttons button {
  height: 35px;
  width: auto;
  font-size: 15px;
  margin: 1%;
  padding: 0 2%;
  border: none;
  border-radius: 5px;
  box-shadow: 3px 3px 3px black;
  text-transform: uppercase;
}

.next-button {
  height: 20%;
}

.next-button button {
  height: 35px;
  width: auto;
  font-size: 15px;
  margin: 1%;
  padding: 0 2%;
  border: none;
  border-radius: 5px;
  box-shadow: 3px 3px 3px black;
  text-transform: uppercase;
}

/* button:hover {
  background: linear-gradient(to right bottom, #48cae4, #ffafcc);
} */

button {
  display: inline-block;
}

button.active {
  background: rgb(8, 31, 136);
  background: linear-gradient(
    90deg,
    rgba(0, 212, 255, 1) 0%,
    rgba(6, 84, 170, 1) 88%,
    rgba(8, 31, 136, 1) 100%
  );
}
let baseUrl = "https://pokeapi.co/api/v2/pokemon/";

function pokemons(url) {
  fetch(url)
    .then((response) => response.json())
    .then((data) => {
      // Console log to make sure I am getting the data
      console.log(data);
      // Get the list of pokemon from the results
      let pokemon = data.results;
      let pokemonContainer = document.querySelector(".buttons");
      // Clear the container
      pokemonContainer.innerHTML = "";
      // Looping over pokemon list
      pokemon.forEach((btn) => {
        pokemonContainer.innerHTML += `<button style="transition: 2s ease-in-out;" onclick="getPokemonInfo('${btn.url}')">${btn.name}</button>`;
      });
      // Active Class
      let activeButtons = document.querySelectorAll("button");

      for (let i = 0; i < activeButtons.length; i++) {
        activeButtons[i].addEventListener("click", function (e) {
          for (let i = 0; i < activeButtons.length; i++) {
            activeButtons[i].classList.remove("active");
          }
          e.currentTarget.classList.add("active");
        });
      }
      // Add a next pokemon button
      document.querySelector(
        ".next-button"
      ).innerHTML = `<button onclick="pokemons('${data.next}')">Next</button>`;
    });
}

// Get default pokemon list
pokemons(baseUrl);

// Function to get information about a specific pokemin
function getPokemonInfo(url) {
  fetch(url)
    .then((response) => response.json())
    .then((data) => {
      console.log(data);
      fetch(data.species.url)
        .then((res) => res.json())
        .then((speciesData) => {
          // Fetches the data
          console.log(speciesData);
          // Name
          document.querySelector(".name").innerHTML = `
          <h2>Name: ${data.name}</h2>
          <h3>Capture Rate: ${data.capture_rate}</h3>
          `;
          // Image
          document.querySelector(".img-container").innerHTML = `
          <img src="${data.sprites.other.dream_world.front_default} ">
          `;
          // Description
          document.querySelector(".pokemon-info").innerHTML = `
          <p>${speciesData.flavor_text_entries[0].flavor_text}</p>
          `;
        });
    });
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.