-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (117 loc) · 5.28 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flashcards App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Flashcards App</h1>
<!-- Form to Create a New Flashcard -->
<div class="form">
<input type="text" id="question" placeholder="Enter Question" required>
<input type="text" id="answer" placeholder="Enter Answer" required>
<button id="addBtn">Add Flashcard</button>
</div>
<!-- Flashcards Display Area -->
<div id="flashcards-container"></div>
</div>
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.3.0/firebase-app.js";
import { getDatabase, ref, set, push, remove, onValue } from "https://www.gstatic.com/firebasejs/10.3.0/firebase-database.js";
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "AIzaSyDLxmyshhWk60Z0BgTdaRzSmKfkrEhDh68",
authDomain: "flashlearn-827a9.firebaseapp.com",
databaseURL: "https://flashlearn-827a9-default-rtdb.firebaseio.com",
projectId: "flashlearn-827a9",
storageBucket: "flashlearn-827a9.appspot.com",
messagingSenderId: "1052980548967",
appId: "1:1052980548967:web:9a318d7d1c50398477cbc2"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
let questionInput = document.getElementById('question');
let answerInput = document.getElementById('answer');
let addBtn = document.getElementById('addBtn');
let flashcardsContainer = document.getElementById('flashcards-container');
// Function to add a new flashcard
function addFlashcard() {
if (questionInput.value && answerInput.value) {
const flashcardRef = ref(db, 'flashcards');
const newFlashcardRef = push(flashcardRef);
set(newFlashcardRef, {
question: questionInput.value,
answer: answerInput.value
}).then(() => {
questionInput.value = '';
answerInput.value = '';
}).catch((error) => {
console.error('Error adding flashcard: ', error.message);
});
} else {
alert('Please enter both a question and an answer.');
}
}
// Function to delete a flashcard
function deleteFlashcard(id) {
const flashcardRef = ref(db, 'flashcards/' + id);
remove(flashcardRef).catch((error) => {
console.error('Error removing flashcard: ', error.message);
});
}
// Function to edit a flashcard
function editFlashcard(id, newQuestion, newAnswer) {
const flashcardRef = ref(db, 'flashcards/' + id);
set(flashcardRef, {
question: newQuestion,
answer: newAnswer
}).catch((error) => {
console.error('Error updating flashcard: ', error.message);
});
}
// Function to display flashcards
function displayFlashcards() {
const flashcardsRef = ref(db, 'flashcards');
onValue(flashcardsRef, (snapshot) => {
flashcardsContainer.innerHTML = '';
snapshot.forEach((childSnapshot) => {
const flashcard = childSnapshot.val();
const flashcardId = childSnapshot.key;
const flashcardElement = document.createElement('div');
flashcardElement.classList.add('flashcard');
flashcardElement.innerHTML = `
<div class="flashcard-content">
<p><strong>Question:</strong> ${flashcard.question}</p>
<p><strong>Answer:</strong> ${flashcard.answer}</p>
</div>
<div class="flashcard-buttons">
<button onclick="window.editFlashcardPrompt('${flashcardId}')">Edit</button>
<button onclick="window.deleteFlashcard('${flashcardId}')">Delete</button>
</div>
`;
flashcardsContainer.appendChild(flashcardElement);
});
});
}
// Function to prompt user for editing flashcard
function editFlashcardPrompt(id) {
const newQuestion = prompt('Enter new question:');
const newAnswer = prompt('Enter new answer:');
if (newQuestion !== null && newAnswer !== null && newQuestion.trim() && newAnswer.trim()) {
editFlashcard(id, newQuestion, newAnswer);
}
}
// Make functions accessible globally
window.addFlashcard = addFlashcard;
window.deleteFlashcard = deleteFlashcard;
window.editFlashcardPrompt = editFlashcardPrompt;
// Set up event listeners and display flashcards
addBtn.addEventListener('click', addFlashcard);
displayFlashcards();
</script>
</body>
</html>