0

I'm doing a project and its in need for a card flip animation. I've done it, but i got stumble when i try to add more cards into the HTML, the seconnd card doesnt flip on click just as the first one. I cant figure it why it does this. I think its part of the javascsript code.

This is the codepen: https://codepen.io/chellios-byte/pen/ZEeNvOM

const card = document.querySelector('.card__inner');

card.addEventListener('click', function () {
    card.classList.toggle('is-flipped');
});
Balauru Razvan Andrei
  • 5
  • 1

1 Answers1

1

with document.querySelector you are only selecting the first found element. If you have more then one, you need querySelectorAll which returns an array of elements.

const cards = document.querySelectorAll('.card__inner');


cards.forEach(card => {
  card.addEventListener('click', function() {
    card.classList.toggle('is-flipped');
  });
})
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  width: 100%;
  min-height: 100vh;
}

.card__container {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 5rem;
}

.card {
  margin: 10rem auto 0;
  width: 20rem;
  height: 32rem;
}

.card__inner {
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
  cursor: pointer;
  position: relative;
  backface-visibility: hidden;
}

.card__inner.is-flipped {
  transform: rotateY(180deg);
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  backface-visibility: hidden;
  overflow: hidden;
  box-shadow: 0px 3px 18px 3px rgb(0, 0, 0, 0.2);
}

.card__face h2 {
  text-align: center;
  padding: 1rem 0;
  font-size: 1.8rem;
  letter-spacing: 0.1rem;
  font-weight: 500;
}

.card__face p {
  font-size: 1.11rem;
  padding: 0.3rem 1rem;
  letter-spacing: 0.012rem;
  font-weight: 300;
}

.card__face--front {
  background-image: url("/img/mountain-view.webp");
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
}

.card__face--front-text {
  height: 100%;
  margin-top: 16rem;
  background: rgba(228, 228, 228, 0.699);
}

.card__face--back {
  transform: rotateY(180deg);
  backface-visibility: hidden;
  border-radius: 10px;
}

.card__content {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.card__content a {
  text-decoration: none;
  text-transform: uppercase;
  color: rgb(0, 0, 0);
  font-size: 1.3rem;
}

.card__content a:hover {
  color: rgba(hsl(0, 0%, 97%), green, blue, alpha);
}

.card__header {
  width: 100%;
}

.card__header>h2 {
  text-align: center;
  padding: 1rem 0;
  font-size: 2rem;
  letter-spacing: 0.1rem;
}
<!DOCTYPE html>
<html lang="en">

<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" />
  <link rel="stylesheet" href="style.css" />
  <title>Card Flip</title>
</head>

<body>
  <div class="card__container">
    <div class="card">
      <div class="card__inner">
        <div class="card__face card__face--front">
          <div class="card__face--front-text">
            <h2>Mountain view</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis facere blanditiis vitae dolorum architecto laboriosam quas numquam debitis, eaque, ducimus perspiciatis praesentium earum molestias in ab commodi, mollitia voluptate id.
            </p>
          </div>
        </div>
        <div class="card__face card__face--back">
          <div class="card__content">
            <div class="card__header">
              <h2>Himalaya</h2>
            </div>
            <div class="card__body">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. At, vel, quas ducimus consequuntur quaerat numquam optio molestiae ad libero eos perferendis minima eveniet eius consequatur dolorum aperiam iusto incidunt quod quibusdam! Adipisci est sequi aut
              eius possimus expedita laboriosam consequuntur, quo beatae necessitatibus delectus quisquam ipsam! Libero, vero porro aspernatur quibusdam adipisci esse perferendis tenetur voluptatibus quas, sed expedita. Assumenda fugiat officia consequatur.
              Perspiciatis, ex doloribus aliquid magnam inventore quia sit debitis hic totam impedit fugiat ipsam suscipit est recusandae?
            </div>
            <a href="#">View more</a>
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card__inner">
        <div class="card__face card__face--front">
          <div class="card__face--front-text">
            <h2>Mountain view</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis facere blanditiis vitae dolorum architecto laboriosam quas numquam debitis, eaque, ducimus perspiciatis praesentium earum molestias in ab commodi, mollitia voluptate id.
            </p>
          </div>
        </div>
        <div class="card__face card__face--back">
          <div class="card__content">
            <div class="card__header">
              <h2>Himalaya</h2>
            </div>
            <div class="card__body">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. At, vel, quas ducimus consequuntur quaerat numquam optio molestiae ad libero eos perferendis minima eveniet eius consequatur dolorum aperiam iusto incidunt quod quibusdam! Adipisci est sequi aut
              eius possimus expedita laboriosam consequuntur, quo beatae necessitatibus delectus quisquam ipsam! Libero, vero porro aspernatur quibusdam adipisci esse perferendis tenetur voluptatibus quas, sed expedita. Assumenda fugiat officia consequatur.
              Perspiciatis, ex doloribus aliquid magnam inventore quia sit debitis hic totam impedit fugiat ipsam suscipit est recusandae?
            </div>
            <a href="#">View more</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="script.js"></script>
</body>

</html>
Pan Vi
  • 627
  • 6
  • 17