| index.html
|
|
|
|
|
| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Expense Manager</title>
|
| <link rel="stylesheet" href="style.css">
|
| </head>
|
| <body>
|
| <h1>Expense Manager</h1>
|
| <div id="dashboard">
|
| <h2>Dashboard</h2>
|
| <p>Total Income: <span id="total-income">$0</span></p>
|
| <p>Total Expenses: <span id="total-expenses">$0</span></p>
|
| <p>Balance: <span id="balance">$0</span></p>
|
| </div>
|
|
|
| <div id="add-expense">
|
| <h2>Add Expense</h2>
|
| <form id="expense-form">
|
| <input type="date" id="expense-date" required>
|
| <input type="number" id="expense-amount" placeholder="Amount" required>
|
| <select id="expense-reason">
|
| <option value="For You">For You</option>
|
| <option value="For Family">For Family</option>
|
| <option value="For Others">For Others</option>
|
| <option value="Split with Others">Split with Others</option>
|
| </select>
|
| <textarea id="expense-notes" placeholder="Notes (optional)"></textarea>
|
| <button type="submit">Add Expense</button>
|
| </form>
|
| </div>
|
|
|
| <div id="add-income">
|
| <h2>Add Income</h2>
|
| <form id="income-form">
|
| <input type="date" id="income-date" required>
|
| <input type="number" id="income-amount" placeholder="Amount" required>
|
| <input type="text" id="income-source" placeholder="Source">
|
| <textarea id="income-notes" placeholder="Notes (optional)"></textarea>
|
| <button type="submit">Add Income</button>
|
| </form>
|
| </div>
|
|
|
| <script src="https://expense-manager-c5d91-default-rtdb.firebaseio.com/"></script>
|
| <script src="https://expense-manager-c5d91-default-rtdb.firebaseio.com/"></script>
|
| <script src="app.js"></script>
|
| </body>
|
| </html>
|
|
|
|
|
|
|
|
|
| style.css
|
|
|
|
|
|
|
| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Expense Manager</title>
|
| <link rel="stylesheet" href="style.css">
|
| </head>
|
| <body>
|
| <h1>Expense Manager</h1>
|
| <div id="dashboard">
|
| <h2>Dashboard</h2>
|
| <p>Total Income: <span id="total-income">$0</span></p>
|
| <p>Total Expenses: <span id="total-expenses">$0</span></p>
|
| <p>Balance: <span id="balance">$0</span></p>
|
| </div>
|
|
|
| <div id="add-expense">
|
| <h2>Add Expense</h2>
|
| <form id="expense-form">
|
| <input type="date" id="expense-date" required>
|
| <input type="number" id="expense-amount" placeholder="Amount" required>
|
| <select id="expense-reason">
|
| <option value="For You">For You</option>
|
| <option value="For Family">For Family</option>
|
| <option value="For Others">For Others</option>
|
| <option value="Split with Others">Split with Others</option>
|
| </select>
|
| <textarea id="expense-notes" placeholder="Notes (optional)"></textarea>
|
| <button type="submit">Add Expense</button>
|
| </form>
|
| </div>
|
|
|
| <div id="add-income">
|
| <h2>Add Income</h2>
|
| <form id="income-form">
|
| <input type="date" id="income-date" required>
|
| <input type="number" id="income-amount" placeholder="Amount" required>
|
| <input type="text" id="income-source" placeholder="Source">
|
| <textarea id="income-notes" placeholder="Notes (optional)"></textarea>
|
| <button type="submit">Add Income</button>
|
| </form>
|
| </div>
|
|
|
| <script src="https://expense-manager-c5d91-default-rtdb.firebaseio.com/"></script>
|
| <script src="https://expense-manager-c5d91-default-rtdb.firebaseio.com/"></script>
|
| <script src="app.js"></script>
|
| </body>
|
| </html>
|
|
|
|
|
|
|
| script.js
|
|
|
|
|
| // Firebase configuration
|
| const firebaseConfig = {
|
| apiKey: "AIzaSyC2jDhMWz5TMjBsG4jbUa8KEuXoK1ZIA_s",
|
| authDomain: "expense-manager-c5d91.firebaseapp.com",
|
| databaseURL: "https://expense-manager-c5d91-default-rtdb.firebaseio.com/",
|
| projectId: "expense-manager-c5d91",
|
| storageBucket: "expense-manager-c5d91.firebasestorage.app",
|
| messagingSenderId: "958885766490",
|
| appId: "1:958885766490:web:eb00b0b47493573a137f63",
|
| };
|
|
|
| // Initialize Firebase
|
| firebase.initializeApp(firebaseConfig);
|
| const database = firebase.database();
|
|
|
| // Add expense
|
| document.getElementById("expense-form").addEventListener("submit", (e) => {
|
| e.preventDefault();
|
| const date = document.getElementById("expense-date").value;
|
| const amount = document.getElementById("expense-amount").value;
|
| const reason = document.getElementById("expense-reason").value;
|
| const notes = document.getElementById("expense-notes").value;
|
|
|
| database.ref("expenses").push({
|
| date,
|
| amount,
|
| reason,
|
| notes,
|
| });
|
|
|
| alert("Expense added successfully!");
|
| });
|
|
|
| // Add income
|
| document.getElementById("income-form").addEventListener("submit", (e) => {
|
| e.preventDefault();
|
| const date = document.getElementById("income-date").value;
|
| const amount = document.getElementById("income-amount").value;
|
| const source = document.getElementById("income-source").value;
|
| const notes = document.getElementById("income-notes").value;
|
|
|
| database.ref("income").push({
|
| date,
|
| amount,
|
| source,
|
| notes,
|
| });
|
|
|
| alert("Income added successfully!");
|
| });
|