Making 3d transform card flip through button inside card, not through clicking the entire card

Question

I have a bootstrap card with a 3d transformation that makes it flip. My current issue is how it's clicked to be flipped. I have some jQuery that makes the entire card clickable for it to activate and be flipped but its not what I would like since there's an interactive carousel inside.

I have an <h3> element inside the face of card(near the bottom) with class .flip-card-btn that I would rather for people to click instead. Any way I can achieve this? I've tried changing the .querySelector to be the flip-card-btn class instead of #project-card id and even some other jquery snippets but still no luck. Would appreciate the help in helping solve this. Thanks!

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

/*project card styles start*/

.scene {
  width: 810px;
  height: 430px;
  border: ;
  perspective: 1400px;
}

#project-card {
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
  position: relative;
  border: none;
}

#project-card .card-columns {}

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

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
}

#project-card .card__face--front {
  background: #fff;
  border: 2px solid #001866;
  border-radius: 4px;
  color: #001866;
}

.card__face--back {
  background: #001866;
  color: #fff;
  border: 2px solid #ffd633;
  border-radius: 4px;
  transform: rotateY(180deg);
}


/*project cards container*/

#project-cards-contain {
  max-width: 96%;
  margin: 50px auto 0px 3px;
}

#project-cards-contain .fa {
  color: #001866;
  font-size: 1.5em;
}

#project-cards .card {
  border: none;
}

#project-cards .card-body {
  padding: 0;
}

#project-cards img {
  width: 40%;
  height: 14em;
}

#project-cards p {
  margin-top: 7px;
}

.flip-card-btn {
  font-size: 25px;
  color: #cccccc;
  text-align: right;
  margin-right: 5em;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<div class="scene scene--card card-deck">
  <div id="project-card" class="card">
    <!--web side-->
    <div class="card__face card__face--front">
      <h4 style="text-align:center;">PROJECTS: WEB & DESIGN</h4>
      <div id="project-cards-contain" class="carousel slide" data-ride="carousel">
        <div id="project-cards" class="carousel-inner">
          <div class="carousel-item active">
            <div class="card">
              <img class="card-img-top mx-auto" src="assets/images/profile-image.jpg" alt="Project Card1" />
              <div class="card-body text-center">
                <p>My Profile Webpage</p>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <div class="card">
              <img class="card-img-top mx-auto" src="assets/images/profile-image.jpg" alt="Project Card2" />
              <div class="card-body text-center">
                <p>My Profile Webpage</p>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <div class="card">
              <img class="card-img-top mx-auto" src="assets/images/profile-image.jpg" alt="Project Card3" />
              <div class="card-body text-center">
                <p>My Profile Webpage</p>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <div class="card">
              <img class="card-img-top mx-auto" src="assets/images/profile-image.jpg" alt="Project Card4" />
              <div class="card-body text-center">
                <p>My Profile Webpage</p>
              </div>
            </div>
          </div>
        </div>
        <!-- Controls -->
        <a class="carousel-control-prev" href="#project-cards-contain" role="button" data-slide="prev">
          <span class="fa fa-arrow-left" style="color:#001866;" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#project-cards-contain" role="button" data-slide="next">
          <span class="fa fa-arrow-right" style="color:#001866;" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
      <h3 class="flip-card-btn">FLIP CARD</h3>
    </div>
    <!--woodworking side-->
    <div class="card__face card__face--back">
      back
    </div>
  </div>
</div>

Answer 1

In javascript code you have selected #project-card which is the entire body of your card. And click function works wherever you click on the body of the card. If you want click eventListener to work only on FLIP CARD button/text, then you should choose that item/class.

Here is my suggestion for your javascript:

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

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

Now, it flips your card upon clicking FLIP CARD, however you cannot flip back. Therefore, I added eventListener to the 'back' text on the backside of the card to flip back to the previous position.

I hope it helps!