DEV Community

Cover image for JavaScript Event Listeners
Patricia C.
Patricia C.

Posted on

JavaScript Event Listeners

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">
    <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">
<h1>Movie Card</h1>
    <!--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.”

    <script src="movieCard.js"></script>
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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', () => {
Enter fullscreen mode Exit fullscreen mode

Here's the final piece

Photo by Jopwell from Pexels

Top comments (0)