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 web-based financial tracking tool that helps users monitor and analyze their spending patterns. Users can enter expense data by category, and the dashboard generates visual insights through charts and summary cards. The project demonstrates frontend concepts such as data visualization, user input handling, dashboard layout design, and interactive chart rendering using Chart.js, making it a practical project for building personal finance analytics interfaces.

Key Features

Track expenses by different categories
Interactive charts for expense visualization
Dashboard cards showing spending summaries
Dynamic chart generation using Chart.js
Clean and modern dashboard layout
Responsive design for multiple devices
Real-time updates when new expenses are added
User-friendly expense analytics interface

HTML Code

<!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

*{
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

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
}

})

}