SIDDAGANGA INSTITUTE OF TECHNOLOGY,
TUMKUR
Activity-Based Learning Activity-1 & 2
(Website Design Activity)
on
ABL-1: FINANCE DASHBOARD
ABL-2: FINANCE DASHBOARD (Front End
& Back End)
Submitted in the partial fulfilment of the requirements for VII Semester
Full Stack Development (OE78)
Submitted by
Aravind S Y 1SI22EC009
Arun Balekai 1SI22EC010
Siddaganga Institute of Technology, Tumkur
(An Autonomous Institute, Affiliated to Visvesvaraya Technological University Belagavi,
Approved by AICTE, New Delhi, Accredited by NAAC and ISO 9001:2015 certified)
B.H. road, Tumkur 572103, Karnataka, India
AY-2024-25
SIDDAGANGA INSTITUTE OF TECHNOLOGY, TUMAKURU - 3
CERTIFICATE
This is to certify that Activity Based Learning Activity1 on “Finance Dashboard” and
Activity2 on “Finance Dashboard” is a bonafide work carried out by Aravind S Y (1S22EC009)
and Arun Balekai (1S22EC010) of VII semester Bachelor of Engineering in Electronics &
Communication Engineering of the SIDDAGANGA INSTITUTE OF TECHNOLOGY during
the academic year 2024-2025.
Signatures of Student Faculty
i) Dr. Pramod T.C
Associate Professor
ii) Dept. of CSE,
SIT, Tumkur
TABLE OF CONTENTS
ABL-1 & 2
[Link] Particulars Page. No
1 INTRODUCTION 04
2 PROJECT CODE 05-06
3 PROJECT OUTPUT 07-08
4 LIST OF HTML TAGS & 09-10
CSS PROPERTIES
INTRODUCTION
Finance Tracker — Smart, Simple, Secure
Finance Tracker is a web-based application built for individuals who want to track their
personal finances effortlessly. It allows users to manage income, expenses, savings, and
investments all in one sleek, easy-to-use dashboard.
Technologies Used:
• HTML5 & CSS3 for responsive, mobile-friendly UI
• JavaScript for frontend logic and interactivity
• PHP backend for authentication and data handling
• Local session-based data for instant feedback
• Clean modular code using functions to handle rendering, summaries, and updates
How It Works:
Login System
• Hardcoded user authentication (can be extended with PHP & database)
• Basic form validation to verify credentials
Dynamic Dashboard
• Dashboard loads only after successful login
• Sections include:
o Overview Cards: Real-time values for expenses, savings, and portfolio
o Transaction Form: Allows adding entries with type, category, and amount
o Expense Breakdown: Auto-categorizes expenses for analysis
o Savings Goal Tracker: Shows progress toward a custom savings goal
o Portfolio Tracker: Add and update assets with current value calculation
Frontend Logic (JavaScript)
• Uses arrays and objects to store transactions and portfolio data
• Calculates totals and percentages on every action
• Updates DOM live using native JS methods like createElement, textContent, and
appendChild
• Resets forms after submission
• Provides feedback for invalid entries
Smart Design Choices:
• Uses flexbox for responsive layout of overview cards
• Lightweight — no external libraries required
• Clean UI with clear sections for different financial aspects
• Modular code to make it easier to integrate a backend or store persistent data later
PROJECT CODE (Important snippets)
HTML code([Link])
Code of database ([Link])
Fig. [Link]
Finance_tracker --
[Link] ← Frontend you will open
[Link] ← Handles login/signup
[Link] ← Styling
for backend:
[Link] ← Database connection
[Link] ← Handles signup logic
[Link] ← For logout
[Link]. ← adding new users
[Link]. ← existing users can be seen
[Link] ← user list
PROJECT OUTPUT (SCREENSHOTS)
Fig. login/sign up page
Fig. frontend interface
Fig. phpMyAdmin database
Fig. Dashboard of existing user
Fig. User list
LIST OF HTML TAGS, CSS PROPERTIES USED
Structure & Layout
• <html> – Root element of the document
• <head> – Metadata container (title, links, meta tags)
• <body> – Main content of the webpage
• <div> – Used extensively for grouping and layout (e.g. #login, #app, .card)
• <section> – Organizes related content blocks (e.g. transactions, savings goal, etc.)
• <header> – Holds the page title and tagline
• <link> - for adding external css and js script
Forms & Inputs
• <form> – For submitting user input (login, transaction, portfolio forms)
• <input> – Text, password, number fields for user data
• <select> – Dropdown for choosing transaction type
• <button> – Triggers actions like login, add transaction, set goal
Text & Headings
• <h1>, <h2>, <h3> – Section and card titles
• <p> – Descriptive text, summary values, messages
Tables & Lists
• <table>, <thead>, <tbody>, <tr>, <td>, <th> – For displaying transaction history
• <ul>, <li> – Expense breakdown and portfolio list
Scripting
• <script> – Contains embedded JavaScript for all interactive behavior
CSS PROPERTIES USED:
Box Model Properties
• margin — spacing outside the element.
• padding — spacing inside the element.
• border — outlines around elements.
• border-radius — rounded corners.
• box-shadow — adds drop shadow to elements.
Typography
• font-family — sets the typeface (e.g., Arial, sans-serif).
• font-size — controls text size (1.5em, 1.1em, etc.).
• font-weight — bold or normal text.
• color — sets text color.
Layout and Sizing
• max-width — limits element’s maximum width.
• width — fixed width (e.g., 95%, 90%, 100%).
• display: flex — for horizontal layout in .overview.
• justify-content — aligns children inside flexbox.
• text-align — centers or aligns text.
• flex — distributes available space in flexbox.
Visual Styling
• background — background color (#f4f7f8, white, #007bff).
• box-shadow — subtle shadow for depth.
• border-collapse — removes spacing between table borders.
• list-style — removes bullet points in lists.
Interactivity
• cursor: pointer — shows hand cursor on hoverable items.
• :hover — modifies styles when hovering (e.g., darkens buttons).
Selectors & Specific Elements
• body, header, form, table, ul, li — element selectors.
• #app, #goal-info, #portfolio-list — ID selectors.
• .card, .login-container, .overview — class selectors.
• form input, form button, table th, table td — nested selectors.
• div:last-child, tr td[colspan] — pseudo and attribute selectors.
