After creating a cardArray to store card objects, I went through each item in the array to generate images as cards. These card images were then appended to the grid div as children. Additionally, I set up an event listener for the shuffle button. However, I encountered challenges when trying to load the cards into the grid.
<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">
<title>Shuffle Picture Cards</title>
<script>
//create cards
const cardArray =[
{name:'bass',
img:'images/bass.png'},
{name:'bass',
img:'images/bass.png'},
{name:'burger',
img:'images/burger.png'},
{name:'burger',
img:'images/burger.png'},
{name:'jamaica',
img:'images/jamaica.png'},
{name:'jamaica',
img:'images/jamaica.png'},
{name:'mbappe',
img:'images/mbappe.png'},
{name:'mbappe',
img:'images/mbappe.png'},
{name:'napali',
img:'images/napali.png'},
{name:"napali",
img:'images/napali.png'},
{name:'racecar',
img:'images/racecar.png'},
{name:'racecar',
img:'images/racecar.png'},
]
//shuffle card array
cardArray.sort(() => 0.5 - Math.random())
//shuffle from shfl-btn
const shuffle = document.getElementById('shfl-btn');
//eventListener for click on shuffle button
shuffle.addEventListener('click', createBoard);
//get grid
const grid = document.querySelector('.grid');
//create cards board
function createBoard() {
for(let i=0; i < cardArray.length; i++) {
var card = document.createElement('img')
card.setAttribute('src', 'images/astart.png')
//card.setAttribute('data-id', i)
//card.addEventListener('click', flipCard)
grid.appendChild(card)
}
}
</script>
<style>
body{
box-sizing: border-box;
align-items: center;
}
img{
height:100px;
width:100px
}
button{
padding:10px;
width:80px;
border:solid black 2px;
border-radius:4px;
cursor:pointer;
margin-top:20px;
}
.grid{
height:300px;
width:400px;
border:solid blue 4px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin:0 auto;
border-radius: 10px;
}
.shfl-btn{
align-items: center;
margin:0 auto;
width:400px;
}
.shuffle{
margin-left:160px;
}
</style>
</head>
<body>
<h1>Shuffle picture cards</h1>
<div class="grid" id="grid">
</div>
<div class="shfl-btn"><button class="shuffle"&g...
Upon calling the createBoard function, my aim is for the cards to populate and rearrange when the shuffle button is clicked.