Flashcard Maker

Flashcard Master

Create, Flip, and Learn

Front Side (Question)

Back Side (Answer)

 

Visual Concepts

To understand how the flipping works in the code above, it's helpful to visualize the stack of layers being manipulated by the CSS:

Features Explained

1. 3D CSS Transforms: The card uses rotateY(180deg). When you click, JavaScript toggles the .flipped class, and the browser smoothly animates the rotation using CSS transitions.

2. Auto-Expanding Deck: The .flashcard-grid uses CSS Grid with repeat(auto-fill), which means the layout automatically adjusts from 1 column on mobile to 3 or 4 columns on large monitors.

3. Backface Visibility: The property backface-visibility: hidden; is crucial. Without it, you would see the "mirrored" text of the front side when looking at the back side.

4. Local Storage: By using localStorage.setItem(), the cards are saved in the user's browser cache. You can close the browser and return later, and your study material will still be there.