JavaScript-JQuery - Adding Class on click

[jaydenkeh]

HTML:

<div class="card">
   <div class="card-back bi bi-bicycle">

CSS:

.card-back {
  transform: rotateY(270deg) translateZ(10px);
}
.flipped {
  transform: rotateY(180deg) translateZ(0);
}

Above are my existing code structure; am trying to add the ‘flipped’ class into the ‘card-back’ class ON CLICK in order to flip my card - desired output:
<div class="card-back flipped bi bi-bicycle">

Wrote the following function but it couldn’t work:

const flipCard = () => {
  $(".card-back").on("click", (event) => {
    $(event.currentTarget).classList.add("flipped");
  });
};
flipCard();

Any help/advice would be appreciated!

[lasjorg]

If you use a normal function for the callback you can also use this which I think is more common with jQuery. Then you just keep chaining jQuery methods (like addClass or toggle for example).

const flipCard = () => {
  $(".card-back").on("click", function (event) {
    $(this).addClass("flipped");
  });
};