hersh11 · hersh11 · Jun 1, 2023 · Jun 1, 2023 · Jun 15, 2023 · Jun 15, 2023
diff --git a/README.md b/README.md
@@ -0,0 +1,63 @@
+# Budget Buddy
+
+Budget Buddy is a simple and user-friendly budget tracker that helps you manage your finances by tracking your income and expenses. It includes features such as adding transactions, filtering by date, and visualizing spending trends with monthly graphs.
+
+## Features
+
+- **Add Income and Expenses**: Easily add transactions with descriptions, amounts, and dates.
+- **Date Filtering**: Filter transactions by specific dates to view your financial history.
+- **Spending Graphs**: Visualize your monthly spending with a bar chart, helping you understand your financial trends.
+- **Local Storage**: Your transaction data is saved in your browser's local storage, so your data persists even after refreshing the page.
+
+## Technologies Used
+
+- **HTML**: Structure of the application.
+- **CSS**: Styling for a clean, modern look.
+- **JavaScript**: Functionality and interactivity.
+- **Chart.js**: Library for creating the spending charts.
+
+## Installation
+
+1. **Clone the repository**:
+    ```bash
+    git clone https://github.com/OGharsh/budget-tracker-basic.git
+    ```
+
+2. **Navigate to the project directory**:
+    ```bash
+    cd budget-tracker-basic
+    ```
+
+3. **Open `index.html` in your browser**:
+    ```bash
+    open index.html
+    ```
+
+## Usage
+
+1. **Adding Transactions**:
+    - Enter a description in the "Text" field.
+    - Enter the amount in the "Amount" field (use the buttons to specify if it’s income or an expense).
+    - Enter the date of the transaction.
+    - Click "Add Income" or "Add Expense" to record the transaction.
+
+2. **Filtering Transactions**:
+    - Use the date filter to view transactions for a specific date.
+    - Click "Filter" to apply the filter.
+    - Click "Clear Filter" to remove the date filter and view all transactions.
+
+3. **Viewing Spending Graphs**:
+    - Scroll down to the "Spending Chart" section to view your income and expenses for each month of the year.
+
+## Contributing
+
+Contributions are welcome! Please open an issue or submit a pull request with any improvements or bug fixes.
+
+## License
+
+This project is licensed under the MIT License.
+
+## Acknowledgements
+
+- [Chart.js](https://www.chartjs.org/) for providing an easy-to-use charting library.
+- All the tutorials and documentation that helped make this project possible.
diff --git a/chart-script.js b/chart-script.js
@@ -0,0 +1,55 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const localStorageTransactions = JSON.parse(localStorage.getItem('transactions'));
+    let transactions = localStorage.getItem('transactions') !== null ? localStorageTransactions : [];
+
+    const spendingChartCanvas = document.getElementById('spendingChart');
+
+    const monthlyExpenses = new Array(12).fill(0);
+    const monthlyIncome = new Array(12).fill(0);
+
+    transactions.forEach(transaction => {
+      const month = new Date(transaction.date).getMonth();
+      if (transaction.amount < 0) {
+        monthlyExpenses[month] += Math.abs(transaction.amount);
+      } else {
+        monthlyIncome[month] += transaction.amount;
+      }
+    });
+
+    const data = {
+      labels: [
+        'January', 'February', 'March', 'April', 'May', 'June',
+        'July', 'August', 'September', 'October', 'November', 'December'
+      ],
+      datasets: [
+        {
+          label: 'Expenses',
+          data: monthlyExpenses,
+          backgroundColor: 'rgba(255, 99, 132, 0.2)',
+          borderColor: 'rgba(255, 99, 132, 1)',
+          borderWidth: 1
+        },
+        {
+          label: 'Income',
+          data: monthlyIncome,
+          backgroundColor: 'rgba(75, 192, 192, 0.2)',
+          borderColor: 'rgba(75, 192, 192, 1)',
+          borderWidth: 1
+        }
+      ]
+    };
+
+    new Chart(spendingChartCanvas, {
+      type: 'bar',
+      data: data,
+      options: {
+        responsive: true,
+        scales: {
+          y: {
+            beginAtZero: true
+          }
+        }
+      }
+    });
+  });
+
diff --git a/chart.html b/chart.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Spending Chart</title>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body>
+  <h2>Spending Chart</h2>
+  <canvas id="spendingChart"></canvas>
+  <script src="chart-script.js"></script>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -1,55 +1,66 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0"
-    />
-    <title>Expense Tracker</title>
-    <link rel="stylesheet" href="style.css" />
-  </head>
-  <body>
-    <h2>Expense Tracker</h2>
-    <div class="container">
-      <h4>Your Balance</h4>
-      <h1 id="balance">Rs.0.00</h1>
-      <div class="inc-exp-container">
-        <div>
-          <h4>Income</h4>
-          <p id="money-plus" class="money-plus">
-            +Rs.0.00
-          </p>
-        </div>
-        <div>
-          <h4>Expense</h4>
-          <p id="money-minus" class="money-minus">
-            -Rs.0.00
-          </p>
-        </div>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Budget Buddy</title>
+  <link rel="stylesheet" href="style.css" />
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body>
+  <h2>Budget Buddy</h2>
+  <div class="container">
+    <h4>Your Balance</h4>
+    <h1 id="balance">₹0.00</h1>
+    <div class="inc-exp-container">
+      <div>
+        <h4>Income</h4>
+        <p id="money-plus" class="money-plus">+₹0.00</p>
+      </div>
+      <div>
+        <h4>Expense</h4>
+        <p id="money-minus" class="money-minus">-₹0.00</p>
       </div>
-
-      <h3>History</h3>
-      <ul id="list" class="list">
-        <!-- <li class="minus">
-          Cash <span>-$400</span
-          ><button class="delete-btn">x</button>
-        </li> -->
-      </ul>
-      <h3>Add New Transition</h3>
-      <form id="form">
-          <div class="form-control">
-              <label for="text">Text</label>
-              <input type="text" id="text" placeholder="Enter Text...."/>
-          </div>
-          <div class="form-control">
-              <label for="amount">Amount <br> (negative - expense ,positive - income )</label>
-              <input type="number" id="amount" placeholder="Enter amount..."> 
-          </div>
-          <button class="btn">All transaction</button>
-      </form>
     </div>
-    <!-- JavaYscript Project  -->
-    <script src="script.js"></script>
-  </body>
+
+    <h3>History</h3>
+    <ul id="list" class="list">
+      <!-- Transactions will be added here -->
+    </ul>
+
+    <h3>Add New Transaction</h3>
+    <form id="form">
+      <div class="form-control">
+        <label for="text">Text</label>
+        <input type="text" id="text" placeholder="Enter text..." />
+      </div>
+      <div class="form-control">
+        <label for="amount">Amount</label>
+        <input type="number" id="amount" placeholder="Enter amount..." />
+      </div>
+      <div class="form-control">
+        <label for="date">Date</label>
+        <input type="date" id="date" />
+      </div>
+      <button class="btn btn-income" type="button" onclick="addTransaction('income')">Add Income</button>
+      <button class="btn btn-expense" type="button" onclick="addTransaction('expense')">Add Expense</button>
+    </form>
+
+    <h3>Filter by Date</h3>
+    <form id="filter-form">
+      <div class="form-control">
+        <label for="filter-date">Select Date</label>
+        <input type="date" id="filter-date" />
+      </div>
+      <button class="btn" type="button" onclick="filterTransactions()">Filter</button>
+      <button class="btn" type="button" onclick="clearFilter()">Clear Filter</button>
+    </form>
+
+    <h3>Spending Chart</h3>
+    <canvas id="spendingChart"></canvas>
+    <button id="open-chart" class="btn" type="button">Open Chart in New Tab</button>
+  </div>
+
+  <script src="script.js"></script>
+</body>
 </html>