Scribd
Upload
5 views

Expense Manager

The document outlines the code for an Expense Manager web application, including HTML for the user interface, CSS for styling, and JavaScript for functionality. Users can input expenses or income, categorize them, and view a weekly summary through a chart. The application uses Chart.js for visualizing the data in a bar chart format.

Uploaded by

tharunanpazhagan2684
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

Expense Manager

The document outlines the code for an Expense Manager web application, including HTML for the user interface, CSS for styling, and JavaScript for functionality. Users can input expenses or income, categorize them, and view a weekly summary through a chart. The application uses Chart.js for visualizing the data in a bar chart format.

Uploaded by

tharunanpazhagan2684
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Expense Manager

HTML Code:
<!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="exp.css" />
</head>
<body>
<div class="container">
<h1>Expense Manager</h1>

<div class="form">
<select id="type">
<option value="expense">Expense</option>
<option value="income">Income</option>
</select>

<input type="number" id="amount" placeholder="Amount" />


<select id="category">
<option value="Food">Food</option>
<option value="Transport">Transport</option>
<option value="Salary">Salary</option>
<option value="Entertainment">Entertainment</option>
<option value="Saved">Saved</option>
<option value="Others">Others</option>
</select>

<input type="date" id="date" />


<button onclick="addEntry()">Add Entry</button>
</div>

<div>
<h2>Weekly Summary</h2>
<canvas id="chart" width="400" height="300"></canvas>
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="exp.js"></script>
</body>
</html>
CSS Code:

body {
font-family: Arial, sans-serif;
background: #000000;
margin: 0;
padding: 0;
}

.container {
max-width: 600px;
margin: 30px auto;
background: rgb(255, 254, 254);
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

h1, h2 {
text-align: center;
color: rgb(0, 0, 0);
}

.form {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
}

input, select, button {


padding: 10px;
font-size: 1rem;
}

button {
background-color: #ecf8a6;
color: rgb(0, 0, 0);
border: none;
cursor: pointer;
}

button:hover {
background-color: #388e3c;
}
JS Code:

const categories = ["Food", "Transport", "Salary", "Saved","Entertainment",


"Others"];
let entries = [];

function addEntry() {
const type = document.getElementById("type").value;
const amount = parseFloat(document.getElementById("amount").value);
const category = document.getElementById("category").value;
const date = new Date(document.getElementById("date").value);
if (!amount || !date) return;
entries.push({ type, amount, category, date });
updateChart();
}
function isThisWeek(date) {
const now = new Date();
const dayOfWeek = now.getDay();
const start = new Date(now);
start.setDate(now.getDate() - dayOfWeek);
const end = new Date(start);
end.setDate(start.getDate() + 6);
return date >= start && date <= end;
}
function updateChart() {
const weeklyEntries = entries.filter(entry => isThisWeek(entry.date));
const data = categories.map(cat => {
const income = weeklyEntries
.filter(e => e.category === cat && e.type === "income")
.reduce((sum, e) => sum + e.amount, 0);
const expense = weeklyEntries
.filter(e => e.category === cat && e.type === "expense")
.reduce((sum, e) => sum + e.amount, 0);
return { category: cat, income, expense };
});
renderChart(data);
}
let chart;
function renderChart(data) {
const ctx = document.getElementById("chart").getContext("2d");
if (chart) chart.destroy();
chart = new Chart(ctx, {
type: "bar",
data: {
labels: data.map(d => d.category),
datasets: [
{
label: "Income",
backgroundColor: "#4ade80",
data: data.map(d => d.income),
},
{
label: "Expense",
backgroundColor: "#f87171",
data: data.map(d => d.expense),
}
]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true,
}
}
}
});
}

You might also like