-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
152 lines (118 loc) · 5 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
144
145
146
147
148
149
150
151
152
<html>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<title>
Pay Checker
</title>
<body id='body'>
<div class="container" style="width: 50%; margin-top: 2rem;">
<div class="tabs is-centered is-boxed">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fa fa-euro-sign" aria-hidden="true"></i></span>
<span>Pay Checker</span>
</a>
</li>
<li>
<a href="articleSplit.html">
<span class="icon is-small"><i class="fa fa-cut" aria-hidden="true"></i></span>
<span>Article Format</span>
</a>
</li>
</ul>
</div>
</div>
<div class="container" id="main-container">
<div class="card" id="card">
<div class="card-content" id="card-content">
<div class="content">
<strong>PAY CHECKER </strong><img src="img/money.svg" id="money-icon">
</div>
</div>
<div class="container" id="form-container">
<div class="field">
<p><strong>Hourly Rate</strong></p>
<div class="control">
<input class="input" type="text" placeholder="Hourly Rate" id="hourly-rate">
</div>
</div>
<div class="field">
<p><strong>4 Hour Shifts:</strong></p>
<div class="control">
<input class="input" type="text" placeholder="4 Hour Shifts" id="four-hours">
</div>
</div>
<div class="field">
<p><strong>6 Hour Shifts:</strong></p>
<div class="control">
<input class="input" type="text" placeholder="6 Hour Shifts" id="six-hours">
</div>
</div>
<div class="field">
<p><strong>9 Hour Shifts:</strong></p>
<div class="control">
<input class="input" type="text" placeholder="9 Hour Shifts" id="nine-hours">
</div>
</div>
<div class="container" id="button-container">
<button class="button is-link" id="button">Calculate</button>
</div>
<div class="container" id="gross-pay-container">
</div>
</div>
</div>
</div>
</body>
<script>
let button = document.getElementById('button')
button.addEventListener("click", function()
{
let pay = getPay()
let res = document.getElementById("result")
if (res == null){
changeFormat(pay)
}
})
function getPay()
{
let hourly_rate = parseFloat(document.getElementById('hourly-rate').value)
let fours = parseInt(document.getElementById('four-hours').value)
let sixes = parseInt(document.getElementById('six-hours').value)
let nines = parseInt(document.getElementById('nine-hours').value)
if(Number.isNaN(fours))
{
fours = 0
}
else if(Number.isNaN(sixes))
{
sixes = 0
}
else if(Number.isNaN(nines))
{
nines = 0
}
let four_pay = (fours * 4) * hourly_rate
let six_pay = (sixes * 6) * hourly_rate
let nine_pay = (nines * 8) * hourly_rate
let gross_pay = four_pay + six_pay + nine_pay
return gross_pay.toFixed(2)
}
function changeFormat(pay)
{
let card = document.getElementById('card')
card.style = "height: 35rem"
let result = document.getElementById('gross-pay-container')
let text = document.createElement("p")
text.id = "result"
text.innerHTML = "Approximate Gross Pay: "
text.style = "font-weight: bold; font-style: italic"
result.appendChild(text)
let text2 = document.createElement("p")
text2.id = "pay"
text2.innerHTML = ("€" + pay)
result.appendChild(text2)
}
</script>
</html>