The card clicked should be flip

Asked Sep 19 '20 at 13:11

Active Sep 19 '20 at 13:11

Viewed 22 times

I am having 16 cards, I want to flip the card which I click. The code I have written is flipping the first card after click but it is not applicable for other cards. Please help me so that I can flip the card which I clicked.

HTML

<div class="scene">
        <div class="card">
          <div class="card__face card__face--front">front</div>
          <div class="card__face card__face--back">back</div>
        </div>
      </div>

var card = document.querySelector('.card');
    card.addEventListener('click', function() {
      card.classList.toggle('is-flipped');

asked Sep 19 '20 at 13:11

Gaurav Kulkarni

1

Use `document.querySelectorAll('.card')` – AbbasEbadian Sep 19 '20 at 13:14
I have tried that but by doing that none of the cards is flipping. – Gaurav Kulkarni Sep 19 '20 at 13:15
You should change the event binding as well.Iterate over `card` list and addEventListener to all. – AbbasEbadian Sep 19 '20 at 13:21
If you privice your css code for `.is-flipped` , i can create a working snippet. – AbbasEbadian Sep 19 '20 at 13:26
.card.is-flipped { transform: rotateY(180deg); } – Gaurav Kulkarni Sep 19 '20 at 13:27
1

[JSFiddle](https://jsfiddle.net/6dqnygex/) – AbbasEbadian Sep 19 '20 at 13:36

The card clicked should be flip

0 Answers0