-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
143 lines (140 loc) · 7.12 KB
/
index.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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expense Manager</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;700&display=swap" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="./assets/stylesheet/style.css">
<!-- Scripts -->
<script src="./js/globals.js" defer></script>
<script src="./js/utils.js" defer></script>
<script src="./js/income-functions.js" defer></script>
<script src="./js/expense-functions.js" defer></script>
<script src="./js/index.js" defer></script>
</head>
<body>
<div class="dark-mode">
<button class="dark-mode-button"><i class="fas fa-moon"></i></button>
</div>
<div class="expense-manager">
<div class="income-expense-wrapper">
<h1>Expense Manager</h1>
<div class="income-expense-container">
<div class="income-expense-toggle">
<button class="btn-toggle income-toggler" id="income-toggle">Income</button>
<button class="btn-toggle expense-toggler" id="expense-toggle">Expense</button>
</div>
<div class="income-form">
<form action="#">
<div class="form-group">
<label for="income-category">Income Category</label>
<select name="income-category" class="income-category" id="income-category">
<option value="miscellanous">Select Option</option>
<option value="salary">Salary</option>
<option value="deposit">Deposit</option>
<option value="purse">Purse</option>
<option value="dividend">Dividend</option>
<option value="savings">Savings</option>
</select>
</div>
<div class="form-group">
<label for="income-source">Income Source</label>
<input type="text" class="income-source" id="income-source" placeholder="Source">
</div>
<div class="form-group">
<label for="income-amount">Income Amount</label>
<input type="number" class="income-amount" id="income-amount" placeholder="Amount">
</div>
<div class="button">
<button type="submit" class="btn-income btn-save btn">Save</button>
</div>
</form>
</div>
<div class="expense-form">
<form action="#">
<div class="form-group">
<label for="expense-category">Expense Category</label>
<select name="expense-category" class="expense-category" id="expense-category">
<option value="miscellanous">Select Option</option>
<option value="general">General</option>
<option value="travel">Travel</option>
<option value="bills">Bills</option>
<option value="charity">Charity</option>
<option value="clothes">Clothes</option>
<!-- <option value="drinking">Drinking</option> -->
<option value="education">Education</option>
<option value="electronics">Electronics</option>
<option value="food">Food</option>
<option value="fuel">Fuel</option>
<option value="general" selected>General</option>
<option value="gift">Gift</option>
<option value="health">Health</option>
<option value="shopping">Shopping</option>
<!-- <option value="smoking" selected>Smoking</option> -->
<option value="recurring deposit">Recurring Deposit</option>
</select>
</div>
<div class="form-group">
<label for="expense-source">Expense Source</label>
<input type="text" class="expense-source" id="expense-source" placeholder="Source">
</div>
<div class="form-group">
<label for="expense-amount">Expense Amount</label>
<input type="number" class="expense-amount" id="expense-amount" placeholder="Amount">
</div>
<div class="button">
<button type="submit" class="btn-expense btn-save btn">Save</button>
</div>
</form>
</div>
</div>
<h2 class="balance-display"></h2>
<div class="note">
<span class="note-span">*</span> For editing the Income summary or Expense summary, please double click on the thing you want to edit. Also after editing press Enter to save.
</div>
</div>
<div class="summary-container">
<div class="income-summary">
<table class="income-table">
<caption>Income Summary</caption>
<thead>
<tr>
<th>Date</th>
<th>Category</th>
<th>Source</th>
<th>Amount</th>
<th>Delete</th>
</tr>
</thead>
<tbody class="income-tbody">
</tbody>
</table>
</div>
<div class="expense-summary">
<table class="expense-table">
<caption>Expense Summary</caption>
<thead>
<tr>
<th>Date</th>
<th>Category</th>
<th>Source</th>
<th>Amount</th>
<th>Delete</th>
</tr>
</thead>
<tbody class="expense-tbody">
</tbody>
</table>
</div>
</div>
</div>
<footer>
© <a target="_blank" href="https://raghurambachu.github.io">Raghuram</a> <strong><a target="_blank" href="https://altcampus.io">(Altcampus)</a></strong>
</footer>
</body>
</html>