-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
136 lines (77 loc) · 4.27 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
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/fontawesome.min.css"
integrity="sha512-UuQ/zJlbMVAw/UU8vVBhnI4op+/tFOpQZVT+FormmIEhRSCnJWyHiBbEVgM4Uztsht41f3FzVWgLuwzUqOObKw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/style.css">
<title>Assignment</title>
</head>
<body>
<div class="container">
<div class="wrapper">
<form action="">
<label for="Income" style="width: 66%;">Enter gross annual income <i
class="fa-regular fa-circle-question " id="icon"></i>
<div class="toolbox">
<p>Gross annual income is your total salary in a year before any deductions</p>
</div>
</label>
<div class="input-group"> <input type="text" name="gross-income" id="grossAnnualIncome"
placeholder="Enter gross annual income" required>
<i id="incomeErrorIcon" class=" fa-solid fa-circle-exclamation error-icon"></i>
<span class="tooltip">Enter a valid gross annual income</span>
</div>
<label for="Income" style="width: 48%;">Enter extra income <i class="fa-regular fa-circle-question"></i>
<div class="toolbox">
<p>Additional earnings beyond regular salary, like side jobs or investments</p>
</div>
</label>
<div class="input-group">
<input type="text" name="additional-incom" id="extraIncome"
placeholder="Enter annual income from other sources" required>
<i id="extraIncomeErrorIcon" class=" fa-solid fa-circle-exclamation error-icon"></i>
<span class="tooltip">Enter a valid extra income</span>
</div>
<label for="Income" style="width: 41%;">Enter age group <i class="fa-regular fa-circle-question"></i>
<div class="toolbox">
<p>Your age in numbers</p>
</div>
</label>
<div class="input-group">
<input type="text" name="age" id="age" required>
<i id="ageErrorIcon" class="fa-solid fa-circle-exclamation error-icon"></i>
<span class="tooltip">Enter a valid age</span>
</div>
<label for="Income" style="width: 65%;">Total applicable deductions <i
class="fa-regular fa-circle-question"></i>
<div class="toolbox">
<p>Gross annual income is your total salary in a year before any deductions</p>
</div>
</label>
<div class="input-group">
<input type="text" name="deductions" id="deductions" required>
<i id="deductionsErrorIcon" class=" fa-solid fa-circle-exclamation error-icon"></i>
<span class="tooltip">Enter valid deductions</span>
</div>
<button type="button" id="button" onclick="calculateTax()">Submit</button>
</form>
<div id="myModal" class="modal">
<div class="modal-content">
<h2>Your overall income will be</h2>
<p id="taxResult"></p>
<p id="para">after tax deductions</p>
<button class="close">Close
</div>
</button>
</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>