├── README.md ├── index.html ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | coding 2 |

can tailor flashcards to your personal learning style by adding

3 |

images,audio,or even mnemonics.

4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flashcard Learning App 7 | 8 | 9 | 10 |
11 |

Flashcard Learning App

12 |
13 |
14 |
15 |

Question

16 |

What is HTML?

17 |
18 |
19 |

Answer

20 |

HyperText Markup Language

21 |
22 |
23 |
24 |
25 | 26 | 27 |
28 |
29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const flashcards = [ 2 | { question: "What is HTML?", answer: "HyperText Markup Language" }, 3 | { question: "What is CSS?", answer: "Cascading Style Sheets" }, 4 | { question: "What is JavaScript?", answer: "A programming language for the web" }, 5 | { question: "What does DOM stand for?", answer: "Document Object Model" } 6 | ]; 7 | 8 | let currentCard = 0; 9 | let isFlipped = false; 10 | 11 | const questionText = document.getElementById('question-text'); 12 | const answerText = document.getElementById('answer-text'); 13 | const card = document.getElementById('card'); 14 | 15 | function flipCard() { 16 | isFlipped = !isFlipped; 17 | card.style.transform = isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)'; 18 | } 19 | 20 | function updateCard(index) { 21 | questionText.textContent = flashcards[index].question; 22 | answerText.textContent = flashcards[index].answer; 23 | if (isFlipped) flipCard(); // Ensure card is reset to front when changing 24 | } 25 | 26 | function prevCard() { 27 | currentCard = (currentCard - 1 + flashcards.length) % flashcards.length; 28 | updateCard(currentCard); 29 | } 30 | 31 | function nextCard() { 32 | currentCard = (currentCard + 1) % flashcards.length; 33 | updateCard(currentCard); 34 | } 35 | 36 | // Initial load 37 | updateCard(currentCard); 38 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, sans-serif; 3 | background-color: #f0f4f8; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | height: 100vh; 8 | margin: 0; 9 | } 10 | 11 | .container { 12 | text-align: center; 13 | max-width: 400px; 14 | } 15 | 16 | h1 { 17 | color: #333; 18 | margin-bottom: 20px; 19 | } 20 | 21 | .flashcard { 22 | width: 300px; 23 | height: 200px; 24 | perspective: 1000px; 25 | margin: 20px auto; 26 | } 27 | 28 | .card-inner { 29 | width: 100%; 30 | height: 100%; 31 | position: relative; 32 | transition: transform 0.6s; 33 | transform-style: preserve-3d; 34 | } 35 | 36 | .card-front, .card-back { 37 | width: 100%; 38 | height: 100%; 39 | position: absolute; 40 | backface-visibility: hidden; 41 | display: flex; 42 | flex-direction: column; 43 | justify-content: center; 44 | align-items: center; 45 | border-radius: 10px; 46 | box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 47 | padding: 20px; 48 | color: white; 49 | } 50 | 51 | .card-front { 52 | background-color: #4CAF50; 53 | } 54 | 55 | .card-back { 56 | background-color: #2196F3; 57 | transform: rotateY(180deg); 58 | } 59 | 60 | .controls { 61 | display: flex; 62 | justify-content: space-around; 63 | margin-top: 10px; 64 | } 65 | 66 | button { 67 | background-color: #555; 68 | color: white; 69 | border: none; 70 | padding: 10px 20px; 71 | border-radius: 5px; 72 | cursor: pointer; 73 | transition: background-color 0.3s; 74 | } 75 | 76 | button:hover { 77 | background-color: #777; 78 | } 79 | 80 | @media (max-width: 600px) { 81 | .flashcard { 82 | width: 90%; 83 | } 84 | } 85 | --------------------------------------------------------------------------------