Nov 20, 2022

# Solution 1 :

I would suggest that you use grid layout for such implementation:

nrCards = 12;
var card = document.querySelectorAll(".card");
var cards = generateRandomCard(nrCards);
var startBtn = document.querySelector("#start");

function generateRandomCard(num) {
var arr = [];
for (var i = 0; i < num; i++) {
arr.push(randomCard());
}
}

function randomCard() {
var result = '';
var letters = "CDHS";

var number = Math.floor((Math.random() * 9) + 2);
var letter = letters[Math.floor(Math.random() * 4)];
result += "PNG/" + number + letter + ".png";
return result;

}

for (var i = 0; i < nrCards; i++) {
card[i].src = randomCard();
//card[i].src ="PNG/8S.png";
//console.log(card[i]);

}
//console.log("----------------------");
})
body{
background-color:#13060d;
margin:0;
font-family: 'Gotu', sans-serif;
}
#container{
margin-top: 15%;
max-width: 1000px;
margin:20px 50px;
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 50px;
grid-row-gap: 50px;
}

img{
width:auto;
background:purple;

}
h1{
color:white;
margin-bottom:0;
}
#start{
border-style: none;
font-size:2rem;
}
<!DOCTYPE html>
<html>
<title>Matching Cards Game</title>

<body>
<h1 id="gameTitle">The Card Matching Game</h1>
<div id="container">
<img class="card" src="">
<img class="card" src="">
<img class="card" src="">
<img class="card" src="">

<img class="card" src="">
<img class="card" src="">
<img class="card" src="">
<img class="card" src="">

<img class="card" src="">
<img class="card" src="">
<img class="card" src="">
<img class="card" src="">

</div>
<button id="start">Start Game</button>
<script type="text/javascript" src="code.js"></script>
</body>
</html>

# Problem :

I want to create a matching card game in JavaScript. Firstly,i just want to generate 12 random cards into the body.

When I press Start Game,the container is filled with 12 random images. Doing it multiple times,sometimes I spread those images into the container like this (second picture). Sometimes it works just fine( first picture)

## HTML

<!DOCTYPE html>
<html>
<title>Matching Cards Game</title>
<body>
<h1 id="gameTitle">The Card Matching Game</h1>
<div id="container">
<img class="card" src="">
<img class="card" src="">
<img class="card" src="">
<img class="card" src="">

<img class="card" src="">
<img class="card" src="">
<img class="card" src="">
<img class="card" src="">

<img class="card" src="">
<img class="card" src="">
<img class="card" src="">
<img class="card" src="">

</div>
<button id="start">Start Game</button>
<script type="text/javascript" src="code.js"></script>
</body>
</html>

## CSS

body {
background-color: #13060d;
margin: 0;
font-family: 'Gotu', sans-serif;
}

#container {
margin-top: 15%;
max-width: 1000px;
margin: 20px auto;
}

img {
width: 17.5%;
background: purple;
float: left;
margin: 0.5% 3% 0.5%;
}

h1 {
color: white;
margin-bottom: 0;
}

#start {
border-style: none;
font-size: 2rem;
}

## JavaScript

nrCards = 12;
var card = document.querySelectorAll(".card");
var cards = generateRandomCard(nrCards);
var startBtn = document.querySelector("#start");

function generateRandomCard(num) {
var arr = [];
for (var i = 0; i < num; i++) {
arr.push(randomCard());
}
}

function randomCard() {
var result = '';
var letters = "CDHS";

var number = Math.floor((Math.random() * 9) + 2);
var letter = letters[Math.floor(Math.random() * 4)];
result += "PNG/" + number + letter + ".png";
return result;
}

for (var i = 0; i < nrCards; i++) {
card[i].src = randomCard();
//card[i].src ="PNG/8S.png";
console.log(card[i]);

}
console.log("----------------------");
})

I would appreciate some help.. Thank you!

### Comment posted by junvar

You should attempt to debug your own code.

### Comment posted by Prikesh Savla

Mostly a styling issue. the height of your cards might not be the same. a small offset in that might be causing this. you can try this. move the sets for 4 cards in a single div. to make a row of cards. now the cards stack and still they wont depend on the previous cards height to match