Multiple Rotate images on the same click

Question

Good afternoon, I have a question. I intend that when we click on a button a random image of an 80-card deck will appear. Then if we click again on that same button, another card appears next to the first one and so on. I’ve been searching and I can’t...

<img id="image" width="220" style="box-shadow: rgb(158, 120, 137) 0px 0px 20px 0px; border-radius: 0.5em" src="h"></img>

here is where, supposedly will appear the cards, and the JS I have is:

    images = [{source: "https://i.ibb.co/xC9r03B/0.jpg"},
{source: "https://i.ibb.co/hD5gs5R/1.jpg"},
...
...]

var usedImages = [];

function random(){
   var numberOfImages = images.length;
    var num = getRandomInt(0, numberOfImages);   
    console.log(num);

    if (usedImages.indexOf(num) === -1) {
        document.getElementById("image").src = images[num].source;
        document.getElementById("text").innerHTML = images[num].text;
        usedImages.push(num);
    }
    else {
        if (usedImages.length === numberOfImages) {
            usedImages = [];
        }
        pickImage();
    }
};

function getRandomInt(min, max) {
  min = Math.ceil(0);
  max = Math.floor(images.length - 1);
  return Math.floor(Math.random() * (max - min)) + min; 
}

Can someone give me a hand? thank you.

Answer 1

You can make a container to store the images side by side

<button>Nova imagem</button>

<div class="container"></div>

using css and adding flex display or grid display in the container you can leave all images side by side

CSS

img.image {
  width: 220px;
  box-shadow: rgb(158, 120, 137) 0px 0px 20px 0px;
  border-radius: 0.5em;
  margin: 15px;
}

div.container {
   display: grid;
  /* Vai criar 3 colunas de mesmo tamanho, ocupando todo tamanho da tela */
  /* grid-template-columns: repeat(3, 1fr); */

  /* Caso queira informa um tamanho para a coluna*/
  grid-template-columns: repeat(3, 250px);
}

button {
  cursor: pointer;
}

And the Javascript code to create new images and add to the container

JS:

<script>
    // Quando clicar no botão vai chamar a função de nova imagem
    document.querySelector('button')
      .addEventListener('click', newImage)

    const images = [
      { source: "https://i.ibb.co/xC9r03B/0.jpg" },
      { source: "https://i.ibb.co/hD5gs5R/1.jpg" },
    ]

    function newImage() {
      // Vai gerar um número aleatorio (random) que vai arredondar (floor)
      // E vai fazer uma desestruturação no resultado que vier no array
      const { source } = images[Math.floor(Math.random() * images.length)]

      // criar um novo elemento de imagem
      const img = document.createElement('img')
      // Adicionar uma classe na imagem
      img.classList = 'image'
      img.src = source

      // Selecionar a div de container
      const container = document.querySelector('div.container')
      // Adicionar no container o elemento de imagem
      container.appendChild(img)
    }
  </script>

In case you did not want to repeat the image you can add in newImage function

// vai verificar se essa imagem já esta no container, caso estiver vai cancelar a função
      if(imgExists(source)) return

E Add verification function

  function imgExists(source) {
      const imagens = document.querySelectorAll('img.image')

      for(let image of imagens) {
        if(image.src == source) return true 
      }
    }