1+ // Selecting DOM elements
2+ const container = document . querySelector ( ".container" ) ;
3+ const addQuestionCard = document . getElementById ( "add-question-card" ) ;
4+ const cardButton = document . getElementById ( "save-btn" ) ;
5+ const question = document . getElementById ( "question" ) ;
6+ const answer = document . getElementById ( "answer" ) ;
7+ const errorMessage = document . getElementById ( "error" ) ;
8+ const addQuestion = document . getElementById ( "add-flashcard" ) ;
9+ const closeBtn = document . getElementById ( "close-btn" ) ;
10+
11+ // Initializing variables
12+ let editBool = false ;
13+ let originalId = null ;
14+ let flashcards = JSON . parse ( localStorage . getItem ( 'flashcards' ) ) || [ ] ;
15+
16+ addQuestion . addEventListener ( "click" , ( ) => {
17+ // Show the add question card and hide the container
18+ container . classList . add ( "hide" ) ;
19+ question . value = "" ;
20+ answer . value = "" ;
21+ addQuestionCard . classList . remove ( "hide" ) ;
22+ } ) ;
23+
24+ closeBtn . addEventListener ( "click" , ( ) => {
25+ // Close the add question card and show the container
26+ container . classList . remove ( "hide" ) ;
27+ addQuestionCard . classList . add ( "hide" ) ;
28+ if ( editBool ) {
29+ editBool = false ;
30+ }
31+ } ) ;
32+
33+ cardButton . addEventListener ( "click" , ( ) => {
34+ // Save the flashcard
35+ let tempQuestion = question . value . trim ( ) ;
36+ let tempAnswer = answer . value . trim ( ) ;
37+ if ( ! tempQuestion || ! tempAnswer ) {
38+ // Display error message if question or answer is empty
39+ errorMessage . classList . remove ( "hide" ) ;
40+ } else {
41+ if ( editBool ) {
42+ // If editing an existing flashcard, remove the original flashcard from the array
43+ flashcards = flashcards . filter ( flashcard => flashcard . id !== originalId ) ;
44+ }
45+ let id = Date . now ( ) ;
46+ // Add the new flashcard to the array
47+ flashcards . push ( { id, question : tempQuestion , answer : tempAnswer } ) ;
48+ // Save the flashcards array to local storage
49+ localStorage . setItem ( 'flashcards' , JSON . stringify ( flashcards ) ) ;
50+ container . classList . remove ( "hide" ) ;
51+ errorMessage . classList . add ( "hide" ) ;
52+ viewlist ( ) ;
53+ question . value = "" ;
54+ answer . value = "" ;
55+ editBool = false ;
56+ addQuestionCard . classList . add ( "hide" ) ; // This line hides the modal after the flashcard is added
57+ }
58+ } ) ;
59+
60+ // Function to display the flashcard list
61+ function viewlist ( ) {
62+ const listCard = document . querySelector ( ".card-list-container" ) ;
63+ listCard . innerHTML = '' ;
64+ flashcards = JSON . parse ( localStorage . getItem ( 'flashcards' ) ) || [ ] ;
65+ flashcards . forEach ( flashcard => {
66+ const div = document . createElement ( "div" ) ;
67+ div . classList . add ( "card" ) ;
68+ div . innerHTML = `
69+ <p class="question-div">${ flashcard . question }
70+ <p class="answer-div hide">${ flashcard . answer }
71+ <a href="#" class="show-hide-btn">Show/Hide</a>
72+ <div class="buttons-con">
73+ <button class="edit"><i class="fa-solid fa-pen-to-square"></i></button>
74+ <button class="delete"><i class="fa-solid fa-trash-can"></i></button>
75+ </div>
76+ ` ;
77+ div . setAttribute ( 'data-id' , flashcard . id ) ;
78+ const displayAnswer = div . querySelector ( ".answer-div" ) ;
79+ const showHideBtn = div . querySelector ( ".show-hide-btn" ) ;
80+ const editButton = div . querySelector ( ".edit" ) ;
81+ const deleteButton = div . querySelector ( ".delete" ) ;
82+
83+ showHideBtn . addEventListener ( "click" , ( ) => {
84+ // Toggle the visibility of the answer
85+ displayAnswer . classList . toggle ( "hide" ) ;
86+ } ) ;
87+
88+ editButton . addEventListener ( "click" , ( ) => {
89+ // Enable editing mode and show the add question card
90+ editBool = true ;
91+ modifyElement ( editButton , true ) ;
92+ addQuestionCard . classList . remove ( "hide" ) ;
93+ } ) ;
94+
95+ deleteButton . addEventListener ( "click" , ( ) => {
96+ // Delete the flashcard
97+ modifyElement ( deleteButton ) ;
98+ } ) ;
99+
100+ listCard . appendChild ( div ) ;
101+ } ) ;
102+ }
103+
104+ // Function to modify a flashcard element
105+ const modifyElement = ( element , edit = false ) => {
106+ const parentDiv = element . parentElement . parentElement ;
107+ const id = Number ( parentDiv . getAttribute ( 'data-id' ) ) ;
108+ const parentQuestion = parentDiv . querySelector ( ".question-div" ) . innerText ;
109+ if ( edit ) {
110+ const parentAns = parentDiv . querySelector ( ".answer-div" ) . innerText ;
111+ answer . value = parentAns ;
112+ question . value = parentQuestion ;
113+ originalId = id ;
114+ disableButtons ( true ) ;
115+ } else {
116+ // Remove the flashcard from the array and update local storage
117+ flashcards = flashcards . filter ( flashcard => flashcard . id !== id ) ;
118+ localStorage . setItem ( 'flashcards' , JSON . stringify ( flashcards ) ) ;
119+ }
120+ parentDiv . remove ( ) ;
121+ } ;
122+
123+ // Function to disable edit buttons
124+ const disableButtons = ( value ) => {
125+ const editButtons = document . getElementsByClassName ( "edit" ) ;
126+ Array . from ( editButtons ) . forEach ( ( element ) => {
127+ element . disabled = value ;
128+ } ) ;
129+ } ;
130+
131+ // Event listener to display the flashcard list when the DOM is loaded
132+ document . addEventListener ( "DOMContentLoaded" , viewlist ) ;
0 commit comments