Scribd
Upload
5 views

Documentation

The document describes the code for a personal expense tracker website. It includes HTML, CSS and JavaScript code for pages like login, expenses tracking, incomes tracking and dynamic updating of tables and balances. Key elements described are the login form, header, footer, expense and income tracking forms and tables, functions for adding/updating data, calculating balances and a color changing text element.

Uploaded by

kixeped655
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

Documentation

The document describes the code for a personal expense tracker website. It includes HTML, CSS and JavaScript code for pages like login, expenses tracking, incomes tracking and dynamic updating of tables and balances. Key elements described are the login form, header, footer, expense and income tracking forms and tables, functions for adding/updating data, calculating balances and a color changing text element.

Uploaded by

kixeped655
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Login form

HTML:

Title: Login - Manan's Personal Expense Tracker

CSS:

width: calc(100% - 12px);


ka matlab hai ki element ka width 100% hogi uske parent element ke width ke aur usme se 12
pixels ka width kam kiya jayega

font-size: 2em;

2 em means parent element ke 2 times size hoga

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);


0-horizontal mein effect

4-vertical

8-blur radius

0,0,0,0.1-black colour opacity 1

border-radius: 50%
iski wajah se logo circular hai

Header:
Ek header section jo "Login - Manan's Expense Tracker" ka title dikhaata hai.

Form:

Ek login form jiska title hai "Login".

Username aur password ke liye input fields.

Ek submit button jo form ko submit karne ke liye hai.

Form ko rounded corners, shadows, aur white background ke saath style kiya gaya hai.

Submit button hover par color badalta hai.

Form page ke beech mein center mein hai.

Footer:

Ek footer section jo Manan's Expense Tracker ke liye copyright information dikhata hai.

Footer ko dark background aur white text ke saath style kiya gaya hai.

Ye page ke neeche center mein hai.

JavaScript:

redirect() naam ka ek function define kiya gaya hai.

Ye function login form submit hone par call hota hai.

Ye user ko "personalexpensetracker.html" naam ki page par redirect karta hai window.location.href ka


istemaal karke.

Ye default form submission ka behavior rokne ke liye false return karta hai, taaki redirection ho sake.
About us

Similar to login form

Contact us
Similar to login form but only few links are added which are mine personal as I have not created
for this website.

Personal Expense Tracker: Main Website


Cursor pointer: HTML element par cursor hover hone par pointer icon dikhana hai. (hand finger
aata hai jab ham hover kare).

Position relative: ek element ke position ko relative banati hai uske parent element ke respect
mein. Subscription plain mein list hai vo relative hai subscription plan ke respect mein.

transition: background-color 0.3s, color 0.3s;:Ye CSS property ek element par kisi bhi change ke
transition ko define karta hai. Yahan par background-color aur color ke liye 0.3 seconds ka
transition time set kiya gaya hai, matlab jab koi element hover hoga to uska background-color
aur color 0.3 seconds mein smoothly change hoga. Ye effect user interface ko attractive banane
ke liye istemal kiya jata hai.

z-index: 1;
Z-index property positioned elements ki stacking order ko control karta hai. Jitna index jyada
utni layers vo upar rahega.

Top:100% use kiya hai taaki sub menu exact bottom pe aaye menu ke.

H2:before , use kiya hai taaki bullets ko h2 tags se pehle use kar saku.

Marquee with width 70% is used to get the floating effect.

JavaScript part:

1. Variables Initialization:

expensesData aur incomesData arrays me expenses aur incomes ki data store hoti hai.

2. addExpense(event) Function:

- Ye function tab call hota hai jab expense form submit hota hai.

- isme expense data ham 2 store karva paa rahe hai kyuki ye object hai javascript mein aur
isme multiple data support kiye jaate hai.

- event.preventdefault() use kiya hai taaki page reload na hojaye form submit hone par kyuki
hame multiple entries chahiye incomes and expenses ki.

- Ye form fields se expense category aur amount retrieve karta hai.

- Ye expense data ko expensesData array me add karta hai.

- Ye functions ko call karta hai jo expenses table aur remaining balance ko update karte hain.

3. addIncome(event) Function:

- addExpense(event) function ke jaisa hai lekin income data ke liye.

- Ye income category aur amount ko form fields se retrieve karta hai.

- Ye income data ko incomesData array me add karta hai.


- Ye functions ko call karta hai jo incomes table aur remaining balance ko update karte hain.

4. updateExpensesTable() Function:

- expensesTableBody.innerHTML = ""; ka use kiya hai taaki purana data koi error na de aur
naya table ekdam accurate ho.

- Expenses table ko expensesData array se update karta hai.

-expensesData.forEach(function (expense) { ... });: This loop iterates over each element in the
expensesData array, where each element represents an expense object containing a category
and an amount.

- var row = "<tr><td>" + expense.category + "</td><td>" + expense.amount +


"</td></tr>";

Isme dynamically ek row generate ki baadme td se cell bane baadme un tags ki close kar diya.

expensesTableBody.innerHTML += row;
isse rows ko append kiya.

totalExpense += parseFloat(expense.amount);
isme expense amount ko float mein convert karke total expense mein add kiya.

totalExpenseElement.textContent = totalExpense.toFixed(2);
total expense ko two digit decimal place tak string mein convert kiya display karne ke liye.

- Har expense category aur amount ko ek table row me display karta hai.

- Table ke neeche total expense ko update karta hai.

5. updateIncomesTable() Function:

- updateExpensesTable() jaisa hai lekin incomes table ke liye.

6. getTotalIncome() aur getTotalExpense() Functions:

- Ye functions total income aur total expense ko calculate karte hain incomesData aur
expensesData arrays me amounts ko sum karke.
7. calculateRemainingBalance() Function:

- Remaining balance ko calculate karta hai total income se total expense ko subtract karke.

- Remaining balance ko return karta hai.

8. updateRemainingBalance() Function:

- Page par display ki gayi remaining balance ko update karta hai calculateRemainingBalance()
function ko call karke.

9. Color Changing Text:

- ID changingColorText wale text element ko select karta hai.

- Ek array colors alag-alag rangon ko contain karta hai.

- Har ek second, text ka rang agle rang me change hota hai colors array me.

- 1000 matlab ek second.

In future I will learn database and server side programming and make this project to reality.

Thank You for your patience …

You might also like