Merge pull request #8 from safesploit/dev

Dev

assets/css/styles.css

@@ -87,3 +87,29 @@ tbody tr:hover {
         font-size: 0.9em;
     }
 }
+
+/* Clear Expenses Button Styles */
+#clear-expenses {
+    background-color: #d9534f; /* Bootstrap 'btn-danger' color */
+    color: white;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 5px;
+    font-size: 1em;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    margin-top: 15px; /* Space from other elements */
+}
+
+#clear-expenses:hover {
+    background-color: #c9302c; /* Darker shade on hover */
+}
+
+#clear-expenses:focus {
+    outline: none; /* Removes outline on focus for cleaner look */
+}
+
+.button-container {
+    display: flex;
+    justify-content: flex-end; /* Aligns the button to the right */
+}

assets/js/script.js

@@ -1,10 +1,14 @@
 document.addEventListener("DOMContentLoaded", function() {
     const expenseForm = document.getElementById("expense-form");
-    let expenses = {};
+    let expenses = loadExpensesFromLocalStorage();
 
     function initialize() {
         attachEventListeners();
         loadExpensesFromLocalStorage();
+        updateExpenseList();
+
+        const clearButton = document.getElementById("clear-expenses");
+        clearButton.addEventListener("click", clearExpenses);
     }
 
     function attachEventListeners() {
@@ -23,6 +27,17 @@ document.addEventListener("DOMContentLoaded", function() {
         }
     }
 
+    function clearExpenses() {
+        if (confirm("Are you sure you want to clear all expenses? This action cannot be undone.")) {
+            // Clear local storage and reset the expenses object
+            localStorage.removeItem('expenses');
+            expenses = {};
+            // Update the UI to reflect the cleared expenses
+            updateExpenseList();
+        }
+    }
+
+
     function getFormData() {
         return {
             name: document.getElementById("name").value,
@@ -133,10 +148,7 @@ document.addEventListener("DOMContentLoaded", function() {
 
     function loadExpensesFromLocalStorage() {
         const storedExpenses = localStorage.getItem('expenses');
-        if (storedExpenses) {
-            expenses = JSON.parse(storedExpenses);
-            updateExpenseList();
-        }
+        return storedExpenses ? JSON.parse(storedExpenses) : {};
     }
 
     function handleBeforeUnload(e) {

index.html

@@ -54,6 +54,12 @@ <h1 class="text-center mb-4">Expense Tracker</h1>
         <p>Total Expense (Including Service Charge): <span id="total-expense-including-service">0.00</span></p>
     </div>
 
+    <div class="container mt-5">
+        <div class="button-container">
+            <button id="clear-expenses">Clear Expenses</button>
+        </div>
+    </div>
+
     <script src="assets/js/script.js"></script>
 
     <script src="assets/bootstrap-4.6.2-dist/js/bootstrap.min.js"></script>