JS: How to get multiple cards to flip on website?

Question

Hi so I found this card flip animation https://codepen.io/desandro/pen/LmWozd and I decided to style it for my website. I intend to have a bunch of these cards (1 for each letter of the alphabet). However right now the code does not work for more than one card. I am not too familiar with JavaScript so I can't figure out why this code does not work. I have tried a few methods I found online but none of them seem to work either but they also didn't quiet apply to card flipping so I guess that might be part of the issue. Any help is appreciated!

Here's my code:

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

.scene {
    width: 120px;
    height: 100px;
    margin: 40px 0;
    perspective: 600px;
    border-radius: 25px;
  }
  
 .card {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transform-style: preserve-3d;
    transform-origin: center right;
    transition: transform 1s;
    border-radius: 25px;
  }
  
  .card.is-flipped {
    transform: translateX(-100%) rotateY(-180deg);
  }
  
  .card__face {
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 200%;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 40px;
    backface-visibility: hidden;
    border-radius: 25px;
  }
  
  .card__face--front {
    background: #C1C6C4;
  }
  
  .card__face--back {
        background-size: contain;
        background-repeat: no-repeat;
    transform: rotateY(180deg);
  }

<div class="scene scene--card">
          <div class="card" id="card-1">
            <div class="card__face card__face--front" style="background: #FFA894 !important;">A</div>
            <div class="card__face card__face--back" style="background-color: red"></div>
          </div>
        </div>
        <div class="scene scene--card">
          <div class="card" id="card-2">
            <div class="card__face card__face--front" style="background: #FFA894 !important;">A</div>
            <div class="card__face card__face--back" style="background-color: red">
             </div>
             <!-- color is a placeholder -->
            
          </div>
        </div>

Spectric · Accepted Answer · 2021-03-23T02:05:13.090

Use querySelectorAll and a loop. querySelector returns the first element in hierarchical order. querySelectorAll returns an array of selected elements

var cards = document.querySelectorAll('.card');
for(let i = 0; i < cards.length; i++){
  cards[i].addEventListener( 'click', function() {
  cards[i].classList.toggle('is-flipped');
});
}

.scene {
    width: 120px;
    height: 100px;
    margin: 40px 0;
    perspective: 600px;
    border-radius: 25px;
  }
  
 .card {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transform-style: preserve-3d;
    transform-origin: center right;
    transition: transform 1s;
    border-radius: 25px;
  }
  
  .card.is-flipped {
    transform: translateX(-100%) rotateY(-180deg);
  }
  
  .card__face {
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 200%;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 40px;
    backface-visibility: hidden;
    border-radius: 25px;
  }
  
  .card__face--front {
    background: #C1C6C4;
  }
  
  .card__face--back {
        background-size: contain;
        background-repeat: no-repeat;
    transform: rotateY(180deg);
  }

<div class="scene scene--card">
          <div class="card" id="card-1">
            <div class="card__face card__face--front" style="background: #FFA894 !important;">A</div>
            <div class="card__face card__face--back" style="background-color: red"></div>
          </div>
        </div>
        <div class="scene scene--card">
          <div class="card" id="card-2">
            <div class="card__face card__face--front" style="background: #FFA894 !important;">A</div>
            <div class="card__face card__face--back" style="background-color: red">
             </div>
             <!-- color is a placeholder -->
            
          </div>
        </div>

Thanks this solved it! I definitely tried querySelectorAll previously, but didn't use a loop when I had tried it which seems to be my issue. — lauren, Mar 23 '21 at 13:01

JS: How to get multiple cards to flip on website?

1 Answers1