1+ // let transactions = JSON.parse(localStorage.getItem("transactions")) || [];
2+ // let transactions = [];
3+ const balanceAmount = document . getElementById ( "balanceAmount" ) ;
4+ const incomeAmount = document . getElementById ( "incomeAmount" ) ;
5+ const expenseAmount = document . getElementById ( "expenseAmount" ) ;
6+ const transactionForm = document . getElementById ( "transactionForm" ) ;
7+ const descriptionInput = document . getElementById ( "descriptionInput" ) ;
8+ const amountInput = document . getElementById ( "amountInput" ) ;
9+ const typeSelect = document . getElementById ( "typeSelect" ) ;
10+ const transactionList = document . getElementById ( "transactionList" ) ;
11+ const noTransactionMessage = document . getElementById ( "noTransactionMessage" ) ;
12+ let transactions = [ ] ;
13+ let incomes = 0 ;
14+ let expenses = 0 ;
15+ let totalIncome = 0 ;
16+ let totalExpense = 0 ;
17+ // Check if transactions data exists in Local Storage
18+ if ( localStorage . getItem ( "transactions" ) ) {
19+ transactions = JSON . parse ( localStorage . getItem ( "transactions" ) ) ;
20+ }
21+
22+ // Function to update balance
23+
24+ function updateBalance ( ) {
25+ const balance = transactions . reduce ( ( acc , transaction ) => {
26+ return transaction . type === "income" ? acc + transaction . amount : acc - transaction . amount ;
27+ } , 0 ) ;
28+
29+ totalIncome = transactions . reduce ( ( acc , transaction ) => {
30+ return transaction . type === "income" ? acc + transaction . amount : acc ;
31+ } , 0 ) ;
32+
33+ totalExpense = transactions . reduce ( ( acc , transaction ) => {
34+ return transaction . type === "expense" ? acc + transaction . amount : acc ;
35+ } , 0 ) ;
36+
37+ balanceAmount . textContent = balance . toFixed ( 2 ) ;
38+ incomeAmount . textContent = totalIncome . toFixed ( 2 ) ;
39+ expenseAmount . textContent = totalExpense . toFixed ( 2 ) ;
40+
41+ }
42+
43+ // Function to add a transaction
44+ function addTransaction ( event ) {
45+ event . preventDefault ( ) ;
46+
47+ const description = descriptionInput . value ;
48+ const amount = + amountInput . value ;
49+ const type = typeSelect . value ;
50+
51+ const transaction = {
52+ description,
53+ amount,
54+ type
55+ } ;
56+
57+
58+ transactions . push ( transaction ) ;
59+ if ( type === "income" ) {
60+ totalIncome += amount ;
61+ }
62+ else if ( type === "expense" ) {
63+ totalExpense += amount ;
64+ }
65+ updateTransactions ( ) ;
66+ updateBalance ( ) ;
67+ saveTransactions ( ) ;
68+ alert ( `Transaction "${ transaction . description } ) ;
69+
70+ descriptionInput . value = "" ;
71+ amountInput . value = "" ;
72+ typeSelect . value = "income" ;
73+ }
74+
75+ // Function to delete a transaction
76+ function deleteTransaction ( index ) {
77+ const deletedTransaction = transactions . splice ( index , 1 ) ;
78+ if ( deletedTransaction . type === "income" ) {
79+ totalIncome -= deletedTransaction . amount ;
80+ } else if ( deletedTransaction . type === "expense" ) {
81+ totalExpense -= deletedTransaction . amount ;
82+ }
83+ alert ( `Transaction deleted successfully!` ) ;
84+ updateTransactions ( ) ;
85+ updateBalance ( ) ;
86+ saveTransactions ( ) ;
87+
88+ }
89+
90+ // Function to save transactions to Local Storage
91+ function saveTransactions ( ) {
92+ localStorage . setItem ( "transactions" , JSON . stringify ( transactions ) ) ;
93+ }
94+
95+ // Function to load transactions from Local Storage
96+ function loadTransactions ( ) {
97+ const storedTransactions = localStorage . getItem ( "transactions" ) ;
98+ if ( storedTransactions ) {
99+ transactions = JSON . parse ( storedTransactions ) ;
100+ updateTransactions ( ) ;
101+ updateBalance ( ) ;
102+ }
103+ }
104+
105+ // Function to update the transaction list
106+ function updateTransactions ( ) {
107+ transactionList . innerHTML = "" ;
108+
109+ if ( transactions . length === 0 ) {
110+ noTransactionMessage . style . display = "block" ;
111+ } else {
112+ noTransactionMessage . style . display = "none" ;
113+
114+ transactions . forEach ( ( transaction , index ) => {
115+ const listItem = document . createElement ( "li" ) ;
116+ listItem . innerHTML = `
117+ <span>${ transaction . description }
118+ <span class="amount ${ transaction . type } ${ transaction . type === "income" ? "+" : "-" } ${ transaction . amount . toFixed ( 2 ) }
119+ <div class="transaction-actions">
120+ <button onclick="editTransaction(${ index }
121+ <button onclick="deleteTransaction(${ index }
122+ </div>
123+ ` ;
124+ transactionList . appendChild ( listItem ) ;
125+ } ) ;
126+ }
127+ }
128+ // Function to edit a transaction
129+ function editTransaction ( index ) {
130+ const transaction = transactions [ index ] ;
131+ const updatedDescription = prompt ( "Enter the updated description:" , transaction . description ) ;
132+ const updatedAmount = parseFloat ( prompt ( "Enter the updated amount:" , transaction . amount ) ) ;
133+ const updatedType = prompt ( "Enter the updated type (income or expense):" , transaction . type ) ;
134+
135+ if ( updatedDescription && ! isNaN ( updatedAmount ) && ( updatedType === "income" || updatedType === "expense" ) ) {
136+ const updatedTransaction = {
137+ description : updatedDescription ,
138+ amount : updatedAmount ,
139+ type : updatedType
140+ } ;
141+
142+ if ( transaction . type === "income" ) {
143+ totalIncome -= transaction . amount ;
144+ totalIncome += updatedAmount ;
145+ } else if ( transaction . type === "expense" ) {
146+ totalExpense -= transaction . amount ;
147+ totalExpense += updatedAmount ;
148+ }
149+
150+ transactions [ index ] = updatedTransaction ;
151+ alert ( `Transaction "${ updatedTransaction . description } ) ;
152+ updateTransactions ( ) ;
153+ updateBalance ( ) ;
154+ saveTransactions ( ) ;
155+
156+ } else {
157+ alert ( "Invalid input! Please try again." ) ;
158+ }
159+ }
160+
161+ // Event listener for adding a transaction
162+ transactionForm . addEventListener ( "submit" , addTransaction ) ;
163+ function updateDateTime ( ) {
164+ const currentDateTime = new Date ( ) ;
165+ const options = { weekday : 'long' , year : 'numeric' , month : 'long' , day : 'numeric' , hour : 'numeric' , minute : 'numeric' , second : 'numeric' } ;
166+ const formattedDateTime = currentDateTime . toLocaleDateString ( 'en-US' , options ) ;
167+ document . getElementById ( 'currentDateTime' ) . textContent = formattedDateTime ;
168+ }
169+
170+ // Update the date and time every second
171+ setInterval ( updateDateTime , 1000 ) ;
172+
173+ // Initial update
174+ updateDateTime ( ) ;
175+
176+
177+ // Load transactions on page load
178+ loadTransactions ( ) ;
0 commit comments