Scribd
Upload
26 views11 pages

Css Micro by Samyak

Uploaded by

dhargaweamardip
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
26 views11 pages

Css Micro by Samyak

Uploaded by

dhargaweamardip
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

GOVERNMENT POLYTECHNIC

SAKOLI

A Micro project Report On

Build A Budgeting Web Page

Subject :- Client Side Scripting


(22519)
Semester :- Fifth / Third Year

Session :- 2024-2025
Submitted by

Roll Enrollment
Sr.no Name No No
Samyak A.
1. Dhargave 11 2200910009
ACKNOWLEDGEMENT

This completed micro project work come as a gift to me after all the effort let
us gone in to it has been a beautiful endeavour only because of the valuable
guidance of over guide and well – wisher.

We wish to extend over the art full gratitude to over guide,

Prof. A.A. BAJPAYEE for his constant guidance encouragement motivation


for every stage of this work made this micro project a success.

Formally we are proud to express our gratitude and respect to each member.
INDEX

SR. TOPIC PAGE


NO. NO.
1. Introduction 2
2. Source Code 3-7
3. Output 8
4. References 9

1 |P a g e
INTRODUCTION

The application serves as a user-friendly tool that allows individuals to input


their financial data, visualize their financial standing, and make informed decisions
based on their budgetary constraints. By providing separate functionalities for
recording income and expenses, the application promotes clarity and organization in
financial management.

Project Overview
The Budgeting Web Page project aims to design and develop a user-friendly web-
based application that enables individuals to effectively manage their finances.
Leveraging Java Swing, a powerful GUI framework, this project seeks to provide an
intuitive and interactive platform for users to track their income and expenses.

Key Features
1. User Authentication:Secure sign-up and login process with password recovery
options.
2. User Dashboard:A comprehensive overview of finances, including income,
expenses, and savings, presented through user-friendly charts and graphs.
3. Budget Creation and Management:Tools for users to set, edit, and delete
budgets across various categories to facilitate better financial planning.

Technology Used
 HTML5: Defines the structure of the web pages, including form elements and
content sections.
 CSS3: Provides styling, including layout, colors, fonts, and responsive design.
Buttons and sections are visually appealing and user-friendly.
 JavaScript: Implements interactive features like dynamically adding, editing,
and deleting entries. It also handles form validation to ensure users input valid
data before submitting.

2 |P a g e
SOURCE CODE

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Budgeting App</title>

<style>

.body{

font-family:Arial,sans-serif;

margin :0;
padding:0;

background-color:#ffffff;

.budget-input{
background-color: #fffffff5;

padding: 20px;

border: none;

border-radius: 4%;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.959);

margin-bottom: 20px;

3 |P a g e
margin-right:50%;

.budget-display{

background-color: #fffbfb;

padding: 20px;

border:none;

border-radius: 7px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.692);

margin-bottom: 20px;

.budget-input input{

width: 50%;

padding:10px;

border: 1 px solid #ddd;


border-radius: 4px;

.budget-input button{

background-color: #000000;
color:#fff;

border:none;

border-radius:4px;

padding: 10px 20px;

cursor: pointer;
4 |P a g e
}

.budget-input h2{

margin-top: 0px;

.budget-input button:hover{

background-color: #3f3d3dd7;

</style>

</head>

<body >

<h1>Budgeting App</h1>

<section class="budget-input">
<h2>Add Income</h2>

<input type="number" id="income" placeholder="Enter Income">

<button onclick="income()">Add Income</button>

</section>

<section class="budget-input">
<h2>Add Expense</h2>

<input type="number" id="expense" placeholder="Enter Expense">

<button onclick="Expense()">Add Expense</button>

</section>

<section class="budget-display">
5 |P a g e
<h2>Budget Summary</h2>

<p>Total Income: $<span id="totalIncome">0</span></p>

<p>Total Expenses: $<span id="totalExpenses">0</span></p>

<p>Balance: $<span id="balance">0</span></p>

<canvas id="chart" width="400" height="200"></canvas>

</section>

<script >

let totalIncome = 0;

let totalExpenses = 0;

function income() {

const incomeInput = document.getElementById('income').value;


const incomeValue = parseFloat(incomeInput);

if (!isNaN(incomeValue) && incomeValue > 0) {

totalIncome = incomeValue+totalIncome;

updateDisplay();

}
///incomeInput.value='';

document.getElementById('income').value='';

function Expense() {
6 |P a g e
const expenseInput = document.getElementById('expense');

const expenseValue = parseFloat(expenseInput.value);

if (!isNaN(expenseValue) && expenseValue > 0) {

totalExpenses = expenseValue+ totalExpenses;

updateDisplay();

//expenseInput.value = '';
document.getElementById('expense').value='';

function updateDisplay() {

document.getElementById('totalIncome').textContent = totalIncome.toFixed(2);

document.getElementById('totalExpenses').textContent =
totalExpenses.toFixed(2);
document.getElementById('balance').textContent = (totalIncome -
totalExpenses).toFixed(2);

</script>

</body>

</html>

7 |P a g e
OUTPUT

8 |P a g e
REFERENCES

 https://www.ilovepdf.com/pdf_to_word
 https://gemini.google.com/app/e25ca4620ab28eaa
 www.youtube.com
 https://www.javatpoint.com/java-tutorial
 https://chatgpt.com/c/6707eb4f-3fa0-8001-8fbc-
a128156a99f2
 https://www.w3schools.com/css/css3_flexbox.asp

9 |P a g e

You might also like