mercredi 4 novembre 2020

Random Flip Card HTML JavaScript

I'm supposed to make a set of cards appear on random orders and it seems like I haven't been able to do so due to the amount of error seen on the console. I'm not confident about writing JavaScript as I'm still in the learning process. There are 38 photo cards and when I refresh the page, the photos are supposed to change their orders.

  let card = document.createElement("div");
  let front = document.createElement("div");
  let back = document.createElement("div");
  front.classList.add("card-front");
  back.classList.add("card-back");
  card.appendChild(front);
  card.appendChild(back);
  card.classList.add("card");
  let img = document.createElement('img');
  parent.appendChild(img);

  let cards = [];
  for (let i = 0; i < 19; i++) {
    let num = document.createElement('card-front');
    num.appendChild(i);
    cards.push(num);
    //num.textContent = r;
    //pearent.appendChild(num);
  }

  while(cards.length != 0) {
    let r = Math.floor(Math.random()*cards.length);
    let n = cards.splice(r, 1);
    parent.appendChild(n[0]);
    let cont = document.getElementById("CONTAINER");
    parent.appendChild(n[0]);
  }

The HTML looks like this




Aucun commentaire:

Enregistrer un commentaire