<div class='game'>
<div class='card' data-card='5'>5</div>
<div class='card' data-card='3'>3</div>
<div class='card' data-card='5'>5</div>
<div class='card' data-card='1'>1</div>
<div class='card' data-card='3'>3</div>
<div class='card' data-card='1'>1</div>
</div>
.card {
display: inline-block;
padding: 20px;
border: 1px solid;
margin: 5px;
color: white;
border-color: black;
}
.flip {
color: black;
}
document.querySelector('.game').addEventListener('click', function(ev) {
const div = ev.target;
if (div.classList.contains('card')) {
div.classList.toggle('flip');
const matchingCard = document.querySelector('...');
if (matchingCard) {
matchingCard.classList.toggle('flip');
}
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.