Flipping Card with CSS and Javascript

#html #css #javascript #webdev

Hello everyone, today I'll demonstrate how to make a flip-card using HTML, CSS, and Javascript. The full code will be available at codepen, which I will share at the end of this blog, and I will explain the main CSS section.

Let's get started...

HTML -

<div class="card">
   <div class="front">
      {All the content for the front side goes here}
   </div> 
   <div class="back">
      {All the content for the back side goes here}
   </div> 
  <!-- Button to toggle front and back side of the card -->
  <button class="toggle">Toggle Button</button>
</div>

CSS -

.card{
/* All the card related stylings goes here*
}

/* Front side styling */
.
.
/* Back side styling */
.back{
  /* Hiding the backside initially */
  display:none;
}
.
.
/* Toggle Button Styling */
.
.
/* To show the frontside or backside by 
adding this class using JS */
.show{
  display:block;
}

/* To hide the frontside or backside by 
removing this class using JS */
.hide{
  display:none;
}
/* To flip the card 360deg rotation on Y axis */
.flip__card{
  transform:rotateY(-360deg)
}

/* To change the background image of the card
when the backside is visible */
.change_bg{
  background-image:url("some other image");
}

Javascript -

const card = document.querySelector(".card");
const frontSide = document.querySelector(".front");
const backSide = document.querySelector(".back");
const toggleButton = document.querySelector(".contact__toggle")

// Adding a click event on the toggle button
toggleButton.addEventListener("click",(e) => {
  /* By switching these classes, the card will spin and its 
   background color will be changed.*/
  card.classList.toggle("flip__card")
  card.classList.toggle("change_bg")

  /* Toggling the hide and show for front and back
   when the front is visible, back will be hidden
   and vice versa */
  frontSide.classList.toggle("hide")
  backSide.classList.toggle("show")

  // changing the button text based on its current side
  e.target.textContent = e.target.textContent === "Contact" ? "User Info" : "Contact"
  // Changing the button background color to match 
  //with the theme
  e.target.classList.toggle("bg-brown")
})