javascripthtmlapi

How do I make the same API request multibul times without duplicates?


I am trying to randomly generate a Pokemon team using PokeAPI and Javascrip, Ive tried a few things but it doesnt seem to be working, this is what I have so far: https://codepen.io/Alyssamc17/pen/dyqqeMp

const nameElem = document.getElementById("name");
const pokemonImage = document.getElementById('pokemon')
const heightElem = document.getElementById("height");
const weightElem = document.getElementById("weight");
const button = document.querySelector(".button");

button.addEventListener('click', (e) => {
  e.preventDefault()
  const randomNumber = Math.ceil(Math.random() * 905)
  fetch(`https://pokeapi.co/api/v2/pokemon/${randomNumber}/`)
    .then(response => response.json())
    .then(pokemon => {
      const {
        name,
        height,
        weight,
        sprites
      } = pokemon;
      console.log(name)
      nameElem.innerHTML = name;
      heightElem.innerHTML = height;
      weightElem.innerHTML = weight;
      pokemonImage.setAttribute('src', sprites.front_default);
    })
})

I want to have 6 api requests.


Solution

  • So what I've edited is the HTML to add an ID to each of them just for ease:

    So the new 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="stylesheet" href="design.css">
        <title>Pokemon Team Generater</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
        <link rel="shortcut icon" type="image/jpg" href="favicon.png"/>
        
    </head>
    
    <body>
    
        <h1 class="pt-3 text-danger">Pokemon Team Generater</h1>
    
        <div class="container text-center">
            <div class="row row-cols-3">
              <div class="g-col-6 g-col-md-4 p-5">
                <img src="" id="pokemon-0">
                <h3>Name:</h3>
                <div id="name-0"></div>   
                <h3>Height:</h3>
                <div id="height-0"></div>
                <h3>Weight:</h3>
                <div id="weight-0"></div> 
              </div>
    
              <div class="g-col-6 g-col-md-4 p-5">
                <img src="" id="pokemon-1">
                <h3>Name:</h3>
                <div id="name-1"></div>   
                <h3>Height:</h3>
                <div id="height-1"></div>
                <h3>Weight:</h3>
                <div id="weight-1"></div> 
              </div>
    
              <div class="g-col-6 g-col-md-4 p-5">
                <img src="" id="pokemon-2">
                <h3>Name:</h3>
                <div id="name-2"></div>   
                <h3>Height:</h3>
                <div id="height-2"></div>
                <h3>Weight:</h3>
                <div id="weight-2"></div> 
              </div>
    
              <div class="g-col-6 g-col-md-4 p-5">
                <img src="" id="pokemon-3">
                <h3>Name:</h3>
                <div id="name-3"></div>   
                <h3>Height:</h3>
                <div id="height-3"></div>
                <h3>Weight:</h3>
                <div id="weight-3"></div> 
              </div>
    
              <div class="g-col-6 g-col-md-4 p-5">
                <img src="" id="pokemon-4">
                <h3>Name:</h3>
                <div id="name-4"></div>   
                <h3>Height:</h3>
                <div id="height-4"></div>
                <h3>Weight:</h3>
                <div id="weight-4"></div> 
              </div>
    
              <div class="g-col-6 g-col-md-4 p-5">
                <img src="" id="pokemon-5">
                <h3>Name:</h3>
                <div id="name-5"></div>   
                <h3>Height:</h3>
                <div id="height-5"></div>
                <h3>Weight:</h3>
                <div id="weight-5"></div> 
              </div>
            </div>
          </div>
    
    
        <div class="text-center">
        <button type="button" class="button btn btn-outline-danger btn-lg">Generate Pokemon Team!</button>
        </div>
    
        
        <script src="script.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    
    </body>
    
    
    
    </html>
    

    And the JS behind that is:

    const button = document.querySelector(".button");
    
    button.addEventListener('click', (e) => {
      e.preventDefault()
      for (let i = 0; i < 6; i++) {
        const randomNumber = Math.ceil(Math.random() * 905)
        const nameElem = document.getElementById("name-" + i);
        const pokemonImage = document.getElementById('pokemon-' + i)
        const heightElem = document.getElementById("height-" + i);
        const weightElem = document.getElementById("weight-" + i);
        fetch(`https://pokeapi.co/api/v2/pokemon/${randomNumber}/`)
        .then(response => response.json())
        .then(pokemon => {
          const {
            name,
            height,
            weight,
            sprites
          } = pokemon;
          console.log(name)
          nameElem.innerHTML = name;
          heightElem.innerHTML = height;
          weightElem.innerHTML = weight;
          pokemonImage.setAttribute('src', sprites.front_default);
        })
      }
    })
    

    And the CSS isn't even changed.