How do I get my cards to shuffle exactly?

Question

I'm struggling to understand how to shuffle my cards for my card matching game. Would someone please be kind enough to break things down line by line, giving me instructions in a step by step approach to what I need to do to shuffle my cards. Would mean a lot as I'm on a course and have until July 8th to complete it.

HTML

<div class="Soprano-card">
            <div class="Back-card">
                <img class="Soprano_image" src="assets/img/Characters/Tony-Soprano.jpg" alt="Characters">
            </div>
            <div class="front-card">
                <img class="Soprano_image" src="assets/img/Sopranos-Title.jpg" alt="Sopranos-Title">
            </div>
        </div>

JS

// Flipping the cards

let cards = document.querySelectorAll('.Soprano-card');
let card = [...cards];

function flipCard() {
  this.classList.toggle("flip");
}
cards.forEach((card) => card.addEventListener("click", flipCard));

Does this answer your question? [How to randomize (shuffle) a JavaScript array?](https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array) — pilchard, Jun 27 '21 at 00:09

vanowm · Answer 1 · 2021-06-26T23:55:05.100

School assignment are not prized here.

Here are some pointers, assuming by "shuffle" you mean randomly place cards on screen:

You already have the array of your cards, now you can go through them using your forEach loop and using combination of Math.random() and el.append() move them within their parent element.

If you need flip them randomly, take a look at el.classList.toggle() on how you can use it.

Good luck.

How do I get my cards to shuffle exactly?

1 Answers1