JavaScript

I’m trying to shuffle (on button click) multiple cards that are in the same container, using only javascript. They basically need to change position every time I click the button.

My idea was to make a function that would on click set their position to absolute, with top and left 0,so they would all overlap. I’ve managed to do that, but I’m not sure how to proceed and what to do next. Maybe this isn’t even a good way to do it. So if there is simpler solution, feel free to share it with me.

I started learning javascript couple of months ago, so my knowledge is still pretty basic.

Any help is welcome

html

<!DOCTYPE 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" type="text/CSS" href="memory.css" />
  </head>

  <body>
    <div class="card-container">

    <div class="first-card card" data-value="1">
      <div class="front">
        front
      </div>
      <div class="back">
        back
      </div>
    </div>

    <div class="second-card card" data-value="2">
      <div class="front">
        front
      </div>
      <div class="back">
        back
      </div>
    </div>

    <div class="third-card card" data-value="3">
      <div class="front">
        front
      </div>
      <div class="back">
        back
      </div>
    </div>

    <div class="fourth-card card" data-value="4">
      <div class="front">
        front
      </div>
      <div class="back">
        back
      </div>
    </div>


    <div class="first-card card" data-value="1">
      <div class="front">
        front
      </div>
      <div class="back">
        back
      </div>
    </div>

    <div class="second-card card" data-value="2">
      <div class="front">
        front
      </div>
      <div class="back">
        back
      </div>
    </div>

    <div class="third-card card" data-value="3">
      <div class="front">
        front
      </div>
      <div class="back">
        back
      </div>
    </div>

    <div class="fourth-card card" data-value="4">
      <div class="front">
        front
      </div>
      <div class="back">
        back
      </div>
    </div>

  </div>


  <div class="button-container">
    <div>
      <button class="flip-all-cards">FLIP ALL</button>
    </div>

    <div>
      <button class="position-button">SHUFFLE CARDS</button>
    </div>
  </div>


    <script src="memory.js"></script>
  </body>
</html>

javascript

document.querySelectorAll(".first-card").forEach(container => {
    container.addEventListener('click',flipCard)
})

document.querySelectorAll(".second-card").forEach(container => {
    container.addEventListener('click',flipCard)
})

document.querySelectorAll(".third-card").forEach(container => {
    container.addEventListener('click',flipCard)
})

function flipCard(card){
    card.currentTarget.classList.toggle("flip")
    
}
/*-------------------------------------------------------------------------------*/ 
document.querySelector(".flip-all-cards").addEventListener("click",function(){
    document.querySelectorAll(".card").forEach(container => {
        container.classList.toggle("flip")

})
})

document.querySelector(".position-button").addEventListener("click",function(){
    document.querySelectorAll('.card').forEach(card => {
        card.style.position = "absolute"
        card.style.top = "0"
        card.style.left = "0"
    })
})

css

*,
*::before,
*::after {
  box-sizing: border-box;
}

body{
    padding: 100px;
}

.card-container{
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 10px;
    position: relative;
    height: 700px;

}

.first-card, .second-card, .third-card, .fourth-card{
    width: 100px;
    height: 150px;
    border: 3px solid black;
    border-radius: 10px;
   
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
    margin: 10px;

}

.flip{
    transform: rotateY(180deg);
}
/*
.test-div:hover {
    transform: rotateY(180deg);
}*/

.front, .back{
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.front{
    z-index: 2;
    transform: rotateY(0deg);
}

.back{
    transform: rotateY(180deg);
}

.first-card .front{
    background: lightblue;
    width: 100%;
    height: 100%;

}

.second-card .front{
    background: red;
    width: 100%;
    height: 100%;
}

.third-card .front{
    background:lime;
    width: 100%;
    height: 100%;
}

.fourth-card .front{
    background:yellow;
    width: 100%;
    height: 100%;
}

.first-card .back,.second-card .back, .third-card .back, .fourth-card .back{
    background: black;
    width: 100%;
    height: 100%;
}

This is the code I have so far

Answer

Instead of trying to rearrange the cards in the DOM, you may consider writing an array in your JS with all the possible colors, then changing the front color of each div with a color from that array.

You can then use a shuffle function like the one here to rearrange the order of the colors in the array.

How to randomly position (shuffle) multiple divs inside container div with button click – javascript

Advertisement

Answer