On this blog I will teach how to create a flip card with event listeners.
The first step is to write your code in HTML starting with the generic syntax and including the external files.
<!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">
</head>
<h1>Movie Card</h1>
<body>
<!--card 1-->
<div class="card">
<div class="card_inner">
<div class="card_face card_face--front">
<h3>“Let me explain something to you. Um, I am not “Mr. Lebowski”. You’re Mr. Lebowski. I’m the Dude. So that’s what you call me. You know, that or, uh, His Dudeness, or uh, Duder, or El Duderino if you’re not into the whole brevity thing.”
</h3>
<script src="movieCard.js"></script>
</body>
</html>
Lets add a div tag with a class attribute, then two more divs nested inside the main div. We will need an h1 tag for the title, follow by and image tag to insert the image source.
<div class="card_face card_face--back">
<div class="card_content">
<div class="card_header">
<h1>The Big Lebowski</h1>
<img src="./images/big_lewoski.jpg" alt="" class="movie-info"/>
<h2>The Big Lewoski</h2>
</div>
</p>
</div>
</div>
</div>
</div>
</div>
To make the card flip, all you have to do is select the ".card_inner" attribute and implement an event listener as illustrated below.
const card = document.querySelector('.card_inner');
card.addEventListener('click', () => {
card.classList.toggle('is-flipped');
})
Here's the final piece
Photo by Jopwell from Pexels
Top comments (0)