DEV Community

Cover image for JS Flashcards: Flipping Cards Part 1
Jamie McCarville πŸ‡¨πŸ‡¦
Jamie McCarville πŸ‡¨πŸ‡¦

Posted on β€’ Originally published at mccarville.dev

8 4

JS Flashcards: Flipping Cards Part 1

This article was originally posted on mccarville.dev

When I set out to develop a project that uses flash cards, it was obvious that it would be essential to have cards that would flip when you click on them. I had not worked much with animations other than some transitions and hover effects, so I was going to have to do some googling and find some examples of how I could build my cards.

I will be breaking down the article into two parts that will address the obstacles that I came across at each step. Part 1 will cover how I went about building the cards and getting them to flip using Vue. In Part 2, I will cover how I put the content in the cards and some of the issues I had to work around.

Building a Flipping card

The first step was to find some examples of some card flipping and then translate that to use in Vue. This actually ended up taking more time and being harder than I had anticipated. I found a lot of codepens and some Vue plugins that had flipping cards, but many of the examples weren't exactly what I was looking for. Some of the implementations just didn't work for how I wanted to build my cards and I was having a difficult time wrapping my head around how I was going to put the cards together. After lots of searching, I came across a great article by David Desandro called "Intro to CSS 3D Animations." His description of how to build the card clicked in a way that none of the other articles that I read had. It just made sense and I could see a path for implementing the card in Vue. I'm going to put the beginning of the article here, but I would highly recommend that you check out David's full article.

Card structure - excerpt from David's article

"Here’s the basic markup we’ll need:

<div class="scene">
  <div class="card">
    <div class="card__face card__face--front">front</div>
    <div class="card__face card__face--back">back</div>
  </div>
</div>

The .scene will house the 3D space. The .card acts as the 3D object. Two separate .card__face elements are used for the faces of the card. I recommend using this same pattern for any 3D transform: scene, object, and faces. Keeping the 3D space element and the object element separate establishes a paradigm that is simple to understand and easier to style."

Check out the rest of the article to see how he styles the card. Here is his codepen of the card in action.

Implementing the flipping card in Vue.js

In the first example, David used vanilla JS to get the card to flip. He selected the .card element with document.querySelector() and then added an event listener that implemented a class toggle on click. I did something very similar, but using Vue. Take a look at the code below and I'll walk you through my implementation.


(you can drag the white bar on the left to shrink the preview and see the code)

  1. line 21 - I added the data property cardOne and set the value to "start".

  2. line 6 - I added a click listener on .card that toggles the data property cardOne. It uses a ternary operator to determine what cardOne is set to and then changes it, either to "flipped" or back to "start".

  3. line 7 - I pass the object {flipme: cardOne == 'flipped'} to v-bind:class to dynamically toggle classes. When cardOne == 'flipped', the flipme class (line 71) will be applied to .card.

And there you have it, a flipping card implemented in Vue.js. If you haven't had a chance to check out JS Flashcards, you can find the project here.

Next up in Part 2, I will be covering how I went about putting content in the cards and how I got multiple cards to work together.

** I hope everyone is staying safe as we deal with COVID-19. My best wishes to everyone during this time and I hope you and yours are doing well.

SurveyJS custom survey software

JavaScript UI Library for Surveys and Forms

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

View demo

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

πŸ‘₯ Ideal for solo developers, teams, and cross-company projects

Learn more

πŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay