Skip to content

Commit d4d1cfb

Browse files
honeytunghoneytung
committed
Add IDs and remove test articles
1 parent 37bc498 commit d4d1cfb

File tree

1 file changed

+87
-0
lines changed

1 file changed

+87
-0
lines changed

‎index.html

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>Expense Tracking System</title>
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.1/css/bulma.css" />
7+
<link rel="stylesheet" href="./styles/index.css">
8+
<script src="./scripts/expense.js"></script>
9+
</head>
10+
11+
<body>
12+
13+
<div class="header">
14+
Expense Tracking System
15+
</div>
16+
17+
18+
<div class="body">
19+
<!-- Expense Form -->
20+
<div class="expense-form">
21+
22+
<!-- Name of expense -->
23+
<!-- This field is required -->
24+
<div class="field">
25+
<label class="label">Name</label>
26+
<div class="control">
27+
<input class="input" type="text" placeholder="Name of expense" id="expense-form-name">
28+
</div>
29+
<p class="help is-danger" id="expense-form-alert-name"></p>
30+
</div>
31+
32+
<!-- Category of expense -->
33+
<!-- Default is General -->
34+
<div class="field">
35+
<label class="label">Category</label>
36+
<div class="control">
37+
<div class="select">
38+
<select id="expense-form-category">
39+
<option>General</option>
40+
<option>Applicances</option>
41+
<option>Food</option>
42+
<option>Entertainment</option>
43+
<option>Bills</option>
44+
<option>Other</option>
45+
</select>
46+
</div>
47+
</div>
48+
</div>
49+
50+
<!-- Amount of expense -->
51+
<!-- This field will check is the input is valid number or not. Default is 0.00 -->
52+
<div class="field">
53+
<label class="label">Amount</label>
54+
<div class="control has-icons-left">
55+
<input class="input" type="text" placeholder="Amount of money" id="expense-form-amount">
56+
<span class="icon is-small is-left">$</span>
57+
</div>
58+
<p class="help is-danger" id="expense-form-alert-amount"></p>
59+
</div>
60+
61+
<!-- Description of expense -->
62+
<!-- Optional field for the description -->
63+
<div class="field">
64+
<label class="label">Description</label>
65+
<div class="control">
66+
<textarea class="textarea" placeholder="Description of expense" id="expense-form-description"></textarea>
67+
</div>
68+
</div>
69+
70+
<!-- Submit button of expense -->
71+
<div class="field">
72+
<p class="control">
73+
<button class="button is-success" id="button-add" onclick="addExpense(this)">
74+
Add
75+
</button>
76+
</p>
77+
</div>
78+
</div>
79+
80+
<div class="display-area" id="expense-list">
81+
</div>
82+
</div>
83+
84+
85+
</body>
86+
87+
</html>

0 commit comments

Comments
 (0)