I have a problem.I would like to create a flashcard. First I see a word in a certain language and when I press on it, the card should turn round and the word in the other language should be visible.
Everything works so far. But what doesn’t work is my animation. How can I make it so that when I press on the card, it turns round like in reality?
I have the classes .flashcard-front,.flashcard-back classes. However, it does not work.
What do I have to change to make it work?
import React, { useState } from 'react';
import { FaSyncAlt, FaHeart, FaVolumeUp } from 'react-icons/fa';
import { GB, RU } from 'country-flag-icons/react/3x2';
const Flashcard = ({ words }) => {
const [numWords, setNumWords] = useState('all');
const [direction, setDirection] = useState('random');
const [currentWordIndex, setCurrentWordIndex] = useState(0);
const [flipped, setFlipped] = useState(false);
words = [
{ en: 'apple', ru: 'яблоко', stress: 'я́блоко', image: 'https://via.placeholder.com/150' },
{ en: 'car', ru: 'машина', stress: 'маши́на', image: 'https://via.placeholder.com/150' },
];
const filteredWords = words.slice(0, numWords === 'all' ? words.length : parseInt(numWords));
const handleFlip = () => setFlipped(!flipped);
const getDirection = () => {
if (direction === 'random') {
return Math.random() > 0.5 ? 'enToRu' : 'ruToEn';
}
return direction;
};
const currentDirection = getDirection();
const currentWord = filteredWords[currentWordIndex];
const displayWord = flipped
? currentDirection === 'enToRu'
? currentWord.ru
: currentWord.en
: currentDirection === 'enToRu'
? currentWord.en
: currentWord.ru;
const handleNext = () => {
setCurrentWordIndex((prevIndex) => (prevIndex + 1) % filteredWords.length);
setFlipped(false);
};
return (
<div className="p-4 bg-[#F9FBFF] h-screen flex flex-col items-center">
{/* Step 1: How many words */}
<h1 className="text-xl font-bold mb-4">How many words do you want to train?</h1>
<div className="flex space-x-4 mb-6">
<button
onClick={() => setNumWords('all')}
className={`px-4 py-2 rounded ${numWords === 'all' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
>
All Words
</button>
<button
onClick={() => setNumWords('10')}
className={`px-4 py-2 rounded ${numWords === '10' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
>
10 Words
</button>
<button
onClick={() => setNumWords('5')}
className={`px-4 py-2 rounded ${numWords === '5' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
>
5 Words
</button>
</div>
{/* Step 2: Choose direction */}
<h1 className="text-xl font-bold mb-4">Choose translation direction</h1>
<div className="flex space-x-4 mb-6">
<button
onClick={() => setDirection('enToRu')}
className={`px-4 py-2 rounded ${direction === 'enToRu' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
>
<GB className="flag-round w-6 h-6" /> → <RU className="flag-round w-6 h-6" />
</button>
<button
onClick={() => setDirection('ruToEn')}
className={`px-4 py-2 rounded ${direction === 'ruToEn' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
>
<RU className="flag-round w-6 h-6" /> → <GB className="flag-round w-6 h-6" />
</button>
<button
onClick={() => setDirection('random')}
className={`px-4 py-2 rounded ${direction === 'random' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
>
<RU className="flag-round w-6 h-6" /> ↔ <GB className="flag-round w-6 h-6" />
Random
</button>
</div>
{/* Flashcard */}
<div
className={`relative mr-4 ml-4 bg-white w-80 h-[550px] rounded-lg shadow-lg p-4 cursor-pointer flashcard ${flipped ? 'flipped' : ''}`}
onClick={handleFlip}
style={{ perspective: '1000px' }}
>
<div className="absolute inset-0">
<div className="absolute w-full h-full flex flex-col justify-between items-center p-4">
{/* Top Icons */}
<div className="flex justify-between items-center w-full flashcard-inner">
<div>
{!flipped ? (
currentDirection === 'enToRu' ? (
<GB className="flag-round w-6 h-6" />
) : (
<RU className="flag-round w-6 h-6" />
)
) : currentDirection === 'enToRu' ? (
<RU className="flag-round w-6 h-6" />
) : (
<GB className="flag-round w-6 h-6" />
)}
</div>
<div className="flex space-x-2 text-gray-400">
<FaVolumeUp className="w-5 h-5 cursor-pointer" />
<FaHeart className="w-5 h-5 cursor-pointer" />
</div>
</div>
{/* Word Display */}
<div className="flex flex-col items-center justify-center flex-grow">
<h1 className="text-3xl font-bold mb-2">{displayWord}</h1>
{/* Subtitle (if in Russian) */}
{flipped && currentDirection === 'enToRu' && (
<p className="text-gray-500 text-lg">{currentWord.stress}</p>
)}
{/* Image */}
<img
src={currentWord.image}
alt={currentWord.en}
className="w-24 h-24 object-contain mt-4"
/>
</div>
{/* Flip Icon */}
<div className="text-gray-400 absolute bottom-4 right-4">
<FaSyncAlt className="w-6 h-6 cursor-pointer" />
</div>
</div>
</div>
</div>
{/* Step 4: Next Button */}
<button
onClick={handleNext}
className="mt-6 px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
>
Next
</button>
</div>
);
};
export default Flashcard;
.flashcard {
width: 250px;
height: 150px;
perspective: 1000px; /* Needed to enable 3D effect */
}
.flashcard-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d; /* Ensures the 3D flip effect */
}
.flipped .flashcard-inner {
transform: rotateY(180deg); /* Rotation angle when flipped */
}
.flashcard-front,
.flashcard-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.flashcard-back {
transform: rotateY(180deg); /* Back side is rotated */
background-color: #ffffff;
}
.flag-round {
border-radius: 50%;
width: 24px;
height: 24px;
}
You need to sign in to view this answers
Leave feedback about this