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
