Skip to content

Commit

Permalink
Merge pull request #78 from Silver9876/main
Browse files Browse the repository at this point in the history
fixes #76
shrey141102 authored Nov 30, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
2 parents f8e0e79 + e7f1862 commit 2e37b78
Showing 6 changed files with 277 additions and 0 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -30,6 +30,7 @@
- Skycast (weather app)
- Background Color Changer
- BLog Website
- Expense tracker


<h2>🍰 Contribution Guidelines:</h2>
62 changes: 62 additions & 0 deletions expense tracker/index.html
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>
95 changes: 95 additions & 0 deletions expense tracker/script.js
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 = '';
}
55 changes: 55 additions & 0 deletions expense tracker/style.css
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 */
}
55 changes: 55 additions & 0 deletions expense tracker/style1.css
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 */
}
9 changes: 9 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -7,6 +7,7 @@ const projects = [
image:
"https://vitalityweightlossinstitute.com/wp-content/uploads/2023/05/bmi.png",
},

{
title: "Calculator",
discription: "Calculator project made using HTML CSS Javascript",
@@ -200,6 +201,14 @@ const projects = [
image:
"https://mir-s3-cdn-cf.behance.net/projects/404/47b23888537607.Y3JvcCw2NTMsNTExLDIxNiwxOTc.jpg",
},
{
title: "Expense Tracker",
discription:
"Expense tracker allows users to log their expenses, categorize them, and view spending patterns over time.",
link: "./expense tracker/index.html",
image:
"https://img.freepik.com/premium-photo/flat-design-illustration-facebook-social-network-groups_863013-52875.jpg?w=740",
}

];

0 comments on commit 2e37b78

Please sign in to comment.