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+ // Function to save transactions to Local Storage
90+ function saveTransactions ( ) {
91+ localStorage . setItem ( "transactions" , JSON . stringify ( transactions ) ) ;
92+ }
93+
94+ // Function to load transactions from Local Storage
95+ function loadTransactions ( ) {
96+ const storedTransactions = localStorage . getItem ( "transactions" ) ;
97+ if ( storedTransactions ) {
98+ transactions = JSON . parse ( storedTransactions ) ;
99+ updateTransactions ( ) ;
100+ updateBalance ( ) ;
101+ }
102+ }
103+
104+ // Function to update the transaction list
105+ function updateTransactions ( ) {
106+ transactionList . innerHTML = "" ;
107+
108+ if ( transactions . length === 0 ) {
109+ noTransactionMessage . style . display = "block" ;
110+ } else {
111+ noTransactionMessage . style . display = "none" ;
112+
113+ transactions . forEach ( ( transaction , index ) => {
114+ const listItem = document . createElement ( "li" ) ;
115+ listItem . innerHTML = `
116+ <span>${ transaction . description }
117+ <span class="amount ${ transaction . type } ${ transaction . type === "income" ? "+" : "-" } ${ transaction . amount . toFixed ( 2 ) }
118+ <div class="transaction-actions">
119+ <button onclick="editTransaction(${ index }
120+ <button onclick="deleteTransaction(${ index }
121+ </div>
122+ ` ;
123+ transactionList . appendChild ( listItem ) ;
124+ } ) ;
125+ }
126+ }
127+ // Function to edit a transaction
128+ function editTransaction ( index ) {
129+ const transaction = transactions [ index ] ;
130+ const updatedDescription = prompt ( "Enter the updated description:" , transaction . description ) ;
131+ const updatedAmount = parseFloat ( prompt ( "Enter the updated amount:" , transaction . amount ) ) ;
132+ const updatedType = prompt ( "Enter the updated type (income or expense):" , transaction . type ) ;
133+
134+ if ( updatedDescription && ! isNaN ( updatedAmount ) && ( updatedType === "income" || updatedType === "expense" ) ) {
135+ const updatedTransaction = {
136+ description : updatedDescription ,
137+ amount : updatedAmount ,
138+ type : updatedType
139+ } ;
140+ if ( transaction . type === "income" ) {
141+ totalIncome -= transaction . amount ;
142+ totalIncome += updatedAmount ;
143+ } else if ( transaction . type === "expense" ) {
144+ totalExpense -= transaction . amount ;
145+ totalExpense += updatedAmount ;
146+ }
147+ transactions [ index ] = updatedTransaction ;
148+ alert ( `Transaction "${ updatedTransaction . description } ) ;
149+ updateTransactions ( ) ;
150+ updateBalance ( ) ;
151+ saveTransactions ( ) ;
152+ } else {
153+ alert ( "Invalid input! Please try again." ) ;
154+ }
155+ }
156+
157+ // Event listener for adding a transaction
158+ transactionForm . addEventListener ( "submit" , addTransaction ) ;
159+ function updateDateTime ( ) {
160+ const currentDateTime = new Date ( ) ;
161+ const options = { weekday : 'long' , year : 'numeric' , month : 'long' , day : 'numeric' , hour : 'numeric' , minute : 'numeric' , second : 'numeric' } ;
162+ const formattedDateTime = currentDateTime . toLocaleDateString ( 'en-US' , options ) ;
163+ document . getElementById ( 'currentDateTime' ) . textContent = formattedDateTime ;
164+ }
165+
166+ // Update the date and time every second
167+ setInterval ( updateDateTime , 1000 ) ;
168+
169+ // Initial update
170+ updateDateTime ( ) ;
171+
172+
173+ // Load transactions on page load
174+ loadTransactions ( ) ;
0 commit comments