Pokemon Card Generator
Tags: javascript, webdev, api, productivity
Published: 2023-11-07 06:56:05

#######Project Folder Structure:
Let us take a quick look at the project structure. We have a project folder called – `Pokemon Card Generator.` Inside this folder, we have three files. The first one is the HTML document called `index.html.` Next one is the stylesheet named `style.css`, and the last one is the script file called `script.js`.

#HTML:
The HTML consists of a `container` div that wraps the `card` div and the `button` element. We don’t have many other elements in HTML code as we will be generating them using Javascript.

```
-  <!DOCTYPE html>
-  <html lang="en">
-    <head>
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Pokemon Card Generator</title>
-      <!-- Google Fonts -->
-      <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"rel="stylesheet"/>
-      <!-- Stylesheet -->
-      <link rel="stylesheet" href="style.css" />
-    </head>
-    <body>
-      <div class="container">
-        <div id="card"></div>
-        <button id="btn">Generate</button>
-      </div>
-      <!-- Script -->
-      <script src="script.js"></script>
-    </body>
-  </html>
```

#CSS:
Coming to the CSS Code, we do a CSS reset by removing the unwanted paddings and margins. We also centre the `container` using the transforms. We set the dimensions for the container and the `card` div.

For the pokemon image we set the `width` to 180px and `max-height` to 200px. 
We style the `span` elements and place them inside the types div using the flex layout. We set the `justify-content` to `space-around`.

Similarly, we style the stats div and the button.

```
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  background-color: #eff3ff;
}
.container {
  width: 350px;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
#card {
  position: relative;
  width: 100%;
  padding: 30px 20px;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}
#card img {
  display: block;
  width: 180px;
  max-height: 200px;
  position: relative;
  margin: 20px auto;
}
.hp {
  width: 80px;
  background-color: #ffffff;
  text-align: center;
  padding: 8px 0;
  border-radius: 30px;
  margin-left: auto;
  font-weight: 400;
}
.poke-name {
  text-align: center;
  font-weight: 600;
}
.types {
  display: flex;
  justify-content: space-around;
  margin: 20px 0 40px 0;
}
.hp span,
.types span {
  font-size: 12px;
  letter-spacing: 0.4px;
  font-weight: 600;
}
.types span {
  padding: 5px 20px;
  border-radius: 20px;
  color: #ffffff;
}
.stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}
.stats p {
  color: #404060;
}
#btn {
  display: block;
  padding: 15px 60px;
  font-size: 18px;
  background-color: #101010;
  color: #ffffff;
  position: relative;
  margin: 30px auto;
  border: none;
  border-radius: 5px;
}
```
#Javascript:
Now coming to javascript, we create an array for colours corresponding to each pokemon type. Next, we store the pokeAPI link in a constant called `URL`. We also get the `card` and `btn` elements and assign them to variables.

In the next step, we create a function called `getPokeData`. Within this function, we generate a random number between 1 and 150. This number will be our id.


We create the `finalUrl` by combining the `URL` and the `id` string. Now we fetch the data for the pokemon corresponding to the id generated. We use this data to create the card.

For the next step, we create a function called `generateCard()`. Now using the data fetched from the API we get necessary data and assign them to variables.

We now use the pokemon type to get a corresponding color value from the `typeColor` array. Now we assign this value to a variable called `themeColor`.

Next, we generate HTML for the card using variables we have created. At this point, we call the function `appendTypes` with the parameter `data.types`.
The `appendTypes` function iterates over the types array and wrap each type inside a `span` element. This span element is then appended to the `types` div.


We also call the `styleCard` function which applies the `themeColor` to the card background as radial-gradient and the span element inside the types div. And that’s it. Our random pokemon Card generator is now ready.

```
const typeColor = {
  bug: "#26de81",
  dragon: "#ffeaa7",
  electric: "#fed330",
  fairy: "#FF0069",
  fighting: "#30336b",
  fire: "#f0932b",
  flying: "#81ecec",
  grass: "#00b894",
  ground: "#EFB549",
  ghost: "#a55eea",
  ice: "#74b9ff",
  normal: "#95afc0",
  poison: "#6c5ce7",
  psychic: "#a29bfe",
  rock: "#2d3436",
  water: "#0190FF",
};
const url = " https://pokeapi.co/api/v2/pokemon/";
const card = document.getElementById("card");
const btn = document.getElementById("btn");

let getPokeData = () => {
  // Generate a random number between 1 and 150
  let id = Math.floor(Math.random() * 150) + 1;
  // Combine the pokeapi url with pokemon id
  const finalUrl = url + id;
  // Fetch generated URL
  fetch(finalUrl)
    .then((response) => response.json())
    .then((data) => {
      generateCard(data);
    });
};

//Generate Card

let generateCard = (data) => {
  // Get necessary data and assign it to variables
  console.log(data);
  const hp = data.stats[0].base_stat;
  const imgSrc = data.sprites.other.dream_world.front_default;
  const pokeName = data.name[0].toUpperCase() + data.name.slice(1);
  const statAttack = data.stats[1].base_stat;
  const statDefense = data.stats[2].base_stat;
  const statSpeed = data.stats[5].base_stat;

  // Set themeColor based on pokemon type
  const themeColor = typeColor[data.types[0].type.name];
  console.log(themeColor);
  card.innerHTML = `
        <p class="hp">
          <span>HP</span>
            ${hp}
        </p>
        <img src=${imgSrc} />
        <h2 class="poke-name">${pokeName}</h2>
        <div class="types">
         
        </div>
        <div class="stats">
          <div>
            <h3>${statAttack}</h3>
            <p>Attack</p>
          </div>
          <div>
            <h3>${statDefense}</h3>
            <p>Defense</p>
          </div>
          <div>
            <h3>${statSpeed}</h3>
            <p>Speed</p>
          </div>
        </div>
  `;
  appendTypes(data.types);
  styleCard(themeColor);
};
let appendTypes = (types) => {
  types.forEach((item) => {
    let span = document.createElement("SPAN");
    span.textContent = item.type.name;
    document.querySelector(".types").appendChild(span);
  });
};
let styleCard = (color) => {
  card.style.background = `radial-gradient(circle at 50% 0%, ${color} 36%, #ffffff 36%)`;
  card.querySelectorAll(".types span").forEach((typeColor) => {
    typeColor.style.backgroundColor = color;
  });
};

btn.addEventListener("click", getPokeData);
window.addEventListener("load", getPokeData);
```
[Click here for the live demo](https://pokecardapinew.netlify.app/)