Styles.
css
Universal Selector (*)
*{
margin: 0;
padding: 0;
box-sizing: border-box;
• Purpose: Yeh rule har element par apply hota hai.
• margin: 0 aur padding: 0 se default margin aur padding hata diye jaate hain, taaki har
browser mein same layout mile.
• box-sizing: border-box ka matlab hai ki padding aur border ko element ke total width aur
height mein count kiya jaayega.
Body Styling
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(to right, #4facfe, #00f2fe);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
• Purpose: Yeh body element ka style hai.
• font-family: 'Arial', sans-serif se page ka font Arial set hota hai.
• background: linear-gradient(to right, #4facfe, #00f2fe) se page ka background ek blue-to-
cyan gradient ho jata hai.
• height: 100vh ka matlab hai ki body ka height viewport (screen) ke height ke barabar ho.
• display: flex; justify-content: center; align-items: center; se content ko vertically aur
horizontally center kiya jata hai.
Container Class (.container)
.container {
display: flex;
justify-content: center;
align-items: center;
• Purpose: Yeh class container ke andar content ko center karne ke liye hai.
• Flexbox ka use karke content ko center kiya gaya hai.
Login & Dashboard Boxes (.login-box, .dashboard-box)
.login-box, .dashboard-box {
background: rgba(255, 255, 255, 0.9);
padding: 40px;
border-radius: 10px;
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);
text-align: center;
• Purpose: Login aur dashboard box ke liye styling.
• background: rgba(255, 255, 255, 0.9) se box ka background halka white hota hai.
• padding: 40px se box ke andar ka space increase hota hai.
• border-radius: 10px se box ke kone round ho jaate hain.
• box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5) se shadow add hota hai, jisse box utha hua lagta
hai.
• text-align: center se box ke andar ka text center mein hota hai.
Header Styling (h1)
.login-box h1, .dashboard-box h1 {
margin-bottom: 20px;
color: #333;
• Purpose: Login aur dashboard ke heading (h1) ka style.
• margin-bottom: 20px se heading ke neeche thoda space hota hai.
• color: #333 se heading ka color dark gray hota hai.
Input Field Styling (.textbox input)
css
Copy code
.textbox input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
• Purpose: Input fields ko style karta hai.
• width: 100% se input field poori width occupy karta hai.
• padding: 10px se input ke andar thoda space hota hai.
• border: 1px solid #ddd se input ka border light gray hota hai.
• border-radius: 5px se input ke kone rounded hote hain.
• font-size: 16px se input text ka size increase hota hai.
Focused Input Field Styling (.textbox input:focus)
.textbox input:focus {
border-color: #4facfe;
outline: none;
• Purpose: Jab input field pe click kiya jata hai (focus hota hai), tab uska style change hota hai.
• border-color: #4facfe se border ka color blue ho jata hai jab input focus hota hai.
• outline: none se default focus outline hata diya jata hai.
Button Styling (.btn)
css
Copy code
.btn {
width: 100%;
background: #4facfe;
border: none;
padding: 10px;
border-radius: 5px;
color: white;
font-size: 16px;
cursor: pointer;
transition: background 0.3s ease;
• Purpose: Button ko style karta hai.
• width: 100% se button poori width occupy karta hai.
• background: #4facfe se button ka background blue hota hai.
• border: none se button ka default border hata diya jata hai.
• padding: 10px se button ke andar ka space badhta hai.
• border-radius: 5px se button ke kone rounded hote hain.
• color: white se button ka text white hota hai.
• font-size: 16px se text ka size set hota hai.
• cursor: pointer se jab button par hover karte hain to cursor hand pointer ban jata hai.
• transition: background 0.3s ease se button ka background smoothly change hota hai jab
mouse hover karta hai.
Button Hover Effect (.btn:hover)
css
Copy code
.btn:hover {
background: #00f2fe;
• Purpose: Jab button par hover kiya jata hai, tab button ka background light cyan ho jata hai.
Table Styling (table)
table {
width: 100%;
margin-top: 20px;
border-collapse: collapse;
text-align: left;
• Purpose: Table ko style karta hai.
• width: 100% se table poori width occupy karta hai.
• margin-top: 20px se table ke upar thoda space hota hai.
• border-collapse: collapse se table ki borders ko merge karke clean look milta hai.
• text-align: left se table ka text left-aligned hota hai.
Table Header and Cell Styling (table th, table td)
table th, table td {
padding: 10px;
border: 1px solid #ddd;
• Purpose: Table header (th) aur data cells (td) ko style karta hai.
• padding: 10px se cells ke andar space hota hai.
• border: 1px solid #ddd se light gray border add hota hai.
Table Header Background Color (table th)
table th {
background-color: #4facfe;
color: white;
• Purpose: Table ke headers ka style set karta hai.
• background-color: #4facfe se header ka background blue ho jata hai.
• color: white se header text white ho jata hai.
Alternating Row Color (table tr:nth-child(even))
table tr:nth-child(even) {
background-color: #f2f2f2;
• Purpose: Even-numbered rows ko light gray background deti hai taaki table readable ho.
Table Row Hover Effect (table tr:hover)
css
Copy code
table tr:hover {
background-color: #ddd;
• Purpose: Jab table row par hover kiya jata hai, tab row ka background color light gray ho jata
hai.
Summary
• Yeh CSS ek clean aur modern login ya dashboard page ke liye hai.
• Ismein flexbox ka use karke content ko center kiya gaya hai, aur gradient backgrounds,
shadows, aur transitions ka use karke visually appealing design banaya gaya hai.
• Forms, buttons aur table ke liye bhi styles diye gaye hain jo user experience ko enhance karte
hain, jaise hover effects aur alternating row colors.
Script.js
Code Overview:
Yeh code ek expense tracker banane ke liye likha gaya hai. Isme ek form hai jisme user apne
expenses daal sakte hain, aur har expense ko ek table mein show kiya jata hai. Table ke har row mein
ek "Delete" button bhi hota hai, jise click karne par expense delete ho jata hai aur total expenses
update ho jate hain.
Code Explanation:
1. Variable Declaration:
let totalExpenses = 0; // Variable to keep track of total expenses
o Purpose: totalExpenses ek variable hai jisme total expenses ka amount rakha jayega.
Shuru mein yeh 0 set kiya gaya hai.
2. Form Submit Event Listener:
document.getElementById('expenseForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the form from submitting
o Purpose: Jab user form submit karega, tab yeh function trigger hoga.
event.preventDefault() se form ka default submission process prevent kiya jata hai,
taaki page reload na ho aur hum apne calculation par kaam kar sakein.
3. Get Input Field Values:
const expenseName = document.getElementById('expenseName').value;
const expenseAmount = parseFloat(document.getElementById('expenseAmount').value); // Convert
to float
o Purpose: expenseName aur expenseAmount ko form ke input fields se liya jata hai.
expenseAmount ko parseFloat use karke decimal number (float) mein convert kiya
jata hai.
4. Create a New Row in the Table:
const table = document.getElementById('expenseTable').getElementsByTagName('tbody')[0];
const newRow = table.insertRow();
o Purpose: Table ko get kiya jata hai aur uske tbody mein ek new row insert ki jati hai
jahan user ka expense display hoga.
5. Insert Cells for Expense Name, Amount, and Action:
const nameCell = newRow.insertCell(0);
const amountCell = newRow.insertCell(1);
const actionCell = newRow.insertCell(2);
nameCell.textContent = expenseName;
amountCell.textContent = expenseAmount.toFixed(2); // Format to 2 decimal places
o Purpose: Har row mein 3 cells insert kiye jaate hain:
▪ nameCell: Jo expense ka naam hai.
▪ amountCell: Jo expense ki amount hai (yeh 2 decimal places ke saath format
hoti hai).
▪ actionCell: Yahan ek "Delete" button add kiya jayega jo expense ko delete
karega.
6. Update Total Expenses:
totalExpenses += expenseAmount;
updateTotalDisplay();
o Purpose: Har baar jab user expense add karega, totalExpenses ko update kiya jayega
aur updateTotalDisplay() function ko call kiya jayega taaki total display update ho
sake.
7. Create and Add Delete Button:
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.className = 'btn';
deleteButton.onclick = function() {
table.deleteRow(newRow.rowIndex - 1); // Remove the row
totalExpenses -= expenseAmount; // Subtract the amount from total
updateTotalDisplay(); // Update the total display
};
actionCell.appendChild(deleteButton);
o Purpose: Har row mein ek "Delete" button create kiya jata hai. Jab user yeh button
click karega:
▪ Us row ko table se delete kar diya jayega
(table.deleteRow(newRow.rowIndex - 1)).
▪ Jo expense amount tha, usse totalExpenses se subtract kar diya jayega.
▪ Phir se total expenses ko update kiya jayega.
8. Clear Input Fields:
document.getElementById('expenseName').value = '';
document.getElementById('expenseAmount').value = '';
o Purpose: Jab ek expense add ho jata hai, to input fields ko clear kar diya jata hai taaki
user next expense daal sake.
9. Update Total Expenses Display:
function updateTotalDisplay() {
const totalDisplay = document.getElementById('totalExpenses');
totalDisplay.innerHTML = `<strong>Total Expenses: ₹${totalExpenses.toFixed(2)}</strong>`;
o Purpose: Yeh function totalExpenses ko display karta hai. Jab total expenses update
hote hain, yeh function call hota hai aur total amount ko 2 decimal places ke saath
show karta hai.
Summary:
• Form Submission: Jab user form submit karta hai, expense ka naam aur amount table mein
dikhaya jata hai.
• Row Creation: Expense name aur amount ko ek nayi row mein insert kiya jata hai.
• Total Update: Har expense ke baad total expenses ko update kiya jata hai.
• Delete Functionality: Har row mein ek "Delete" button hota hai jo row ko delete karne aur
total expenses ko update karne ka kaam karta hai.
• Clear Input Fields: Form submit karne ke baad input fields ko reset kar diya jata hai.
Is code ka main kaam hai ek simple expense tracker banane ka jahan users apne daily expenses add
kar sakte hain aur easily unhe delete bhi kar sakte hain.
Dashboard.html
Yeh code ek Expense Tracker Dashboard banane ke liye likha gaya hai. Ismein ek form diya gaya hai
jisme user apne expenses (naam aur amount) daal sakte hain, aur expenses ko ek table mein display
kiya jata hai. Saath hi, total expenses ko bhi track kiya jata hai
1. HTML Structure:
a) <html lang="en">
<html lang="en">
• Purpose: Yeh HTML document ka root element hai, jisme lang="en" ka matlab hai ki content
English mein hai.
b) Head Section (<head>):
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expense Tracker Dashboard</title>
<link rel="stylesheet" href="styles.css">
</head>
• <meta charset="UTF-8">: Yeh tag document ka character encoding set karta hai. UTF-8 ka
matlab hai ki yeh document har type ke characters ko support karega.
• <meta name="viewport" content="width=device-width, initial-scale=1.0">: Yeh tag mobile-
friendly design ke liye hai. width=device-width ka matlab hai ki page ka width device ke
screen ke width ke barabar ho, aur initial-scale=1.0 se zoom level ko default set kiya jata hai.
• <title>Expense Tracker Dashboard</title>: Yeh page ka title hai, jo browser ke tab mein
dikhai deta hai.
• <link rel="stylesheet" href="styles.css">: Yeh external CSS file ko link karta hai jisme page ke
design (styling) ka code hoga.
c) Body Section (<body>):
<body>
<div class="container">
<div class="dashboard-box">
<h1>Expense Tracker</h1>
• <body>: Yeh body section hai jisme saara visible content rakha gaya hai.
• <div class="container">: Yeh ek container div hai jo dashboard ko center mein place karta
hai.
• <div class="dashboard-box">: Yeh ek box div hai jisme expense tracker ka main content hai.
d) Expense Tracker Form:
<form id="expenseForm">
<input type="text" id="expenseName" placeholder="Expense Name" required>
<input type="number" id="expenseAmount" placeholder="Amount in INR" required>
<button type="submit" class="btn">Add Expense</button>
</form>
• <form id="expenseForm">: Yeh form hai jisme user expense ka naam aur amount input
karega.
• <input type="text" id="expenseName" placeholder="Expense Name" required>: Yeh text
input field hai jisme user expense ka naam dal sakta hai. required ka matlab hai ki yeh field
empty nahi chhodi ja sakti.
• <input type="number" id="expenseAmount" placeholder="Amount in INR" required>: Yeh
number input field hai jisme user expense ka amount INR mein daalega.
• <button type="submit" class="btn">Add Expense</button>: Yeh button hai jo form ko
submit karega aur expense ko table mein add karega. class="btn" se button ka style apply
hota hai.
e) Expense Table:
<table id="expenseTable">
<thead>
<tr>
<th>Expense Name</th>
<th>Amount (INR)</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<!-- Expenses will be added here -->
</tbody>
</table>
• <table id="expenseTable">: Yeh table hai jisme user ke expenses list honge.
• <thead>: Yeh table ka header section hai jisme columns ke names diye gaye hain: "Expense
Name", "Amount (INR)", aur "Actions".
• <tbody>: Yeh table ka body hai jisme dynamically user ke expenses add kiye jayenge.
f) Total Expenses Display:
<div id="totalExpenses">
<strong>Total Expenses: ₹0.00</strong>
</div>
• <div id="totalExpenses">: Yeh div element hai jisme total expenses ko show kiya jayega.
• <strong>Total Expenses: ₹0.00</strong>: Yeh default text hai jo initially ₹0.00 dikhata hai.
Jaise-jaise expenses add honge, yeh value update hogi.
g) JavaScript File:
<script src="script.js"></script>
• <script src="script.js">: Yeh external JavaScript file ko link karta hai, jisme logic hai jo user
input ko handle karega aur table ko update karega.
Summary:
Yeh code ek Expense Tracker Dashboard ka basic structure create karta hai, jisme:
1. Form: User apna expense name aur amount input karta hai.
2. Table: Yeh expenses ko ek table mein dikhata hai.
3. Total Expenses: Saare expenses ka total track kiya jata hai aur display hota hai.
Isme styles.css file se styling apply hoti hai aur script.js file mein logic likha gaya hai jo expenses ko
add aur delete karta hai, aur total expenses ko update karta hai.
Flow:
• User expense form fill karke submit karega.
• Form ka data table mein ek new row banake add kiya jayega.
• Total expenses ka calculation update hoga aur display ho jayega.
Index.html
Yeh code ek Wallet Login Page banane ke liye likha gaya hai. Isme ek form diya gaya hai jisme user
apna username aur password daal sakta hai, aur agar details correct hain, to user ko dashboard
page par redirect kiya jata hai
1. HTML Structure:
a) <html lang="en">
html
Copy code
<html lang="en">
• Purpose: Yeh HTML document ka root tag hai, jisme lang="en" ka matlab hai ki document ki
language English hai.
b) Head Section (<head>):
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wallet Login</title>
<link rel="stylesheet" href="styles.css">
</head>
• <meta charset="UTF-8">: Yeh tag document ke character encoding ko define karta hai. UTF-8
ka matlab hai ki yeh document sabhi characters ko properly display karega.
• <meta name="viewport" content="width=device-width, initial-scale=1.0">: Yeh tag
responsive design ke liye hai. Isse mobile devices pe page ka size sahi tarah se adjust ho jata
hai.
• <title>Wallet Login</title>: Yeh page ka title hai, jo browser ke tab mein dikhai deta hai. Is
case mein "Wallet Login".
• <link rel="stylesheet" href="styles.css">: Yeh external CSS file ko link karta hai, jo page ki
styling define karegi.
c) Body Section (<body>):
<body>
<div class="container">
<div class="login-box">
<h1>Wallet</h1>
• <body>: Yeh body section hai jisme page ka visible content hoga.
• <div class="container">: Yeh ek container div hai jo login box ko center mein place karta hai.
• <div class="login-box">: Yeh div element hai jisme login form ka actual content (username,
password, button) rakha gaya hai.
d) Login Form:
<form id="loginForm">
<div class="textbox">
<input type="text" placeholder="Username" required>
</div>
<div class="textbox">
<input type="password" placeholder="Password" required>
</div>
<button type="submit" class="btn">Login</button>
<p class="signup">Don't have an account? <a href="#">Sign up</a></p>
</form>
• <form id="loginForm">: Yeh form element hai jisme login details submit ki jayengi. Iska
id="loginForm" hai, jo JavaScript ke through usse target karne mein madad karta hai.
• <div class="textbox">: Yeh div element har input field ko wrap karta hai. Isme ek input field
hota hai, pehla username ke liye aur doosra password ke liye.
o <input type="text" placeholder="Username" required>: Yeh text field hai jisme user
apna username daalega. required attribute ka matlab hai ki yeh field empty nahi
chhodi ja sakti.
o <input type="password" placeholder="Password" required>: Yeh password field hai
jisme user apna password daalega. Isme text ko hide kiya jata hai, aur required ka
matlab hai ki yeh bhi mandatory hai.
• <button type="submit" class="btn">Login</button>: Yeh button hai jo form ko submit
karega. type="submit" ka matlab hai ki form ko submit karte waqt, yeh button kaam karega.
• <p class="signup">Don't have an account? <a href="#">Sign up</a></p>: Yeh paragraph hai
jisme ek link diya gaya hai jo "Sign up" page pe redirect karega agar user ke paas account
nahi hai.
e) JavaScript:
<script>
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault();
window.location.href = 'dashboard.html'; // Redirect to dashboard on login
});
</script>
• <script>: Yeh tag JavaScript code ko include karta hai, jo login functionality ko handle karega.
• document.getElementById('loginForm').addEventListener('submit', function(event) {...}):
Yeh event listener form ke submit hone par trigger hota hai. Jab user "Login" button press
karega, yeh function run hoga.
• event.preventDefault();: Yeh method form ka default action (page reload ya submit) rokta
hai. Matlab, page reload nahi hoga jab user form submit karega.
• window.location.href = 'dashboard.html';: Yeh line user ko dashboard.html page pe redirect
kar deti hai jab login successful hota hai.
Summary:
Yeh ek simple Login Page hai jisme user ko username aur password enter karna hota hai. Jab user
login karega, to JavaScript ke through page ko dashboard.html pe redirect kiya jayega.
Flow:
1. User username aur password dalta hai.
2. Jab user Login button press karega, to form submit hoga aur JavaScript code trigger hoga.
3. event.preventDefault(); se page reload nahi hota, aur user ko dashboard.html page pe
redirect kiya jata hai.
Is page ka design simple hai aur user ko Login karne ki basic functionality provide karta hai.
