-
-
+
+
+
+
Budget Buddy
+
+
+
+
+
Budget Buddy
+
+
Your Balance
+
₹0.00
+
+
+
-
-
History
-
-
Add New Transaction
-
-
-
-
+
+
History
+
+
+
Add New Transaction
+
+
+
Filter by Date
+
+
+
Spending Chart
+
+
+
+
+
+
diff --git a/script.js b/script.js
index 1167592..5ae8170 100644
--- a/script.js
+++ b/script.js
@@ -1,133 +1,178 @@
-//1
-const balance = document.getElementById(
- "balance"
-);
-const money_plus = document.getElementById(
- "money-plus"
-);
-const money_minus = document.getElementById(
- "money-minus"
-);
+// Elements
+const balance = document.getElementById("balance");
+const money_plus = document.getElementById("money-plus");
+const money_minus = document.getElementById("money-minus");
const list = document.getElementById("list");
const form = document.getElementById("form");
const text = document.getElementById("text");
const amount = document.getElementById("amount");
-// const dummyTransactions = [
-// { id: 1, text: "Flower", amount: -20 },
-// { id: 2, text: "Salary", amount: 300 },
-// { id: 3, text: "Book", amount: -10 },
-// { id: 4, text: "Camera", amount: 150 },
-// ];
+const date = document.getElementById("date");
+const filterDate = document.getElementById("filter-date");
+const spendingChartCanvas = document.getElementById('spendingChart');
+const openChartBtn = document.getElementById('open-chart');
-// let transactions = dummyTransactions;
+// Declare spendingChart variable at the top
+let spendingChart;
-//last
+// Retrieve transactions from local storage or set to empty array
const localStorageTransactions = JSON.parse(localStorage.getItem('transactions'));
-
let transactions = localStorage.getItem('transactions') !== null ? localStorageTransactions : [];
-//5
-//Add Transaction
-function addTransaction(e){
- e.preventDefault();
- if(text.value.trim() === '' || amount.value.trim() === ''){
- alert('please add text and amount')
- }else{
+// Add transaction
+function addTransaction(type) {
+ if (text.value.trim() === '' || amount.value.trim() === '' || date.value.trim() === '') {
+ alert('Please add text, amount, and date');
+ } else {
const transaction = {
- id:generateID(),
- text:text.value,
- amount:+amount.value
- }
+ id: generateID(),
+ text: text.value,
+ amount: type === 'income' ? +amount.value : -amount.value,
+ date: date.value
+ };
transactions.push(transaction);
addTransactionDOM(transaction);
updateValues();
updateLocalStorage();
- text.value='';
- amount.value='';
+ updateSpendingChart();
+
+ text.value = '';
+ amount.value = '';
+ date.value = '';
}
}
-
-//5.5
-//Generate Random ID
-function generateID(){
- return Math.floor(Math.random()*1000000000);
+// Generate random ID
+function generateID() {
+ return Math.floor(Math.random() * 1000000000);
}
-//2
-
-//Add Trasactions to DOM list
+// Add transaction to DOM list
function addTransactionDOM(transaction) {
- //GET sign
+ // Get sign
const sign = transaction.amount < 0 ? "-" : "+₹";
const item = document.createElement("li");
- //Add Class Based on Value
- item.classList.add(
- transaction.amount < 0 ? "minus" : "plus"
- );
+ // Add class based on value
+ item.classList.add(transaction.amount < 0 ? "minus" : "plus");
item.innerHTML = `
- ${transaction.text}
${sign}${Math.abs(
- transaction.amount
- )}
+ ${transaction.text}
${sign}${Math.abs(transaction.amount)}
+
${transaction.date}
- `;
+ `;
list.appendChild(item);
}
-//4
-
-//Update the balance income and expence
+// Update the balance, income, and expense
function updateValues() {
- const amounts = transactions.map(
- (transaction) => transaction.amount
- );
- const total = amounts
- .reduce((acc, item) => (acc += item), 0)
- .toFixed(2);
- const income = amounts
- .filter((item) => item > 0)
- .reduce((acc, item) => (acc += item), 0)
- .toFixed(2);
- const expense =
- (amounts
- .filter((item) => item < 0)
- .reduce((acc, item) => (acc += item), 0) *
- -1).toFixed(2);
-
- balance.innerText = `₹${total}`;
- money_plus.innerText = `₹${income}`;
- money_minus.innerText = `₹${expense}`;
-
+ const amounts = transactions.map(transaction => transaction.amount);
+ const total = amounts.reduce((acc, item) => (acc += item), 0).toFixed(2);
+ const income = amounts.filter(item => item > 0).reduce((acc, item) => (acc += item), 0).toFixed(2);
+ const expense = (amounts.filter(item => item < 0).reduce((acc, item) => (acc += item), 0) * -1).toFixed(2);
+
+ balance.innerText = `₹${total}`;
+ money_plus.innerText = `₹${income}`;
+ money_minus.innerText = `₹${expense}`;
}
-
-//6
-
-//Remove Transaction by ID
-function removeTransaction(id){
+// Remove transaction by ID
+function removeTransaction(id) {
transactions = transactions.filter(transaction => transaction.id !== id);
updateLocalStorage();
- Init();
+ init();
+}
+
+// Update local storage transactions
+function updateLocalStorage() {
+ localStorage.setItem('transactions', JSON.stringify(transactions));
}
-//last
-//update Local Storage Transaction
-function updateLocalStorage(){
- localStorage.setItem('transactions',JSON.stringify(transactions));
+
+// Filter transactions by date
+function filterTransactions() {
+ const filterDateValue = filterDate.value;
+ if (filterDateValue) {
+ const filteredTransactions = transactions.filter(transaction => transaction.date === filterDateValue);
+ list.innerHTML = '';
+ filteredTransactions.forEach(addTransactionDOM);
+ }
}
-//3
+// Clear date filter
+function clearFilter() {
+ filterDate.value = '';
+ init();
+}
-//Init App
-function Init() {
- list.innerHTML = "";
+// Initialize app
+function init() {
+ list.innerHTML = '';
transactions.forEach(addTransactionDOM);
updateValues();
+ updateSpendingChart();
}
-Init();
+init();
+
+form.addEventListener('submit', (e) => e.preventDefault());
+
+// Chart.js: Generate spending chart
+function updateSpendingChart() {
+ 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
+ }
+ ]
+ };
+
+ if (spendingChart) {
+ spendingChart.destroy();
+ }
+
+ spendingChart = new Chart(spendingChartCanvas, {
+ type: 'bar',
+ data: data,
+ options: {
+ responsive: true,
+ scales: {
+ y: {
+ beginAtZero: true
+ }
+ }
+ }
+ });
+}
-form.addEventListener('submit',addTransaction);
+// Open new chart tab
+openChartBtn.addEventListener('click', () => {
+ window.open('chart.html', '_blank');
+});
diff --git a/style.css b/style.css
index e87eea6..04d2bf2 100644
--- a/style.css
+++ b/style.css
@@ -1,6 +1,10 @@
:root {
- --box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
- 0 1px 2px rgba(0, 0, 0, 0.24);
+ --box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+ --primary-color: #f39c12;
+ --primary-light-color: #f8c471;
+ --income-color: #2ecc71;
+ --expense-color: #c0392b;
+ --background-color: #fff;
}
* {
@@ -15,14 +19,23 @@ body {
justify-content: center;
min-height: 100vh;
margin: 0;
- font-family: -apple-system, BlinkMacSystemFont,
- "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
- "Open Sans", "Helvetica Neue", sans-serif;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+ color: #333;
+}
+
+h2 {
+ color: var(--primary-color);
+ font-size: 2rem;
+ margin-top: 0;
}
.container {
margin: 30px auto;
width: 350px;
+ background-color: var(--background-color);
+ box-shadow: var(--box-shadow);
+ padding: 20px;
+ border-radius: 8px;
}
h1 {
@@ -39,15 +52,17 @@ h3 {
h4 {
margin: 0;
text-transform: uppercase;
+ color: var(--primary-color);
}
.inc-exp-container {
- background-color: #fff;
- box-shadow: var(--box--shadow);
+ background-color: var(--background-color);
+ box-shadow: var(--box-shadow);
padding: 20px;
display: flex;
justify-content: center;
margin: 20px 0;
+ border-radius: 8px;
}
.inc-exp-container > div {
@@ -60,36 +75,40 @@ h4 {
}
.money {
- font-size: 2;
+ font-size: 1.2rem;
letter-spacing: 1px;
margin: 5px 0;
}
+
.money-plus {
- color: #2ecc71;
+ color: var(--income-color);
}
.money-minus {
- color: #c0392b;
+ color: var(--expense-color);
}
label {
display: inline-block;
margin: 10px 0;
+ color: var(--primary-color);
}
input[type="text"],
-input[type="number"] {
+input[type="number"],
+input[type="date"] {
border: 1px solid #dedede;
border-radius: 2px;
display: block;
font-size: 16px;
padding: 10px;
width: 100%;
+ margin-bottom: 10px;
}
.btn {
cursor: pointer;
- background-color: #9c88ff;
+ background-color: var(--primary-color);
box-shadow: var(--box-shadow);
color: #fff;
border: 0;
@@ -98,6 +117,12 @@ input[type="number"] {
margin: 10px 0 30px;
padding: 10px;
width: 100%;
+ border-radius: 4px;
+ transition: background-color 0.3s ease;
+}
+
+.btn:hover {
+ background-color: var(--primary-light-color);
}
.btn:focus,
@@ -105,6 +130,14 @@ input[type="number"] {
outline: 0;
}
+.btn-income {
+ background-color: var(--income-color);
+}
+
+.btn-expense {
+ background-color: var(--expense-color);
+}
+
.list {
list-style-type: none;
padding: 0;
@@ -112,22 +145,23 @@ input[type="number"] {
}
.list li {
- background-color: #fff;
- box-shadow: var(--box--shadow);
+ background-color: var(--background-color);
+ box-shadow: var(--box-shadow);
color: #333;
display: flex;
justify-content: space-between;
position: relative;
padding: 10px;
margin: 10px 0;
+ border-radius: 8px;
}
.list li.plus {
- border-right: 5px solid #2ecc71;
+ border-right: 5px solid var(--income-color);
}
.list li.minus {
- border-right: 5px solid #c0392b;
+ border-right: 5px solid var(--expense-color);
}
.delete-btn {
@@ -144,8 +178,40 @@ input[type="number"] {
transform: translate(-100%, -50%);
opacity: 0;
transition: opacity 0.3s ease;
+ border-radius: 4px;
}
.list li:hover .delete-btn {
opacity: 1;
}
+
+.transaction-date {
+ font-size: 0.8rem;
+ color: #888;
+ margin-left: 10px;
+}
+
+#spendingChart {
+ max-width: 100%;
+ margin: 20px auto;
+}
+
+/* Style for the button to open the chart in a new tab */
+#open-chart {
+ cursor: pointer;
+ background-color: var(--primary-color);
+ box-shadow: var(--box-shadow);
+ color: #fff;
+ border: 0;
+ display: block;
+ font-size: 16px;
+ margin: 10px 0 30px;
+ padding: 10px;
+ width: 100%;
+ border-radius: 4px;
+ transition: background-color 0.3s ease;
+}
+
+#open-chart:hover {
+ background-color: var(--primary-light-color);
+}
From 634276b7c2dd7facf69c04da3b8f8cfb7ba9cf04 Mon Sep 17 00:00:00 2001
From: hersh <72140506+OGharsh@users.noreply.github.com>
Date: Wed, 24 Jul 2024 19:34:15 +0530
Subject: [PATCH 7/8] Created README.md
---
README.md | 73 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 73 insertions(+)
create mode 100644 README.md
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..59bab7e
--- /dev/null
+++ b/README.md
@@ -0,0 +1,73 @@
+# 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.
+
+## File Structure
+
+budget-tracker-basic/
+│
+├── index.html # The main HTML file
+├── style.css # The main CSS file
+├── script.js # The main JavaScript file
+└── README.md # This README file
+
+
+## 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.
From 5fc466aaf00c826f369033d029750bf6d7faf2f4 Mon Sep 17 00:00:00 2001
From: hersh <72140506+OGharsh@users.noreply.github.com>
Date: Wed, 24 Jul 2024 19:38:06 +0530
Subject: [PATCH 8/8] Updated README.md formatting issues
---
README.md | 10 ----------
1 file changed, 10 deletions(-)
diff --git a/README.md b/README.md
index 59bab7e..4e93a91 100644
--- a/README.md
+++ b/README.md
@@ -49,16 +49,6 @@ Budget Buddy is a simple and user-friendly budget tracker that helps you manage
3. **Viewing Spending Graphs**:
- Scroll down to the "Spending Chart" section to view your income and expenses for each month of the year.
-## File Structure
-
-budget-tracker-basic/
-│
-├── index.html # The main HTML file
-├── style.css # The main CSS file
-├── script.js # The main JavaScript file
-└── README.md # This README file
-
-
## Contributing
Contributions are welcome! Please open an issue or submit a pull request with any improvements or bug fixes.