-
Notifications
You must be signed in to change notification settings - Fork 46
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Loading status checks…
Merge pull request #78 from Silver9876/main
fixes #76
Showing
6 changed files
with
277 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
<!-- This is the document type declaration specifying HTML5 --> | ||
<!DOCTYPE html> | ||
|
||
<!-- Opening tag for the HTML document with English language --> | ||
<html lang="en"> | ||
<head> | ||
<!-- Meta tags specifying character set and viewport settings --> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
|
||
<!-- Link to an external stylesheet for maintaining styles --> | ||
<link rel="stylesheet" href="style.css"> | ||
|
||
<!-- Title of the HTML document --> | ||
<title>Expense Tracker</title> | ||
</head> | ||
<body> | ||
<!-- Header section displaying the title of the expense tracker --> | ||
<header> | ||
Expense Tracker | ||
</header> | ||
|
||
<!-- Form section for adding expenses --> | ||
<div id="expense-form"> | ||
<!-- Heading for the add expense section with gold text color --> | ||
<h2 style="color: #FFD700;">Add Expense</h2> | ||
|
||
<!-- Input field for entering expense category --> | ||
<label for="category">Category:</label> | ||
<input type="text" id="category" placeholder="Enter category" required style="padding: 8px; border: 1px solid #FFD700; border-radius: 4px; background-color: #2d3134; color: white;"> | ||
|
||
<!-- Input field for entering expense amount --> | ||
<label for="amount">Amount:</label> | ||
<input type="number" id="amount" placeholder="Enter amount" required style="padding: 8px; border: 1px solid #FFD700; border-radius: 4px; background-color: #2d3134; color: white;"> | ||
|
||
<!-- Button for triggering the addExpense function --> | ||
<button onclick="addExpense()" style="background-color: #FFD700; color: #1f2124; padding: 10px; border: none; border-radius: 4px; cursor: pointer;">Add Expense</button> | ||
</div> | ||
|
||
<!-- Section for displaying the list of expenses --> | ||
<div id="expenses-list"> | ||
<!-- Heading for the expenses list section with gold text color --> | ||
<h2 style="color: #FFD700;">Expenses</h2> | ||
|
||
<!-- Unordered list for displaying individual expense items --> | ||
<ul id="expense-items"></ul> | ||
</div> | ||
|
||
<!-- Section for displaying the spending pattern chart --> | ||
<div id="chart-container"> | ||
<!-- Heading for the spending pattern chart with gold text color --> | ||
<h2 style="color: #FFD700;">Spending Pattern</h2> | ||
|
||
<!-- Canvas element for rendering the expense chart --> | ||
<canvas id="expense-chart"></canvas> | ||
</div> | ||
|
||
<!-- External script references for Chart.js and the custom script --> | ||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | ||
<script src="script.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,95 @@ | ||
// Array to store expense objects | ||
const expenses = []; | ||
let myChart; // Variable to hold the Chart instance | ||
|
||
// Function to add a new expense | ||
function addExpense() { | ||
// Get category and amount from user input | ||
const category = document.getElementById('category').value; | ||
const amount = parseFloat(document.getElementById('amount').value); | ||
|
||
// Check if the inputs are valid | ||
if (category && !isNaN(amount)) { | ||
// Create an expense object and push it to the expenses array | ||
const expense = { category, amount }; | ||
expenses.push(expense); | ||
|
||
// Update the displayed expenses and chart | ||
displayExpenses(); | ||
displayChart(); | ||
|
||
// Clear the input form | ||
clearForm(); | ||
} else { | ||
// Alert the user if inputs are invalid | ||
alert('Please enter a valid category and amount.'); | ||
} | ||
} | ||
|
||
// Function to display expenses in the UI | ||
function displayExpenses() { | ||
const expensesList = document.getElementById('expense-items'); | ||
expensesList.innerHTML = ''; | ||
|
||
// Iterate through expenses and create list items | ||
expenses.forEach((expense, index) => { | ||
const listItem = document.createElement('li'); | ||
listItem.className = 'expense-item'; | ||
listItem.innerHTML = ` | ||
<span>${expense.category}</span> | ||
<span>$${expense.amount.toFixed(2)}</span> | ||
<span class="delete-button" onclick="deleteExpense(${index})">Delete</span> | ||
`; | ||
expensesList.appendChild(listItem); | ||
}); | ||
} | ||
|
||
// Function to delete an expense | ||
function deleteExpense(index) { | ||
// Remove the expense from the array and update the UI and chart | ||
expenses.splice(index, 1); | ||
displayExpenses(); | ||
displayChart(); | ||
} | ||
|
||
// Function to display a bar chart of expenses | ||
function displayChart() { | ||
const ctx = document.getElementById('expense-chart').getContext('2d'); | ||
const labels = expenses.map(expense => expense.category); | ||
const data = expenses.map(expense => expense.amount); | ||
const backgroundColor = expenses.map(expense => expense.amount > 0 ? 'rgba(253, 253, 150, 0.7)' : 'rgba(255, 99, 132, 0.7)'); // Yellow and red chart colors | ||
const borderColor = expenses.map(expense => expense.amount > 0 ? 'rgba(253, 253, 150, 1)' : 'rgba(255, 99, 132, 1)'); | ||
|
||
// Destroy the previous chart instance to prevent duplicates | ||
if (myChart) { | ||
myChart.destroy(); | ||
} | ||
|
||
// Create a new bar chart | ||
myChart = new Chart(ctx, { | ||
type: 'bar', | ||
data: { | ||
labels, | ||
datasets: [{ | ||
label: 'Amount', | ||
data, | ||
backgroundColor, | ||
borderColor, | ||
borderWidth: 1 | ||
}] | ||
}, | ||
options: { | ||
scales: { | ||
y: { | ||
beginAtZero: true | ||
} | ||
} | ||
} | ||
}); | ||
} | ||
|
||
// Function to clear the input form | ||
function clearForm() { | ||
document.getElementById('category').value = ''; | ||
document.getElementById('amount').value = ''; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
/* Overall styling for the entire page */ | ||
body { | ||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Set the font family for the page */ | ||
margin: 0; /* Remove default margin */ | ||
padding: 0; /* Remove default padding */ | ||
background-color: #1f2124; /* Dark background color */ | ||
color: white; /* White text color */ | ||
} | ||
|
||
/* Styling for the header section */ | ||
header { | ||
background-color: #FFD700; /* Gold header color */ | ||
color: #1f2124; /* Dark text color */ | ||
text-align: center; /* Center-align text */ | ||
padding: 20px; /* Padding around the header */ | ||
font-size: 24px; /* Font size of the header */ | ||
} | ||
|
||
/* Styling for the expense form and expenses list sections */ | ||
#expense-form, #expenses-list { | ||
max-width: 600px; /* Maximum width for the form and list */ | ||
margin: 20px auto; /* Center the form and list */ | ||
background-color: #2d3134; /* Dark form and list background color */ | ||
border-radius: 8px; /* Rounded corners */ | ||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Box shadow for a subtle lift */ | ||
padding: 20px; /* Padding inside the form and list */ | ||
} | ||
|
||
/* Styling for individual expense items */ | ||
.expense-item { | ||
display: flex; /* Use flexbox for layout */ | ||
justify-content: space-between; /* Space evenly between items */ | ||
background-color: #232627; /* Dark item background color */ | ||
margin: 10px 0; /* Margin around each item */ | ||
padding: 15px; /* Padding inside each item */ | ||
border-radius: 8px; /* Rounded corners */ | ||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Box shadow for a subtle lift */ | ||
} | ||
|
||
/* Styling for the delete button within expense items */ | ||
.delete-button { | ||
cursor: pointer; /* Change cursor to pointer on hover */ | ||
color: #e74c3c; /* Red delete button color */ | ||
font-weight: bold; /* Bold font weight for emphasis */ | ||
} | ||
|
||
/* Styling for the chart container section */ | ||
#chart-container { | ||
max-width: 800px; /* Maximum width for the chart container */ | ||
margin: 20px auto; /* Center the chart container */ | ||
background-color: #2d3134; /* Dark chart background color */ | ||
border-radius: 8px; /* Rounded corners */ | ||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Box shadow for a subtle lift */ | ||
padding: 20px; /* Padding inside the chart container */ | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
/* Overall styling for the entire page */ | ||
body { | ||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Set the font family for the page */ | ||
margin: 0; /* Remove default margin */ | ||
padding: 0; /* Remove default padding */ | ||
background-color: #1f2124; /* Dark background color */ | ||
color: white; /* White text color */ | ||
} | ||
|
||
/* Styling for the header section */ | ||
header { | ||
background-color: #FFD700; /* Gold header color */ | ||
color: #1f2124; /* Dark text color */ | ||
text-align: center; /* Center-align text */ | ||
padding: 20px; /* Padding around the header */ | ||
font-size: 24px; /* Font size of the header */ | ||
} | ||
|
||
/* Styling for the expense form and expenses list sections */ | ||
#expense-form, #expenses-list { | ||
max-width: 600px; /* Maximum width for the form and list */ | ||
margin: 20px auto; /* Center the form and list */ | ||
background-color: #2d3134; /* Dark form and list background color */ | ||
border-radius: 8px; /* Rounded corners */ | ||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Box shadow for a subtle lift */ | ||
padding: 20px; /* Padding inside the form and list */ | ||
} | ||
|
||
/* Styling for individual expense items */ | ||
.expense-item { | ||
display: flex; /* Use flexbox for layout */ | ||
justify-content: space-between; /* Space evenly between items */ | ||
background-color: #232627; /* Dark item background color */ | ||
margin: 10px 0; /* Margin around each item */ | ||
padding: 15px; /* Padding inside each item */ | ||
border-radius: 8px; /* Rounded corners */ | ||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Box shadow for a subtle lift */ | ||
} | ||
|
||
/* Styling for the delete button within expense items */ | ||
.delete-button { | ||
cursor: pointer; /* Change cursor to pointer on hover */ | ||
color: #e74c3c; /* Red delete button color */ | ||
font-weight: bold; /* Bold font weight for emphasis */ | ||
} | ||
|
||
/* Styling for the chart container section */ | ||
#chart-container { | ||
max-width: 800px; /* Maximum width for the chart container */ | ||
margin: 20px auto; /* Center the chart container */ | ||
background-color: #2d3134; /* Dark chart background color */ | ||
border-radius: 8px; /* Rounded corners */ | ||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Box shadow for a subtle lift */ | ||
padding: 20px; /* Padding inside the chart container */ | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters