Expense Analytics Dashboard | HTML CSS JavaScript Charts

Expense Analytics Dashboard with HTML, CSS & JavaScript

40 DAYS 40 PROJECT CHALLENGE

Day #25

Project Overview

The Expense Analytics Dashboard is a beginner-friendly financial tracking application built with HTML, CSS, and JavaScript. It allows users to enter an expense category, such as Food or Travel, along with the amount spent. The application then calculates the total expenses and displays the spending distribution using a pie chart.

The project uses Chart.js to create the expense visualization. JavaScript stores the categories and amounts in arrays, combines expenses when the same category is entered again, and updates the dashboard after every new expense. Therefore, this project provides practical experience with user input, arrays, calculations, DOM manipulation, and chart-based data visualization.

Key Features

Expense Category Input: Users can enter an expense category such as Food, Travel, Shopping, or Entertainment. JavaScript stores each category and uses it to organize the expense data.
Expense Amount Input: Users can enter the amount spent for each category. The application converts the entered value into a number before adding it to the expense data.
Add Expense: The Add Expense button processes the entered category and amount. After adding the expense, JavaScript immediately updates the total and chart.
Category-Based Tracking: When users enter the same category again, the application does not create a separate category. Instead, JavaScript adds the new amount to the existing category total.
Total Expenses: The dashboard displays the combined amount of all entered expenses. JavaScript calculates this value using the reduce() method whenever the dashboard updates.
Expense Pie Chart: Chart.js displays the spending distribution as a pie chart. Therefore, users can visually compare how much they spend across different categories.
Dynamic Chart Updates: Every new expense triggers a chart update. Before creating the new chart, JavaScript removes the previous chart to prevent overlapping visualizations.
Input Validation: The application checks whether the category and amount have been entered. If either value is missing or invalid, it displays an alert and stops the operation.
Automatic Form Reset: After successfully adding an expense, JavaScript clears both input fields. As a result, users can enter the next expense immediately.
Responsive Chart: Chart.js uses responsive settings so that the pie chart can adjust to the available space. This makes the visualization easier to view on different screen sizes.

What You'll Learn

How to build an expense analytics dashboard using HTML, CSS, and JavaScript.
How to collect and validate expense data from form inputs.
How to store categories and amounts in JavaScript arrays.
How to use indexOf() to find an existing expense category.
How to calculate totals using the reduce() method.
How to integrate Chart.js into a frontend project.
How to create and update a dynamic pie chart.
How to manipulate dashboard content using the DOM.

HTML Code

HTML creates the basic structure of the Expense Analytics Dashboard. The main .container contains the project heading, expense form, total expense card, and chart area.

The #category input allows users to enter an expense category, while the #amount input collects the spending amount. Next, the Add Expense button calls the addExpense() function when clicked. The statistics section contains the Total Expenses card, where JavaScript updates the #total element with the calculated amount. Finally, the #expenseChart canvas provides the area where Chart.js renders the pie chart.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Expense Analytics Dashboard</title>

<link rel="stylesheet" href="style.css">

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

</head>

<body>

<div class="container">

<h1>Expense Analytics Dashboard</h1>

<div class="form">

<input id="category" placeholder="Expense Category (Food, Travel, etc)">
<input id="amount" type="number" placeholder="Amount">

<button onclick="addExpense()">Add Expense</button>

</div>

<div class="stats">

<div class="card">
<h3>Total Expenses</h3>
<p id="total">₹0</p>
</div>

</div>

<div class="chart-box">

<canvas id="expenseChart"></canvas>

</div>

</div>

<script src="script.js"></script>

</body>
</html>

CSS Code

CSS controls the appearance and layout of the dashboard. First, the universal selector resets the default margin and padding, sets box-sizing: border-box, and applies the Arial font. The body uses a dark blue background with Flexbox to center the dashboard. Meanwhile, the .container creates a white card with padding, rounded corners, a fixed width, and a subtle shadow.

The input fields use full width, padding, borders, and rounded corners. In addition, the button uses a blue background with white text and changes its background color when the user hovers over it. Finally, the .card styles the total expense section, while .chart-box adds spacing around the chart. Therefore, the dashboard keeps the expense summary and visualization clearly separated.

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;
}

body{
background:#042354;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}

.container{
background:white;
padding:30px;
border-radius:12px;
width:700px;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,0.2);
}

h1{
margin-bottom:20px;
}

.form{
margin-bottom:20px;
}

input{
width:100%;
padding:10px;
margin-bottom:10px;
border:1px solid #ddd;
border-radius:6px;
}

button{
width:100%;
padding:12px;
background:#2563eb;
color:white;
border:none;
border-radius:6px;
cursor:pointer;
}

button:hover{
background:#1d4ed8;
}

.stats{
margin-bottom:20px;
}

.card{
background:#2563eb;
color:white;
padding:15px;
border-radius:8px;
}

.chart-box{
margin-top:20px;
}

Javascript Code

JavaScript manages expense entry, calculations, and chart generation. First, the code stores categories and amounts in separate arrays. The addExpense() function retrieves the values from the input fields and converts the amount into a number using parseFloat(). Next, JavaScript checks whether the category already exists using indexOf(). If it exists, the new amount is added to the existing value. Otherwise, the code adds the new category and amount to the arrays.

After that, updateDashboard() uses reduce() to calculate the total expenses and updates the total displayed on the dashboard. Finally, Chart.js creates a pie chart using the category and amount arrays. If an existing chart is present, JavaScript destroys it first. Therefore, every new expense produces an updated chart without overlapping the previous visualization.

let categories = []
let amounts = []

let chart

function addExpense(){

const category = document.getElementById("category").value
const amount = parseFloat(document.getElementById("amount").value)

if(!category || !amount){
alert("Enter valid data")
return
}

const index = categories.indexOf(category)

if(index > -1){

amounts[index] += amount

}else{

categories.push(category)
amounts.push(amount)

}

updateDashboard()

document.getElementById("category").value=""
document.getElementById("amount").value=""

}

function updateDashboard(){

const total = amounts.reduce((a,b)=>a+b,0)

document.getElementById("total").innerText = "₹" + total

const ctx = document.getElementById("expenseChart")

if(chart){
chart.destroy()
}

chart = new Chart(ctx,{

type:"pie",

data:{
labels:categories,
datasets:[{
data:amounts,
backgroundColor:[
"#2563eb",
"#10b981",
"#f59e0b",
"#ef4444",
"#8b5cf6"
]
}]
},

options:{
responsive:true
}

})

}