Scribd
Upload
11 views60 pages

Expense Tracker Front-End Code

The document contains the complete front-end code for an Expense Tracker application, including HTML files for the Home, Expenses, Reports, and Settings pages. Each page features a navigation bar, sections for displaying balance and transactions, and forms for adding expenses. The application utilizes external stylesheets and scripts to enhance functionality and appearance.

Uploaded by

tanishqrupesh2005
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
11 views60 pages

Expense Tracker Front-End Code

The document contains the complete front-end code for an Expense Tracker application, including HTML files for the Home, Expenses, Reports, and Settings pages. Each page features a navigation bar, sections for displaying balance and transactions, and forms for adding expenses. The application utilizes external stylesheets and scripts to enhance functionality and appearance.

Uploaded by

tanishqrupesh2005
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

Expense Tracker – Complete Front-End Code

[Link]
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Expenses Tracker - Dashboard</title>
<link href="[Link]
family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet">
<link rel="stylesheet"
href="[Link]
7.2/css/[Link]" crossorigin="anonymous"
referrerpolicy="no-referrer" />
<link rel="stylesheet" href="[Link]">
<link rel="stylesheet" href="[Link]">
</head>

<body>
<header>
<nav>
<h1>Expense Tracker</h1>
<a class="exp" href="[Link]">
Add Expenses
</a>
<ul>
<li><a href="[Link]">Dashboard</a></li>
<li><a href="[Link]">Add
Expenses</a></li>
<li><a href="[Link]">Reports</a></li>
<li><a
href="[Link]">Settings</a></li>
</ul>
<h2 id="logout" style="cursor: pointer;">Log
Out</h2>
<div class="menu-icon">
<i class="fa-solid fa-bars"></i>
</div>
</nav>
</header>
<main>
<section class="left">
<div class="balance">
<h2>Balance Overview</h2>
<div class="total">
<div class="income">
<h3>Total Income (Click to
Edit)</h3>
<h2 id="income">$0</h2>
</div>
<div class="expenses">
<h3>Total Expenses</h3>
<h2 id="total-expense">$0</h2>
</div>
<div class="rem-balance">
<h3>Remaining Balance</h3>
<h2 id="reme-balance">$0</h2>
</div>
</div>
</div>
<div class="transactions">
<h2>Recent Transactions</h2>
<div class="transactions-table-wrapper">
<table>
<thead>
<tr>
<th>Date</th>
<th>Description</th>
<th>Category</th>
<th>Amount</th>
<th>Action</th>
</tr>
</thead>
<tbody id="transactionsBody">
</tbody>
</table>
</div>
</div>
</section>
<section class="right">
<div class="spendings">
<h2>Spending by Category</h2>
<div class="all">
<div class="chart-wrapper">
<canvas id="categoryChart"></canvas>
</div>

<ul class="legend">
<li><span class="dot
food"></span>Food</li>
<li><span class="dot
travel"></span>Travel</li>
<li><span class="dot
utilities"></span>Utilities</li>
<li><span class="dot
entertainment"></span>Entertainment</li>
</ul>
</div>
</div>
</section>
</main>
<script
src="[Link]
<script src="[Link]"></script>
<script src="[Link]"></script>
</body>

</html>
Expenses Page ([Link])
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Expenses Tracker - Add Expense</title>
<link rel="stylesheet"
href="[Link]
7.2/css/[Link]" crossorigin="anonymous"
referrerpolicy="no-referrer" />
<link rel="stylesheet" href="[Link]">
<link rel="stylesheet" href="[Link]">
</head>

<body>
<header>
<nav>
<h1>Expense Tracker</h1>
<a class="exp" href="[Link]">
Dashboard
</a>
<ul>
<li><a href="[Link]">Dashboard</a></li>
<li><a href="[Link]">Add
Expenses</a></li>
<li><a href="[Link]">Reports</a></li>
<li><a
href="[Link]">Settings</a></li>
</ul>
<h2 id="logout" style="cursor: pointer;">Log
Out</h2>
<div class="menu-icon">
<i class="fa-solid fa-bars"></i>
</div>
</nav>
</header>
<main style="flex-direction: column; align-items:
center;">
<section class="balance-section left">
<h2>Balance Overview</h2>
<div class="total">
<div class="income">
<h3>Total Income</h3>
<h2 id="income">$0</h2>
</div>
<div class="expenses">
<h3>Total Expenses</h3>
<h2 id="total-expense">$0</h2>
</div>
<div class="rem-balance">
<h3>Remaining Balance</h3>
<h2 id="reme-balance">$0</h2>
</div>
</div>
</section>

<div class="input-form">
<h1>Add Expenses</h1>
<div class="data">
<div>
<label for="date">Date</label>
<input type="date" name="date"
id="date">
</div>
<div>
<label
for="description">Description</label>
<input type="text" name="description"
id="description">
</div>
<div>
<label for="category">Category</label>
<select name="category" id="category">
<option value="Food">Food</option>
<option
value="Entertainment">Entertainment</option>
<option
value="Travel">Travel</option>
<option
value="Utilities">Utilities</option>
</select>
</div>
<div>
<label for="amount">Amount</label>
<input type="number" id="amount"
placeholder="$0.00" min="0.01" step="0.01">
</div>
<div>
<button id="add">Add Expense</button>
</div>
</div>
</div>

<div class="transactions left">


<h2>Recent Transactions</h2>
<div class="transactions-table-wrapper">
<table>
<thead>
<tr>
<th>Date</th>
<th>Description</th>
<th>Category</th>
<th>Amount</th>
<th>Action</th>
</tr>
</thead>
<tbody id="transactionsBody">
</tbody>
</table>
</div>
</div>
</main>
<script src="[Link]"></script>
<script src="[Link]"></script>
</body>

</html>
Reports Page ([Link])
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Expenses Tracker - Reports</title>
<link href="[Link]
family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet">
<link rel="stylesheet"
href="[Link]
7.2/css/[Link]" crossorigin="anonymous"
referrerpolicy="no-referrer" />
<link rel="stylesheet" href="[Link]">
<link rel="stylesheet" href="[Link]">
</head>

<body>
<header>
<nav>
<h1>Expense Tracker</h1>
<a class="exp" href="[Link]">Add
Expenses</a>
<ul>
<li><a href="[Link]">Dashboard</a></li>
<li><a href="[Link]">Add
Expenses</a></li>
<li><a href="[Link]">Reports</a></li>
<li><a
href="[Link]">Settings</a></li>
</ul>
<h2 id="logout" style="cursor: pointer;">Log
Out</h2>
<div class="menu-icon">
<i class="fa-solid fa-bars"></i>
</div>
</nav>
</header>
<main class="single-column">
<section class="main-content-card">
<h2>Financial Reports & Analytics</h2>

<div style="display: flex; justify-content:


space-between; align-items: center; margin-bottom: 20px;
width: 100%;">
<p style="color: #9CA3AF;">Review your
monthly income, spending, and savings.</p>
<select style="padding: 8px; border-radius:
6px; background-color: #111827; color: #FFFFFF; border: 1px
solid #4B5563;">
<option>2025</option>
<option>2024</option>
</select>
</div>

<div class="transactions-table-wrapper"
style="max-height: 500px; width: 100%; box-shadow: none;">
<h3 style="margin-bottom: 10px; color:
#FFFFFF; padding: 10px 0;">Monthly Summary</h3>
<table>
<thead>
<tr>
<th>Month</th>
<th>Total Income</th>
<th>Total Expenses</th>
<th>Net Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>October</td>
<td>$3,500.00</td>
<td class="negative">-
$2,960.00</td>
<td style="color:
#34D399;">$540.00</td>
</tr>
<tr>
<td>September</td>
<td>$3,500.00</td>
<td class="negative">-
$3,150.00</td>
<td style="color:
#34D399;">$350.00</td>
</tr>
<tr>
<td>August</td>
<td>$3,500.00</td>
<td class="negative">-
$4,200.00</td>
<td style="color: #F87171;">-
$700.00</td>
</tr>
<tr>
<td>July</td>
<td>$3,200.00</td>
<td class="negative">-
$2,800.00</td>
<td style="color:
#34D399;">$400.00</td>
</tr>
</tbody>
</table>
</div>

<div class="total" style="display: grid; grid-


template-columns: repeat(3, 1fr); gap: 20px; margin-top:
20px; width: 100%;">
<div class="income" style="background-
color: #1F2937; padding: 15px; border-radius: 8px; border:
1px solid #4B5563;">
<h3 style="color: #34D399; font-size:
16px;">Total Saved YTD</h3>
<p style="color: #FFFFFF; font-size:
20px;">$1,190.00</p>
</div>
<div class="expenses" style="background-
color: #1F2937; padding: 15px; border-radius: 8px; border:
1px solid #4B5563;">
<h3 style="color: #F87171; font-size:
16px;">Average Expense</h3>
<p style="color: #FFFFFF; font-size:
20px;">$85.50</p>
</div>
<div class="rem-balance" style="background-
color: #1F2937; padding: 15px; border-radius: 8px; border:
1px solid #4B5563;">
<h3 style="color: #9CA3AF; font-size:
16px;">Months in Deficit</h3>
<p style="color: #FFFFFF; font-size:
20px;">1 of 12</p>
</div>
</div>

</section>
</main>
<script src="[Link]"></script>
</body>

</html>
Settings Page ([Link])
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Expenses Tracker - Settings</title>
<link href="[Link]
family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet">
<link rel="stylesheet"
href="[Link]
7.2/css/[Link]" crossorigin="anonymous"
referrerpolicy="no-referrer" />
<link rel="stylesheet" href="[Link]">
<link rel="stylesheet" href="[Link]">
</head>

<body>
<header>
<nav>
<h1>Expense Tracker</h1>
<a class="exp" href="[Link]">
Add Expenses
</a>
<ul>
<li><a href="[Link]">Dashboard</a></li>
<li><a href="[Link]">Add
Expenses</a></li>
<li><a href="[Link]">Reports</a></li>
<li><a
href="[Link]">Settings</a></li>
</ul>
<h2 id="logout" style="cursor: pointer;">Log
Out</h2>
<div class="menu-icon">
<i class="fa-solid fa-bars"></i>
</div>
</nav>
</header>
<main class="single-column">
<section class="main-content-card">
<h2>User Settings & Profile</h2>

<div style="display: flex; align-items: center;


padding: 15px 0; border-bottom: 1px solid #4B5563; margin-
bottom: 20px;">
<div style="width: 70px; height: 70px;
border-radius: 50%; background: radial-gradient(circle,
#6B7280 0%, #4B5563 100%); display: flex; align-items:
center; justify-content: center; margin-right: 20px; box-
shadow: 0 0 5px rgba(0,0,0,0.5);">
<i class="fa-solid fa-user" style="font-
size: 30px; color: #111827;"></i>
</div>
<div>
<h3 style="color: #FFFFFF; margin-
bottom: 5px;">Welcome Back, User</h3>
<button class="setting-btn secondary-
btn" style="padding: 5px 10px;">Change Avatar</button>
</div>
</div>

<div class="settings-group">
<h3>Account Information</h3>
<div class="setting-item">
<label>Email Address</label>
<input type="email"
value="user@[Link]" disabled style="color: #9CA3AF;
background-color: #111827; border: 1px solid #4B5563;
padding: 8px 12px; border-radius: 6px;">
</div>
<div class="setting-item">
<label>Change Password</label>
<button class="setting-btn">Reset
Password</button>
</div>
</div>
<div class="settings-group">
<h3>App Preferences</h3>
<div class="setting-item">
<label>Default Currency</label>
<select style="border: 1px solid
#4B5563; padding: 8px 12px; border-radius: 6px; background-
color: #111827; color: #FFFFFF;">
<option>USD ($)</option>
<option>INR (₹)</option>
<option>EUR (€)</option>
</select>
</div>
<div class="setting-item">
<label>Export Data</label>
<button class="setting-btn secondary-
btn">Export to CSV</button>
</div>
</div>
</section>
</main>
<script src="[Link]"></script>
</body>

</html>
Login Page ([Link])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Expenses Tracker - Log In</title>
<link rel="stylesheet"
href="[Link]
7.2/css/[Link]" crossorigin="anonymous"
referrerpolicy="no-referrer" />
<link rel="stylesheet" href="[Link]">
</head>
<body>
<main>
<div class="main-container">
<h1>Log In</h1>
<div class="hr"></div>
<form id="loginForm">
<div class="form-group">
<label>Email</label><br>
<input type="email" id="email" required />
</div>
<div class="form-group password-group">
<label>Password</label>
<div class="password-wrapper">
<input type="password" id="password" required />
<button type="button" id="togglePassword"><i
class="fa-solid fa-eye-slash"></i></button>
</div>
<div class="signup">
<a href="[Link]"><p>Sign up</p></a>
</div>
</div>
<div class="btn">
<button type="submit" id="submit">Log in</button>
</div>
</form>
</div>
</main>

<script src="[Link]"></script>
</body>
</html>
Signup Page ([Link])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Expenses Tracker - Sign Up</title>
<link rel="stylesheet"
href="[Link]
7.2/css/[Link]" crossorigin="anonymous"
referrerpolicy="no-referrer" />
<link rel="stylesheet" href="[Link]">
</head>
<body>
<main>
<div class="main-container">
<h1>Sign Up</h1>
<div class="hr"></div>
<form id="loginForm">
<div class="form-group">
<label>Email</label><br>
<input type="email" id="email" required />
</div>
<div class="form-group password-group">
<label>Password</label>
<div class="password-wrapper">
<input type="password" id="password" required />
<button type="button" id="togglePassword"><i
class="fa-solid fa-eye-slash"></i></button>
</div>
</div>
<div class="btn">
<button type="submit" id="submit">Sign Up</button>
</div>
</form>
</div>
</main>

<script src="[Link]"></script>
</body>
</html>
Global Styles ([Link])
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Inter', sans-serif;
font-size: 16px;
color: #E5E7EB; /* Light text */
background-color: #111827; /* Deep Black/Charcoal */

/* --- NEW: Background Image Styles --- */


background-image:
url('[Link]
%20purple%20wallet%20with%20money%20inside%20and%20some
%20other%20stationary%20on%20a%20pink%20background'); /* Use
the provided image URL */
background-size: cover; /* Cover the entire viewport */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image
*/
background-attachment: fixed; /* Keep image fixed when
scrolling */
/* --- END NEW --- */
}

h1,
h2,
h3 {
font-weight: 600;
color: #F9FAFB; /* White for headings */
}

p,
table {
font-weight: 400;
}
/* Header/Navigation */
header nav {
display: flex;
justify-content: space-between;
background-color: #1F2937; /* Slightly lighter than body
for depth */
align-items: center;
color: white;
padding: 15px 25px;
position: fixed;
top: 0;
right: 0;
left: 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
z-index: 10;
}

nav h1 {
font-size: 24px;
font-weight: 800;
}

header nav a {
font-weight: 600;
text-decoration: none;
color: white;
}

nav ul {
display: flex;
}

nav ul li {
margin: 0 15px;
list-style: none;
cursor: pointer;
font-weight: 500;
transition: color 0.2s;
}

nav ul li:hover {
color: #9CA3AF; /* Light gray on hover */
}

/* Main Content Layout */


main {
padding-top: 75px;
display: flex;
justify-content: center;
gap: 30px;
align-items: start;
padding: 75px 20px 40px 20px;
max-width: 1400px;
margin: 0 auto;
}

/* Single Column Pages (Reports/Settings) */


[Link]-column {
display: flex;
flex-direction: column;
align-items: center;
padding: 75px 20px 40px 20px;
max-width: 1000px;
margin: 0 auto;
}

/* Main Content Card for Reports/Settings */


.main-content-card {
background-color: #1F2937; /* Dark Card Background */
width: 100%;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
border: 1px solid #4B5563;
}
.main-content-card h2 {
font-size: 28px;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #4B5563;
}
.main-content-card p {
color: #D1D5DB;
}

/* Settings Specific Styles */


.settings-group {
margin-top: 25px;
padding-top: 15px;
border-top: 1px solid #4B5563;
}
.settings-group h3 {
font-size: 18px;
margin-bottom: 15px;
color: #FFFFFF;
}
.setting-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
border-bottom: 1px solid #1F2937;
}
.setting-item label {
font-weight: 500;
}
.setting-btn {
padding: 8px 15px;
border: 1px solid #4B5563;
background-color: #4B5563;
color: #FFFFFF;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.2s;
}
.setting-btn:hover {
background-color: #6B7280;
}
.secondary-btn {
background-color: #1F2937;
color: #9CA3AF;
border-color: #4B5563;
}
.secondary-btn:hover {
background-color: #374151;
}

.left, .right {
flex: 1;
min-width: 300px;
}
.left {
max-width: 650px;
}
.right {
max-width: 400px;
}

/* Balance Cards */
.balance {
margin-bottom: 30px;
}
.balance h2 {
margin-bottom: 15px;
font-size: 24px;
}
.total {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

.income, .expenses, .rem-balance {


background-color: #1F2937;
padding: 20px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
border: 1px solid #4B5563;
}
.income h3, .expenses h3, .rem-balance h3 {
font-size: 14px;
color: #9CA3AF;
margin-bottom: 8px;
}
#income { color: #34D399; }
#total-expense { color: #F87171; }
#reme-balance { color: #9CA3AF; }

/* Expense Input Form */


.input-form h1 {
font-size: 24px;
margin-bottom: 15px;
}

.data {
background-color: #1F2937;
width: 100%;
max-width: 450px;
border-radius: 12px;
padding: 30px;
display: flex;
flex-direction: column;
gap: 18px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
border: 1px solid #4B5563;
}

.data div {
display: flex;
flex-direction: column;
width: 100%;
gap: 5px;
}

input,
select {
border: 1px solid #4B5563;
border-radius: 8px;
padding: 0 15px;
height: 42px;
background-color: #111827;
color: #FFFFFF;
outline: none;
transition: border-color 0.2s;
}

input:focus, select:focus {
border-color: #9CA3AF;
}

label {
font-weight: 600;
font-size: 14px;
padding-left: 2px;
color: #D1D5DB;
}

.data div button {


width: 100%;
border: none;
border-radius: 8px;
height: 42px;
margin-top: 10px;
background: #4B5563;
color: #FFFFFF;
font-size: 16px;
font-weight: 600;
transition: background-color 0.2s, transform 0.1s;
}

.data div button:hover {


background-color: #6B7280;
}

/* Transactions Table */
.transactions {
margin: 0;
}

.transactions h2 {
margin-bottom: 15px;
font-size: 24px;
}

.transactions-table-wrapper {
max-height: 450px;
overflow-y: auto;
border: 1px solid #4B5563;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

table {
width: 100%;
border-collapse: collapse;
background: #1F2937;
border-radius: 12px;
overflow: hidden;
}

thead {
background-color: #374151;
}

th,
td {
font-size: 15px;
text-align: left;
padding: 15px 20px;
border-bottom: 1px solid #4B5563;
}

th {
font-size: 15px;
font-weight: 700;
color: #F9FAFB;
}
th:last-child {
text-align: center;
width: 80px;
}

tr:hover {
background-color: #374151;
}
.negative {
color: #F87171;
font-weight: bold;
}

.delete-btn {
background: none;
border: none;
color: #F87171;
cursor: pointer;
font-size: 16px;
padding: 5px;
transition: opacity 0.2s;
}

.delete-btn:hover {
opacity: 0.7;
}

/* Spending Chart */
.spendings {
background-color: #1F2937;
padding: 25px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
border: 1px solid #4B5563;
}
/* FIX: Ensures chart area itself doesn't show white
background */
.chart-wrapper canvas {
background-color: #1F2937;
border-radius: 8px;
}

.spendings h2 {
margin-bottom: 20px;
font-size: 24px;
}
.all {
display: flex;
flex-direction: column;
align-items: center;
}
.legend {
list-style: none;
padding: 0;
margin-top: 20px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.legend li {
font-size: 14px;
color: #D1D5DB;
}
.dot {
height: 10px;
width: 10px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.food { background-color: #4F46E5; }
.travel { background-color: #22C55E; }
.utilities { background-color: #FACC15; }
.entertainment { background-color: #EF4444; }

/* Media Queries (Updated) */


@media(max-width:1200px) {
main {
flex-direction: column;
align-items: center;
gap: 20px;
}
.left, .right {
max-width: 800px;
width: 100%;
}
.transactions-table-wrapper {
overflow-x: auto;
}
table {
min-width: 600px;
}
}

@media (max-width: 768px) {


nav h1 {
font-size: 20px;
}
.total {
grid-template-columns: 1fr;
}
.transactions {
padding: 0 10px;
}
.setting-item {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.setting-btn {
width: 100%;
}
}

@media(max-width:620px) {
nav ul {
background: #1F2937;
}
.exp {
display: block;
}
}
Expenses Styles ([Link])
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Inter', sans-serif;
font-size: 16px;
color: #E5E7EB; /* Light text */
background-color: #111827; /* Deep Black/Charcoal */

/* --- FIX: Updated Background Image Path --- */


background-image: url('assests/[Link]'); /*
CORRECTED PATH */
background-size: cover; /* Use 'cover' to ensure the
image fills the entire background */
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}

h1,
h2,
h3 {
font-weight: 600;
color: #F9FAFB; /* White for headings */
}

p,
table {
font-weight: 400;
}

/* Header/Navigation */
header nav {
display: flex;
justify-content: space-between;
background-color: #1F2937;
align-items: center;
color: white;
padding: 15px 25px;
position: fixed;
top: 0;
right: 0;
left: 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
z-index: 10;
}

nav h1 {
font-size: 24px;
font-weight: 800;
}

header nav a {
font-weight: 600;
text-decoration: none;
color: white;
}

/* FIX: Hide the mobile-only 'Add Expenses' link by default


on larger screens */
header nav .exp {
display: none;
}

nav ul {
display: flex;
}

nav ul li {
margin: 0 15px;
list-style: none;
cursor: pointer;
font-weight: 500;
transition: color 0.2s;
}
nav ul li:hover {
color: #9CA3AF;
}

/* Main Content Layout */


main {
padding-top: 75px;
display: flex;
justify-content: center;
gap: 30px;
align-items: start;
padding: 75px 20px 40px 20px;
max-width: 1400px;
margin: 0 auto;
}

/* Single Column Pages (Reports/Settings) */


[Link]-column {
display: flex;
flex-direction: column;
align-items: center;
padding: 75px 20px 40px 20px;
max-width: 1000px;
margin: 0 auto;
}

/* Main Content Card for Reports/Settings */


.main-content-card {
background-color: #1F2937;
width: 100%;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
border: 1px solid #4B5563;
}
.main-content-card h2 {
font-size: 28px;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #4B5563;
}
.main-content-card p {
color: #D1D5DB;
}

/* Settings Specific Styles */


.settings-group {
margin-top: 25px;
padding-top: 15px;
border-top: 1px solid #4B5563;
}
.settings-group h3 {
font-size: 18px;
margin-bottom: 15px;
color: #FFFFFF;
}
.setting-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
border-bottom: 1px solid #1F2937;
}
.setting-item label {
font-weight: 500;
}
.setting-btn {
padding: 8px 15px;
border: 1px solid #4B5563;
background-color: #4B5563;
color: #FFFFFF;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.2s;
}
.setting-btn:hover {
background-color: #6B7280;
}
.secondary-btn {
background-color: #1F2937;
color: #9CA3AF;
border-color: #4B5563;
}
.secondary-btn:hover {
background-color: #374151;
}

.left, .right {
flex: 1;
min-width: 300px;
}
.left {
max-width: 650px;
}
.right {
max-width: 400px;
}

/* Balance Cards */
.balance {
margin-bottom: 30px;
}
.balance h2 {
margin-bottom: 15px;
font-size: 24px;
}
.total {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

.income, .expenses, .rem-balance {


background-color: #1F2937;
padding: 20px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
border: 1px solid #4B5563;
}
.income h3, .expenses h3, .rem-balance h3 {
font-size: 14px;
color: #9CA3AF;
margin-bottom: 8px;
}
#income { color: #34D399; }
#total-expense { color: #F87171; }
#reme-balance { color: #9CA3AF; }

/* Expense Input Form */


.input-form h1 {
font-size: 24px;
margin-bottom: 15px;
}

.data {
background-color: #1F2937;
width: 100%;
max-width: 450px;
border-radius: 12px;
padding: 30px;
display: flex;
flex-direction: column;
gap: 18px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
border: 1px solid #4B5563;
}

.data div {
display: flex;
flex-direction: column;
width: 100%;
gap: 5px;
}

input,
select {
border: 1px solid #4B5563;
border-radius: 8px;
padding: 0 15px;
height: 42px;
background-color: #111827;
color: #FFFFFF;
outline: none;
transition: border-color 0.2s;
}

input:focus, select:focus {
border-color: #9CA3AF;
}

label {
font-weight: 600;
font-size: 14px;
padding-left: 2px;
color: #D1D5DB;
}

.data div button {


width: 100%;
border: none;
border-radius: 8px;
height: 42px;
margin-top: 10px;
background: #4B5563;
color: #FFFFFF;
font-size: 16px;
font-weight: 600;
transition: background-color 0.2s, transform 0.1s;
}

.data div button:hover {


background-color: #6B7280;
}

/* Transactions Table */
.transactions {
margin: 0;
}

.transactions h2 {
margin-bottom: 15px;
font-size: 24px;
}
.transactions-table-wrapper {
max-height: 450px;
overflow-y: auto;
border: 1px solid #4B5563;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

table {
width: 100%;
border-collapse: collapse;
background: #1F2937;
border-radius: 12px;
overflow: hidden;
}

thead {
background-color: #374151;
}

th,
td {
font-size: 15px;
text-align: left;
padding: 15px 20px;
border-bottom: 1px solid #4B5563;
}

th {
font-size: 15px;
font-weight: 700;
color: #F9FAFB;
}
th:last-child {
text-align: center;
width: 80px;
}

tr:hover {
background-color: #374151;
}
.negative {
color: #F87171;
font-weight: bold;
}

.delete-btn {
background: none;
border: none;
color: #F87171;
cursor: pointer;
font-size: 16px;
padding: 5px;
transition: opacity 0.2s;
}

.delete-btn:hover {
opacity: 0.7;
}

/* Spending Chart */
.spendings {
background-color: #1F2937;
padding: 25px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
border: 1px solid #4B5563;
}
/* Ensures chart area itself doesn't show white background
*/
.chart-wrapper canvas {
background-color: #1F2937;
border-radius: 8px;
}

.spendings h2 {
margin-bottom: 20px;
font-size: 24px;
}
.all {
display: flex;
flex-direction: column;
align-items: center;
}
.legend {
list-style: none;
padding: 0;
margin-top: 20px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.legend li {
font-size: 14px;
color: #D1D5DB;
}
.dot {
height: 10px;
width: 10px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.food { background-color: #4F46E5; }
.travel { background-color: #22C55E; }
.utilities { background-color: #FACC15; }
.entertainment { background-color: #EF4444; }

/* --- NEW FIXES FOR CHART SIZE --- */

.chart-wrapper {
/* Ensures the chart has height to render the donut
shape */
min-height: 250px;
width: 100%;
}

/* Media Queries (Updated) */


@media(max-width:1200px) {
main {
flex-direction: column;
align-items: center;
gap: 20px;
}
.left, .right {
max-width: 800px;
width: 100%;
}
.transactions-table-wrapper {
overflow-x: auto;
}
table {
min-width: 600px;
}
.chart-wrapper {
min-height: 300px;
}
}

@media (max-width: 768px) {


nav h1 {
font-size: 20px;
}
.total {
grid-template-columns: 1fr;
}
.transactions {
padding: 0 10px;
}
.setting-item {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.setting-btn {
width: 100%;
}
.chart-wrapper {
min-height: 250px;
}
}

@media(max-width:620px) {
nav ul {
background: #1F2937;
}
/* FIX: Show the mobile-only link */
.exp {
display: block;
}
}
Login Styles ([Link])
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Inter', sans-serif;
font-size: 16px;
color: #FFFFFF;
background-color: #111827; /* Deep Black/Charcoal
fallback */

/* --- FIX: Updated Background Image Path for Login Page


--- */
background-image: url('assests/[Link]'); /*
CORRECTED PATH */
background-size: cover; /* Cover the entire viewport */
background-position: center; /* Center the image */
background-repeat: no-repeat;
background-attachment: fixed;
}

main{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
padding: 20px;
}

/* Upgraded Card Styling (Lighter Charcoal) */


.main-container{
background-color: rgba(31, 41, 55, 0.9); /* Lighter
Charcoal with slight transparency to let background show */
width: 420px;
padding: 40px 30px;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.main-container h1 {
font-size: 28px;
margin-bottom: 5px;
color: #FFFFFF;
}

.hr{
height: 1px;
width: 100%;
background-color: #4B5563;
margin: 15px 0 25px 0;
}

.form-group{
margin-bottom: 25px;
width: 100%;
max-width: 300px;
display: flex;
flex-direction: column;
justify-content: center;
}

.password-wrapper{
margin-top: 5px;
width: 100%;
display: flex;
align-items: center;
position: relative;
}

/* Clean Input Styling */


input{
border: 1px solid #4B5563;
background-color: #111827;
color: #FFFFFF;
width: 100%;
height: 44px;
border-radius: 8px;
padding-left: 15px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus {
border-color: #9CA3AF;
box-shadow: 0 0 0 1px #4B5563;
}

label {
font-weight: 600;
font-size: 14px;
margin-bottom: 5px;
color: #D1D5DB;
}

button#togglePassword{
border: none;
position: absolute;
right: 10px;
background-color: transparent;
color: #9CA3AF;
cursor: pointer;
}

/* Primary Button Styling */


.btn{
display: flex;
justify-content: center;
margin-top: 15px;
}

.btn button{
border-radius: 8px;
background-color: #4B5563; /* Charcoal Button */
color: #FFFFFF;
width: 120px;
height: 44px;
font-size: 16px;
font-weight: 700;
transition: background-color 0.2s, transform 0.1s;
}

.btn button:hover {
background-color: #6B7280;
}

.signup{
display: flex;
justify-content: end;
margin-top: 10px;
}

.signup a p {
font-size: 14px;
color: #9CA3AF;
text-decoration: none;
}
Global JavaScript ([Link])
// ------------------- Navigation Menu Toggle (Centralized)
-------------------
const ul = [Link]('ul');
const menuIcon = [Link]('.menu-icon');
const logoutBtn = [Link]('logout');

if (menuIcon) {
[Link]('click', () => {
// Toggle visibility directly
if([Link] === "visible"){
[Link] = "hidden";
} else {
[Link] = "visible";
}
});
}

// ------------------- Authentication Check (Security


Upgrade) -------------------
function checkAuthentication() {
// Only run this check on [Link] and [Link]
const path = [Link];
// Check if path includes one of the main app pages
if ([Link]('[Link]') ||
[Link]('[Link]')) {
const isLoggedIn =
[Link]('isLoggedIn');
if (isLoggedIn !== 'true') {
alert("Please log in to access the expense
tracker.");
[Link] = "[Link]";
}
}
}

// ------------------- Logout Logic -------------------


if (logoutBtn) {
[Link]('click', () => {
[Link]('isLoggedIn'); // Clear the
login status
alert("You have been logged out.");
[Link] = "[Link]";
});
}

// Run the authentication check when the page loads


[Link]('load', checkAuthentication);
Dashboard Script ([Link])
// ------------------- FIX: Ensure Chart background is
transparent -------------------
// This makes the canvas background match the parent
container
[Link] = 'transparent';

// ------------------- DOM Elements -------------------


const incomeEl = [Link]('income');
const totalExpenseEl = [Link]('total-
expense');
const remainingBalanceEl = [Link]('reme-
balance');
const transactionsBody =
[Link]('transactionsBody');

// ------------------- Chart Setup -------------------


const ctx =
[Link]('categoryChart').getContext('2d');
const categoryLabels = ['Food', 'Travel', 'Utilities',
'Entertainment'];

const chartData = {
labels: categoryLabels,
datasets: [{
label: 'Expenses',
data: [0, 0, 0, 0],
// These colors remain vibrant to pop against the dark
background
backgroundColor: ['#4F46E5', '#22C55E', '#FACC15',
'#EF4444'],
borderWidth: 1
}]
};

const categoryChart = new Chart(ctx, {


type: 'doughnut',
data: chartData,
options: {
responsive: true,
plugins: {
legend: {
position: 'bottom',
// Set legend text color to white
labels: { color: '#D1D5DB' }
}
},
// Set scale text color to match dark theme
scales: {
x: { ticks: { color: '#D1D5DB' } },
y: { ticks: { color: '#D1D5DB' } }
}
}
});

// ------------------- State -------------------


let expenses = [];
let totalIncome =
parseFloat([Link]('totalIncome')) || 0;

// ------------------- On Page Load -------------------


[Link]('DOMContentLoaded', () => {
loadExpenses();
updateBalances();
updateChartData();
});

function loadExpenses() {
const savedExpenses = [Link]('expenses');
if (savedExpenses) {
expenses = [Link](savedExpenses).map(exp => ({
...exp,
amount: parseFloat([Link]) || 0
}));
[Link] = '';
[Link](addExpenseToTable);
}
}

// ------------------- Core Delete Logic -------------------


[Link] = function(index) {
if (confirm("Are you sure you want to delete this
expense?")) {
[Link](index, 1);

[Link]('expenses',
[Link](expenses));

loadExpenses();
updateBalances();
updateChartData();
}
}

// ------------------- Click Income to Set Monthly Income


-------------------
[Link]('click', () => {
const newIncomeStr = prompt("Enter your monthly income:",
totalIncome || 0);
if (newIncomeStr !== null) {
const newIncome = parseFloat(newIncomeStr);
if (!isNaN(newIncome) && newIncome >= 0) {
totalIncome = newIncome;
[Link]('totalIncome',
[Link](2));
updateBalances();
} else {
alert("Please enter a valid number for income.");
}
}
});

// ------------------- Add Expense Row (Updated for Delete


Button) -------------------
function addExpenseToTable(expense, index) {
const amountNum = parseFloat([Link]) || 0;
const row = [Link]('tr');
[Link] = `
<td>${[Link]}</td>
<td>${[Link]}</td>
<td>${[Link]}</td>
<td class="negative">-$${[Link](2)}</td>
<td>
<button class="delete-btn" onclick="deleteExpense($
{index})">
<i class="fa-solid fa-trash-can"></i>
</button>
</td>
`;
[Link](row);
}

// ------------------- Balance Calculation


-------------------
function updateBalances() {
const totalExpense = [Link]((sum, e) => sum +
(parseFloat([Link]) || 0), 0);
const remaining = totalIncome - totalExpense;

[Link] = `$${[Link](2)}`;
[Link] = `$$
{[Link](2)}`;
[Link] = `$$
{[Link](2)}`;

[Link]('remainingBalance',
[Link](2));
}

// ------------------- Chart Update -------------------


function updateChartData() {
const categorySums = {
Food: 0,
Travel: 0,
Utilities: 0,
Entertainment: 0
};

[Link](exp => {
const amountNum = parseFloat([Link]) || 0;
if ([Link]([Link])) {
categorySums[[Link]] += amountNum;
}
});

[Link][0].data = [Link](cat =>


categorySums[cat]);
[Link]();
}
Expenses Script ([Link])
// ------------------- DOM Elements -------------------
const date = [Link]('date');
const description = [Link]('description');
const category = [Link]('category');
const amount = [Link]('amount');
const addBtn = [Link]('add');

const transactionsBody =
[Link]('transactionsBody');

// Balance Elements for UX improvement


const incomeEl = [Link]('income');
const totalExpenseEl = [Link]('total-
expense');
const remainingBalanceEl = [Link]('reme-
balance');

// ------------------- State -------------------


let expenses = [];
// totalIncome is loaded from localStorage to calculate
balances
let totalIncome =
parseFloat([Link]('totalIncome')) || 0;

[Link]('DOMContentLoaded', () => {
const savedExpenses = [Link]('expenses');
if (savedExpenses) {
// Ensure amounts are parsed as numbers
expenses = [Link](savedExpenses).map(exp => ({
...exp,
amount: parseFloat([Link]) || 0
}));
[Link](addExpenseToTable);
}
// Update balances on load for the UX improvement
section
updateBalances();
});
[Link]('click', () => {
const expeDate = [Link]();
const expeDescription = [Link]();
const expeCategory = [Link]();
const expeAmount = [Link]();

if (!expeDate || !expeDescription || !expeCategory || !


expeAmount) {
alert("Please fill in all fields.");
return;
}

const amountFloat = parseFloat(expeAmount);


if (isNaN(amountFloat) || amountFloat <= 0) {
alert("Please enter a valid amount greater than
zero.");
return;
}

const expense = {
date: expeDate,
description: expeDescription,
category: expeCategory,
// Store as a number with 2 decimal places
amount: [Link](2)
};

[Link](expense);

[Link]('expenses',
[Link](expenses));

addExpenseToTable(expense);
updateBalances(); // Update balances after adding a new
expense

// Clear form
[Link] = "";
[Link] = "";
// [Link] = ""; // Keep category selection for
rapid entry
[Link] = "";
[Link](); // Set focus to description for
next entry
});

// ------------------- Add Expense Row -------------------


function addExpenseToTable(expense) {
const amountNum = parseFloat([Link]) || 0;
const row = [Link]('tr');
[Link] = `
<td>${[Link]}</td>
<td>${[Link]}</td>
<td>${[Link]}</td>
<td class="negative">-$${[Link](2)}</td>
`;
// Prepend the new row to show newest transactions first
[Link](row);
}

// ------------------- Balance Calculation for UX


-------------------
function updateBalances() {
// Recalculate total income as it might have been set on
the Home page
totalIncome =
parseFloat([Link]('totalIncome')) || 0;

const totalExpense = [Link]((sum, e) => sum +


(parseFloat([Link]) || 0), 0);
const remaining = totalIncome - totalExpense;

[Link] = `$${[Link](2)}`;
[Link] = `$$
{[Link](2)}`;
[Link] = `$$
{[Link](2)}`;

[Link]('remainingBalance',
[Link](2));
}
Login Script ([Link])
const emailInput = [Link]('email');
const form = [Link]('loginForm');
const passwordInput = [Link]('password');
const submit = [Link]('submit');
const togglePassword =
[Link]('togglePassword');

[Link]('click', () => {
const isPassword = [Link] === "password";
[Link] = isPassword ? "text" : "password";
// Logic updated for clearer icon switching
[Link] = isPassword
? `<i class="fa-solid fa-eye"></i>` // Show eye when
type is text
: `<i class="fa-solid fa-eye-slash"></i>`; // Show
slashed eye when type is password
});

[Link]('click', (e) => {


[Link]();
const email = [Link]();
const password = [Link]();

if (!email || !password) {
alert("Please fill in all fields.");
return;
}

const data = [Link](`user_${email}`);


if (!data) {
alert("No account found. Please sign up first.");
return;
}

const savedData = [Link](data);


if ([Link] === password) {
alert('Login successful!');
[Link]('isLoggedIn', 'true');
[Link] = "[Link]";
} else {
alert('Incorrect password.');
}
});
Signup Script ([Link])
const emailInput = [Link]('email');
const form = [Link]('loginForm');
const passwordInput = [Link]('password');
const submit = [Link]('submit');
const togglePassword =
[Link]('togglePassword');

[Link]('click',()=>{
const isPassword = [Link] === "password";
[Link] = isPassword ? "text" : "password";
// Logic updated for clearer icon switching
[Link] = isPassword
? `<i class="fa-solid fa-eye"></i>` // Show eye when
type is text
: `<i class="fa-solid fa-eye-slash"></i>`; // Show
slashed eye when type is password
})

[Link]('click',(e)=>{
[Link]()
const email = [Link]();
const password = [Link]();
if(!email || !password){
alert("Please fill in all fields.");
return;
}

// Simple email format validation


if (!/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]
{2,7}$/.test(email)) {
alert("Please enter a valid email address.");
return;
}

// Check if user already exists


if([Link](`user_${email}`)) {
alert("An account with this email already exists.
Please log in.");
return;
}

const userData = {
email,
password,
};

[Link](`user_$
{email}`,[Link](userData));

alert('Account created successfully! You can now log


in.');
[Link] = "[Link]";
[Link]();
});

You might also like