I was trying to create a flipcard with multiple faces but Im not entirely sure how to make the change whenever I click the card. When I'm on the console I can see that the class was added but the face is still the same. I want it to be grey background, Name: Jane, grey background, Name: John. Thats the pattern I am trying to create. I have janeCard and johnCard at the end since I'm not 100% sure how to toggle between them.
Here is the link to my codepen if anyone wants to see. https://codepen.io/heidibonilla/pen/abyRrBg
<section class="card-area">
<div class="card">
<div class="inner-card jane" id="clicks">
<div class="front"></div>
</div>
</div>
// Card will flip on click
const flipCard = document.querySelector('.inner-card');
flipCard.addEventListener('click', function() {
flipCard.classList.toggle('is-flipped');
})
// Set a var to count the clicks
let clicks = document.getElementById('clicks');
let count = 0;
clicks.onclick = function() {
count += 1;
console.log(count);
if(count % 2 == 0) {
// show front of card
console.log('even');
} else {
// switch between john or jane
janeCard.classList.toggle('john');
console.log('odd');
console.log(janeCard)
}
}
const janeCard = document.querySelector('.jane');
const johnCard = document.querySelector('.john');
janeCard.innerHTML = `<div class="front">
</div>
<div class="back">
<div class="back-info">
<h2>Jane Doe</h2>
<p><strong>Title:</strong> Web Developer</p>
<p><strong>Email:</strong> example@example.com</p>
<p><strong>Phone:</strong> (999) 999 - 9999</p>
</div>
</div>`
johnCard.innerHTML = `<div class="back">
<div class="back-info">
<h2>John Doe</h2>
<p><strong>Title:</strong> iOS Developer</p>
<p><strong>Email:</strong> example@example.com</p>
<p><strong>Phone:</strong> (999) 999 - 9999</p>
</div>
</div>`