-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
147 lines (127 loc) · 5.17 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>No Money</title>
<meta name="description" content="Calculating how much the gahmen takes away">
<meta name="author" content="Lingyi Hu">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" />
<link rel="stylesheet" href="https://unpkg.com/bulmaswatch/lumen/bulmaswatch.min.css">
<style>
#main {
margin-top: 1em;
max-width: 700px;
margin: 0 auto;
font-family: monospace !important;
}
#result {
margin-top: 1em;
font-size: 1.2em;
}
/* Hide arrows from number input */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
</style>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div id='main'>
<section class="section">
<h1 class="title">Where did all the money go?</h1>
<div class="subtitle">Calculating how much money the gahmen takes from you. <br/><b>NOT AN OFFICIAL SITE. NO GUARANTEES ON CORRECTNESS.</b><br/>
<div class="is-size-6">but if you notice any mistakes, please consider reporting on <a href="https://github.com/lingxz/sg-takehome-pay/" target="_blank">GitHub</a> or through lingyihuu(at)gmail.com.</div>
</div>
<form id="mainform">
<!-- salary -->
<label class="label" id="monthly-label">Salary (monthly) <a id="to-year">switch to yearly view</a></label>
<label class="label" style="display: none" id="yearly-label">Salary (yearly) <a id="to-month">switch to monthly view</a></label>
<input class="input" style="font-family: monospace;" type="number" placeholder="$$$" id='salary' required>
<!-- bonus -->
<label class="label" id="bonus-label">Bonus (yearly)</label>
<input class="input" style="font-family: monospace;" type="number" placeholder="$$$" id='bonus' value="0">
<!-- deductions -->
<label class="label" id="deductions-label">Deductions (yearly)</label>
<input class="input" style="font-family: monospace;" type="number" placeholder="$$$" id='deductions' value="0">
<input style="margin-top: 10px;font-family: monospace" class="button is-primary" type="submit" value="Calculate!">
</form>
<div id="result"></div>
</section>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
crossorigin="anonymous"></script>
<script src="script.js"></script>
<script>
let monthly = false;
$(document).ready(function() {
refreshYearMonthLabels();
$("#to-month").click(function() {
monthly = true;
refreshYearMonthLabels();
});
$("#to-year").click(function() {
monthly = false;
refreshYearMonthLabels();
});
})
function refreshYearMonthLabels() {
if (monthly) {
$("#monthly-label").show();
$("#yearly-label").hide();
} else {
$("#yearly-label").show();
$("#monthly-label").hide();
}
}
$('#mainform').submit(() => {
const input_sal = $('#salary').val();
const input_deductions = $('#deductions').val();
const input_bonus = $('#bonus').val();
var sal = parseInt(input_sal);
const deductions = parseInt(input_deductions);
const bonus = parseInt(input_bonus);
var res;
if (monthly) {
sal = sal * 12;
}
res = getPay({salary: sal, deductions: deductions, additional_wage: bonus})
const formatted = format_res(res);
$("div#result").html(formatted);
return false;
})
function format_res(res) {
return `
<h3 class="title is-2">Yearly take home pay: \$${(res.take_home_post_tax).toFixed(2)} </h3>
Total income: \$${(res.total_income).toFixed(2)}<br/>
Take home (yearly, pre-tax): \$${(res.take_home).toFixed(2)}<br/>
Take home (yearly, post-tax): \$${(res.take_home_post_tax).toFixed(2)}<br/>
Take home (monthly, pre-tax): \$${(res.monthly_take_home).toFixed(2)}<br/>
Bonus take home (pre-tax): \$${(res.bonus_take_home).toFixed(2)}<br/>
Employee CPF contribution: \$${(res.cpf.employee).toFixed(2)} (${res.cpf.explanation})<br/>
Employer CPF contribution: \$${(res.cpf.employer).toFixed(2)}<br/>
Tax payable: \$${(res.tax).toFixed(2)}<br/>
Chargeable income (income - deductions): \$${(res.chargeable_income).toFixed(2)}<br/>
Effective tax rate (tax / total income): ${(res.effective_tax_total_income*100).toFixed(2)}%<br/>
Effective tax rate (tax / chargeable income): ${(res.effective_tax_chargeable_income*100).toFixed(2)}%<br/>
Effective tax + CPF rate ((tax + CPF) / total income): ${(res.effective*100).toFixed(2)}%<br/>
<br/>
You can voluntarily contribute <b>\$${res.cpf.possible_voluntary.toFixed(2)}</b> more to your CPF this year.<br/>
<br/>
<small class="has-text-grey-light">Last updated 26 Dec 2022</small>
`;
}
</script>
</body>
</html>