-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathbudget-Buddy.html
120 lines (99 loc) · 5.81 KB
/
budget-Buddy.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Budget Buddy</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="headercss.css">
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
</head>
<body>
<header>
<nav style="background-color: rgba(233, 233, 241, 0.643); padding-top: 0%;" class="navbar navbar-expand-lg custom-navbar fixed-top">
<div class="nav-container">
<a class="navbar-brand custom-logo" href="index.html">
<img src="image/logo.jpeg" alt="logo">
</a>
<button class="navbar-toggler custom-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#customNavbarNavDropdown" aria-controls="customNavbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon custom-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse custom-navbar-collapse" id="customNavbarNavDropdown">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 custom-nav">
<li class="nav-item custom-nav-item">
<a class="nav-link custom-nav-link" href="index.html">Dashboard</a>
</li>
<li class="nav-item custom-nav-item">
<a class="nav-link custom-nav-link" href="about-us.html">About us</a>
</li>
<li class="nav-item custom-nav-item">
<a class="nav-link custom-nav-link" href="contact-us.html">Contact us</a>
</li>
<li class="nav-item custom-nav-item">
<a class="nav-link custom-nav-link" href="loan-tracker.html">Calculate Loan Interest</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="custom-progress-container">
<div class="custom-progress-bar" id="myBar"></div>
</div>
</header>
<div style="margin-top: 110px;" class="container-budgets">
<h1>Budget Buddy</h1>
<div class="form">
<label for="transaction-name">Transaction Name:</label>
<input type="text" id="transaction-name" placeholder="Enter transaction name">
<br>
<label for="transaction-amount">Amount:</label>
<input type="number" id="transaction-amount" placeholder="Enter amount">
<label for="transaction-type">Type:</label>
<select id="transaction-type">
<option value="income">Income</option>
<option value="expense">Expense</option>
</select>
<button id="add-transaction">Add Transaction</button>
</div>
<div class="summary">
<div id="total-income">Total Income: ₹0</div>
<div id="total-expenses">Total Expenses: ₹0</div>
<div id="net-balance">Net Balance: ₹0</div>
</div>
<ul id="transaction-list">
<li class="transaction">
<span class="transaction-name">Example Transaction</span>
<span class="transaction-amount">₹100</span>
<span class="transaction-type">Income</span>
</li>
</ul>
<div>
<h2>How to Use the Budget Buddy</h2>
<p>To use the Budget Buddy, enter the name of your transaction in the 'Transaction Name' field. Then, input the amount in the 'Amount' field and select whether it is an income or an expense from the 'Type' dropdown menu. Finally, click the 'Add Transaction' button to add the transaction to your list.</p>
<h2>About the Budget Buddy</h2>
<p>This Budget Buddy helps you keep track of your income and expenses. It calculates the total income, total expenses, and net balance automatically as you add transactions. Use this tool to manage your finances effectively.</p>
<h2>Frequently Asked Questions</h2>
<ul>
<li><strong>Can I edit or delete a transaction?</strong> Currently, this feature is not available, but you can refresh the page to clear all transactions.</li>
<li><strong>Is the data saved when I close the browser?</strong> No, the data is not saved. All transactions will be lost when you close or refresh the page.</li>
</ul>
</div>
<section class="about">
<h2>About</h2>
<p>This project is made by Jaipratap Raj and Aditi Arya. It helps you calculate the EMI for your loan with ease and precision.</p>
</section>
<div class="contact-info">
<h2>Contact Us</h2>
<p>If you have any questions or feedback, please contact us at:</p>
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
<p>Phone: 9661522858</p>
</div>
</div>
<a href="login.html" class="track-button" style="margin-bottom: 5cap; margin-top: 3cap;">Log out</a>
<script type="module" src="script.js"></script></body>
</html>