You are currently viewing Pokémon Card Generator using HTML, CSS & JavaScript

Pokémon Card Generator using HTML, CSS & JavaScript

Pokémon Card Generator using HTML, CSS & JavaScript

Hello everyone. Welcome to today’s tutorial on Codewithrandom. We’ll learn how to make Random Pokémon Card Generator. Pokémon as we all know our childhood is attached to this show. You all have seen Pokémon and had a hobby of collecting cards and playing it with your friends or trading it with them. Now lets create a project which will randomly display a pokemon card.

In Today’s session, We will use HTML, CSS, and JavaScript to complete this Project.

The HTML(Hypertext Markup Language) Code will display the structure in which the generated card will be displayed.

The CSS(Cascading Stylesheet) Code will style the defined structure and set the alignment that how space or width should be given to display the card.

And lastly the JavaScript Code will help to shuffle the card add some logic and make it user responsive.

I hope you have got an idea about the project.

HTML Code for Pokémon Card Generator

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

This HTML Code contains full code for the card generator. In this code we have created a card in the container and a button to generate. Let us see the CSS Code to style the card generator.

Create Password Generator Using Javascript (Source Code)

CSS Code for Pokémon Card Generator

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
  }
  body {
    background-color: red;
  }
  .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;
  }

In this CSS code we have styled the defined structure and the for the displaying of the cards and the button which will display it. And later on we have also styled the name of the pokemon card which should be displayed along with the said. Let us code the Javascript to make it user responsive.

Ecommerce Website Using Html Css And Javascript Source Code

JavaScript Code for Pokémon Card Generator

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);

In this Javascript code we have given a font color to each card name and then we have linked an API which has the pokemon cards. Then we have added the logical part in which it is stated that how the card will be displayed and then we have made the buttons user responsive. Let us see the final output of the project How to Make Pokémon Card using HTML, CSS & JS(Source Code) | Random Pokémon Card Generator.

Create Otp Input Field Html Css Javascript ( Source Code)

Final Output Pokémon Card Generator Using Html,Css and JavaScript

We have Successfully created our How to Make Pokémon Card using HTML, CSS & JS(Source Code) | Random Pokémon Card Generator. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Code Owner – CodingArtist

Written By – Harsh Sawant

Code By – @harshh9

Leave a Reply