├── README.md ├── expensetracker.html ├── expensetrackers.css └── trackerscript.js /README.md: -------------------------------------------------------------------------------- 1 | # Expense Tracker Web App 2 | 3 | This Expense Tracker Web App is a simple tool built with HTML, CSS, and JavaScript to help users manage their finances effectively. Keep track of your income and expenses, add new transactions, and visualize your financial health. 4 | 5 | ## Features 6 | - **Transaction Management:** Add income or expenses with ease by entering the transaction details. 7 | - **Dynamic Updates:** Real-time updates of balance, income, and expenses displayed on the interface. 8 | - **Transaction Removal:** Remove unwanted transactions seamlessly with a delete button. 9 | 10 | ## Usage 11 | 1. Open the web app in your browser. 12 | 2. Enter the transaction details, including the transaction text and amount. 13 | 3. Press the "Add Transaction" button to update the list and balances. 14 | 4. View your current balance, income, and expenses. 15 | 5. Delete transactions by clicking the "x" button next to each entry. 16 | 17 | ## Technologies Used 18 | - **HTML:** Structure the web page. 19 | - **CSS:** Style the user interface for a visually appealing experience. 20 | - **JavaScript:** Implement the dynamic functionality of the Expense Tracker. 21 | 22 | ## Code Overview 23 | - The JavaScript code handles transaction addition, deletion, and updates to the local storage. 24 | - Transactions are stored locally to maintain data persistence between sessions. 25 | 26 | ## How to Run 27 | Simply open the `index.html` file in a web browser to start using the Expense Tracker. 28 | 29 | Feel free to enhance and customize the code to suit your preferences or integrate additional features! 30 | -------------------------------------------------------------------------------- /expensetracker.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Expense Tracker 7 | 8 | 9 | 10 |

Expense Tracker

11 |

12 |

Your Balance

13 |

₹0.00

14 |

15 |

16 |

Income

17 |

18 | +₹0.00 19 |

20 |

21 |

22 |

Expense

23 |

24 | -₹0.00 25 |

26 |

27 |

28 | 29 |

History

30 |

32 | > 33 |

35 |

Add New Transition

36 | 47 |

48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /expensetrackers.css: -------------------------------------------------------------------------------- 1 | 2 | * { 3 | box-sizing: border-box; 4 | } 5 | 6 | body { 7 | background-color:orange; 8 | display: flex; 9 | flex-direction: column; 10 | align-items: center; 11 | justify-content: center; 12 | min-height: 100vh; 13 | margin: 0; 14 | font-family: 'Roboto', sans-serif; 15 | } 16 | 17 | .container { 18 | margin: 10px auto; 19 | width: 350px; 20 | } 21 | 22 | h1 { 23 | letter-spacing: 1px; 24 | margin: 0; 25 | } 26 | 27 | h3 { 28 | border-bottom: 1px solid #bbb; 29 | padding-bottom: 10px; 30 | margin: 40px 0 10px; 31 | } 32 | 33 | h4 { 34 | margin: 0; 35 | text-transform: uppercase; 36 | } 37 | 38 | .inc-exp-container { 39 | background-color: #fff; 40 | box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; 41 | padding: 20px; 42 | display: flex; 43 | justify-content: center; 44 | margin: 20px 0; 45 | } 46 | 47 | .inc-exp-container > div { 48 | flex: 1; 49 | text-align: center; 50 | } 51 | 52 | .inc-exp-container > div:first-of-type { 53 | border-right: 1px solid #dedede; 54 | } 55 | 56 | .money { 57 | font-size: 2; 58 | letter-spacing: 1px; 59 | margin: 5px 0; 60 | } 61 | .money-plus { 62 | color: #2ecc71; 63 | } 64 | 65 | .money-minus { 66 | color: #c0392b; 67 | } 68 | 69 | label { 70 | display: inline-block; 71 | margin: 10px 0; 72 | } 73 | 74 | input[type="text"], 75 | input[type="number"] { 76 | border: 1px solid #dedede; 77 | border-radius: 2px; 78 | display: block; 79 | font-size: 16px; 80 | padding: 10px; 81 | width: 100%; 82 | } 83 | 84 | .btn { 85 | cursor: pointer; 86 | background-color: #9c88ff; 87 | box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; 88 | color: #fff; 89 | border: 0; 90 | display: block; 91 | font-size: 16px; 92 | margin: 10px 0 30px; 93 | padding: 10px; 94 | width: 100%; 95 | } 96 | 97 | .btn:focus, 98 | .delete-btn:focus { 99 | outline: 0; 100 | } 101 | 102 | .list { 103 | list-style-type: none; 104 | padding: 0; 105 | margin-bottom: 40px; 106 | height: 200px; /* Set a fixed height for the list */ 107 | overflow-y: scroll; /* Add vertical scrollbar */ 108 | } 109 | 110 | .list li { 111 | background-color: #fff; 112 | box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 113 | 0 1px 2px rgba(0, 0, 0, 0.24); 114 | color: #333; 115 | display: flex; 116 | justify-content: space-between; 117 | position: relative; 118 | padding: 10px; 119 | margin: 10px 0; 120 | } 121 | 122 | .list li.plus { 123 | border-right: 5px solid #2ecc71; 124 | } 125 | 126 | .list li.minus { 127 | border-right: 5px solid #c0392b; 128 | } 129 | 130 | .delete-btn { 131 | cursor: pointer; 132 | background-color: #e74c3c; 133 | border: 0; 134 | color: #fff; 135 | font-size: 20px; 136 | line-height: 20px; 137 | padding: 2px 5px; 138 | position: absolute; 139 | top: 50%; 140 | left: 0; 141 | transform: translate(-100%, -50%); 142 | opacity: 0; 143 | transition: opacity 0.3s ease; 144 | } 145 | 146 | .list li:hover .delete-btn { 147 | opacity: 1; 148 | } 149 | 150 | -------------------------------------------------------------------------------- /trackerscript.js: -------------------------------------------------------------------------------- 1 | //1 2 | const balance = document.getElementById( 3 | "balance" 4 | ); 5 | const money_plus = document.getElementById( 6 | "money-plus" 7 | ); 8 | const money_minus = document.getElementById( 9 | "money-minus" 10 | ); 11 | const list = document.getElementById("list"); 12 | const form = document.getElementById("form"); 13 | const text = document.getElementById("text"); 14 | const amount = document.getElementById("amount"); 15 | // const dummyTransactions = [ 16 | // { id: 1, text: "Flower", amount: -20 }, 17 | // { id: 2, text: "Salary", amount: 300 }, 18 | // { id: 3, text: "Book", amount: -10 }, 19 | // { id: 4, text: "Camera", amount: 150 }, 20 | // ]; 21 | 22 | // let transactions = dummyTransactions; 23 | 24 | //last 25 | const localStorageTransactions = JSON.parse(localStorage.getItem('transactions')); 26 | 27 | let transactions = localStorage.getItem('transactions') !== null ? localStorageTransactions : []; 28 | 29 | //5 30 | //Add Transaction 31 | function addTransaction(e){ 32 | e.preventDefault(); 33 | if(text.value.trim() === '' || amount.value.trim() === ''){ 34 | alert('please add text and amount') 35 | }else{ 36 | const transaction = { 37 | id:generateID(), 38 | text:text.value, 39 | amount:+amount.value 40 | } 41 | 42 | transactions.push(transaction); 43 | 44 | addTransactionDOM(transaction); 45 | updateValues(); 46 | updateLocalStorage(); 47 | text.value=''; 48 | amount.value=''; 49 | } 50 | } 51 | 52 | 53 | //5.5 54 | //Generate Random ID 55 | function generateID(){ 56 | return Math.floor(Math.random()*1000000000); 57 | } 58 | 59 | //2 60 | 61 | //Add Trasactions to DOM list 62 | function addTransactionDOM(transaction) { 63 | //GET sign 64 | const sign = transaction.amount < 0 ? "-" : "+"; 65 | const item = document.createElement("li"); 66 | 67 | //Add Class Based on Value 68 | item.classList.add( 69 | transaction.amount < 0 ? "minus" : "plus" 70 | ); 71 | 72 | item.innerHTML = ` 73 | ${transaction.text} ₹${Math.abs( 74 | transaction.amount 75 | )} 76 | 77 | `; 78 | 79 | list.appendChild(item); 80 | 81 | } 82 | //4 83 | 84 | //Update the balance income and expence 85 | function updateValues() { 86 | const amounts = transactions.map( 87 | (transaction) => transaction.amount 88 | ); 89 | const total = amounts 90 | .reduce((acc, item) => (acc += item), 0) 91 | .toFixed(2); 92 | const income = amounts 93 | .filter((item) => item > 0) 94 | .reduce((acc, item) => (acc += item), 0) 95 | .toFixed(2); 96 | const expense = 97 | (amounts 98 | .filter((item) => item < 0) 99 | .reduce((acc, item) => (acc += item), 0) * 100 | -1).toFixed(2); 101 | 102 | balance.innerHTML = `₹${total}`; 103 | money_plus.innerHTML = `+₹${income}`; 104 | money_minus.innerHTML = `-₹${expense}`; 105 | } 106 | 107 | 108 | //6 109 | 110 | //Remove Transaction by ID 111 | function removeTransaction(id){ 112 | transactions = transactions.filter(transaction => transaction.id !== id); 113 | updateLocalStorage(); 114 | Init(); 115 | } 116 | //last 117 | //update Local Storage Transaction 118 | function updateLocalStorage(){ 119 | localStorage.setItem('transactions',JSON.stringify(transactions)); 120 | } 121 | 122 | //3 123 | 124 | //Init App 125 | function Init() { 126 | list.innerHTML = ""; 127 | transactions.forEach(addTransactionDOM); 128 | updateValues(); 129 | } 130 | 131 | Init(); 132 | 133 | form.addEventListener('submit',addTransaction); --------------------------------------------------------------------------------