-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.htm
76 lines (70 loc) · 3.74 KB
/
index.htm
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<link rel="icon" href="favicon.png" type="image/x-icon">
<script src="index.js" defer></script>
<title>FYLE Internship Challenge</title>
</head>
<body>
<section id="tax-calculator-section">
<form action="" id="tax-calculator-form" onsubmit="" method="post" name="tax-calculator-form">
<div class="tax-calculator-div">
<fieldset>
<label for="grossAnnualIncome"
data-desc="Gross annual income is your total salary in a year before any deductions.">Enter
annual gross income</label>
<div class="fieldContainer">
<input type="text" id="grossAnnualIncome" placeholder="Enter annual gross income"
name="grossAnnualIncome" autocomplete="off">
<span class="errorMessage" role="tooltip" data-validation-rule="Please enter numbers only">
<img src="./errorinfo.svg" alt="svg icon for displaying error message" width="18px">
</span>
</div>
</fieldset>
<fieldset>
<label for="extraIncome"
data-desc="Extra income is income thats generated from any other means. ">Enter extra
income</label>
<div class="fieldContainer">
<input name="extraIncome" type="text" id="extraIncome"
placeholder="Enter extra income from other sources" autocomplete="off">
<span class="errorMessage" role="tooltip" data-validation-rule="Please enter numbers only">
<img src="./errorinfo.svg" alt="svg icon for displaying error message" width="18px">
</span>
</div>
</fieldset>
<fieldset>
<label for="ageGrp" data-desc="
What age group do you fall in?">Enter age group</label>
<select name="ageGrp" id="ageGrp" class="ageGrpField">
<option value="<40"> < 40</option>
<option value=">= 40 and <60"> ≥ 40 & < 60</option>
<option value=">=60"> ≥ 60</option>
</select>
</fieldset>
<fieldset>
<label for="totalApplicableDeduc" data-desc="Enter what you save by knowing tax redemptions">Enter
total applicable deductions</label>
<div class="fieldContainer">
<input name="totalApplicableDeduc" type="text" id="totalApplicableDeduc"
placeholder="Add total applicable deductions" autocomplete="off">
<span class="errorMessage" role="tooltip" data-validation-rule="Please enter numbers only">
<img src="./errorinfo.svg" alt="svg icon for displaying error message" width="18px">
</span>
</div>
</fieldset>
</div>
<input type="submit" id="calculate-tax" class="btn" value="Submit">
<dialog>
<h1 id="dialog-title" class="" >Your overall income will be</h1>
<p id="afterTaxes"></p>
<p id="dialog-follow-title" class="" >after tax deductions</p>
<input id="close-dialog" class="btn" type="button" value="close">
</dialog>
</form>
</section>
</body>
</html>