1
resposta

Dúvida Array

alguém poderia me ajudar com a lógica? estou praticando a ideia é são 5 cartas e cada uma corresponde um** valor 2,3,4,5,6 ** ao mesmo tempo quero que essas 5 cartas apareça no html na div de forma dinamica com base de casas que percorre no Array agora não consegui pegar a lógica para cada valor desse ir para cada carta parte de meu código

public configCartas = [2,3,4,5,6]; constructor() { }

ngOnInit() {

//console.log("QTD CARTAS", this.configCartas);
this.listaCartas();

}

listaCartas(){

for (let cartas = 0; cartas < this.configCartas.length;cartas++) {

  console.log("CARTAS", cartas);

  console.log("config",this.configCartas);

  this.configCartas[0];

}

}

1 resposta

Olá! Pelo que eu entendi, você está tentando gerar dinamicamente as cartas correspondentes a cada valor do array configCartas na div do HTML. Para fazer isso, você pode usar um loop for para percorrer o array e, dentro do loop, criar elementos HTML para cada carta e adicioná-los à div.

Aqui está um exemplo de como você pode fazer isso usando JavaScript puro:

// selecione a div onde as cartas serão exibidas
const divCartas = document.querySelector("#div-cartas");

// defina um array com os naipes das cartas
const naipes = ["♠", "♥", "♦", "♣"];

// percorra o array configCartas
for (let i = 0; i < this.configCartas.length; i++) {
  const valor = this.configCartas[i];

  // crie um elemento de carta
  const carta = document.createElement("div");
  carta.classList.add("carta");

  // adicione o valor e o naipe da carta
  carta.textContent = valor + naipes[i % 4];

  // adicione a carta à div
  divCartas.appendChild(carta);
}

Neste exemplo, estamos criando um elemento div para cada carta e adicionando o valor da carta (2 a 6) e um naipe aleatório (usando o array naipes) ao texto da carta. Em seguida, adicionamos a carta à div selecionada com appendChild.

Lembre-se de que, para que isso funcione corretamente, você precisa ter um elemento HTML com o id div-cartas em sua página, onde as cartas serão exibidas. Além disso, você pode personalizar a aparência das cartas usando CSS.