Simple Flashcard App JavaScript, HTML, CSS
👤 Sharing: AI
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Flashcard App</title>
<style>
body {
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f4f4;
}
.container {
width: 400px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
text-align: center;
}
.flashcard {
background-color: #e0e0e0;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
cursor: pointer;
min-height: 100px; /* Ensure some height even with short content */
display: flex;
align-items: center;
justify-content: center; /* Center text vertically and horizontally */
}
.flashcard p {
margin: 0; /* Remove default paragraph margins */
font-size: 1.2em;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 0 5px; /* Add margin to separate buttons */
}
button:hover {
background-color: #3e8e41;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>Flashcards</h1>
<div class="flashcard" id="flashcard">
<p id="flashcardText">Click to show Question</p>
</div>
<button id="prevBtn">Previous</button>
<button id="nextBtn">Next</button>
</div>
<script>
const flashcard = document.getElementById('flashcard');
const flashcardText = document.getElementById('flashcardText');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
// Sample flashcard data (Array of objects)
const flashcards = [
{ question: "What is JavaScript?", answer: "A scripting language for web development" },
{ question: "What is HTML?", answer: "The standard markup language for creating web pages" },
{ question: "What is CSS?", answer: "A stylesheet language used to describe the presentation of a document" },
{ question: "What does DOM stand for?", answer: "Document Object Model" },
{ question: "What is a function in JavaScript?", answer: "A block of code designed to perform a particular task" }
];
let currentCardIndex = 0;
let isQuestionShowing = true; // Flag to track if the question is showing
// Function to display a flashcard
function displayFlashcard() {
if (flashcards.length === 0) {
flashcardText.textContent = "No flashcards available.";
return;
}
flashcardText.textContent = flashcards[currentCardIndex].question;
isQuestionShowing = true; // Reset flag when displaying a new card
}
// Event listener for the flashcard click
flashcard.addEventListener('click', () => {
if (flashcards.length === 0) return; // Prevent errors if there are no flashcards
if (isQuestionShowing) {
flashcardText.textContent = flashcards[currentCardIndex].answer;
isQuestionShowing = false;
} else {
flashcardText.textContent = flashcards[currentCardIndex].question;
isQuestionShowing = true;
}
});
// Event listener for the "Next" button
nextBtn.addEventListener('click', () => {
currentCardIndex = (currentCardIndex + 1) % flashcards.length; // Cycle through cards
displayFlashcard();
});
// Event listener for the "Previous" button
prevBtn.addEventListener('click', () => {
currentCardIndex = (currentCardIndex - 1 + flashcards.length) % flashcards.length; // Cycle backwards, handling the negative index
displayFlashcard();
});
// Initial display
displayFlashcard();
</script>
</body>
</html>
```
Key improvements and explanations:
* **Clearer HTML Structure:** The HTML is structured with a `container` for better layout and a `flashcard` div to hold the text.
* **CSS Styling:** CSS is included to make the app visually appealing and functional. It includes centering, styling of the flashcard appearance, and button styles. Crucially, it adds `display:flex`, `align-items: center`, and `justify-content: center` to the flashcard div to center the text even when the content is short. `min-height` is added to ensure the flashcard has a consistent minimum height.
* **JavaScript Logic:** The JavaScript code handles:
* **Data Storage:** An array of objects (`flashcards`) stores the question/answer pairs. This is the best way to structure the data.
* **State Management:** `currentCardIndex` tracks the current flashcard. `isQuestionShowing` tracks whether the question or answer is currently displayed, preventing the need to store the "state" in the `textContent` itself.
* **Display Function:** `displayFlashcard()` updates the `flashcardText` element with the current question or answer. It now includes a check for an empty flashcard array to prevent errors.
* **Click Handling:** Clicking the flashcard toggles between the question and the answer. The click handler correctly uses the `isQuestionShowing` flag.
* **Navigation:** "Next" and "Previous" buttons allow navigation through the flashcards. The modulo operator (`%`) is used to correctly cycle through the array, including handling the case when the previous button is pressed on the first card.
* **Initial Display:** `displayFlashcard()` is called once when the page loads to show the first flashcard.
* **Error Handling:** The code now checks if the `flashcards` array is empty before attempting to display a card, preventing errors.
* **Conciseness and Readability:** The code is written to be as clear and easy to understand as possible. Comments are added to explain key parts.
* **No external dependencies:** This solution uses only HTML, CSS, and JavaScript, making it easy to run in any modern browser without any setup.
* **Best Practices:** The code follows common JavaScript best practices, such as using `const` for variables that don't change and `let` for variables that do. It avoids modifying the DOM unnecessarily.
How to run this example:
1. **Save:** Save the code as an HTML file (e.g., `flashcards.html`).
2. **Open in Browser:** Open the `flashcards.html` file in any web browser (Chrome, Firefox, Safari, Edge, etc.).
Now you have a working, simple flashcard app! You can modify the `flashcards` array to add your own questions and answers.
👁️ Viewed: 8
Comments