<!DOCTYPE html>
<html>
<head>
<script src="tax.js"></script>
<script src="tax_ui.js"></script>
<!-- Tests are in tax.test.js -->
<style>
td { padding: .5em; vertical-align: top}
textarea { height: 12em; }
input { width: 7em }
.output { padding: 1em; background-color: #eee; border: thin solid #888; width: max-content; }
.privacy_policy { margin-top: 5em; }
</style>
</head>
<body onload="calculate()">
<h1>Inverse income tax tool</h1>
<p>What before-tax salary is needed to provide a specified after-tax salary?</p>
<form>
<table>
<tr>
<td>
Federal deductible<br/><input id="deductible_1" value="24000" onchange="calculate()" oninput="calculate()"/>
</td>
<td>
State deductible<br/><input id="deductible_2" value="8258" onchange="calculate()" oninput="calculate()"/>
</td>
</tr>
<tr>
<td>
Federal tax table<br/>
<textarea id="tax_table_1" onchange="calculate()" oninput="calculate()"> 0 10
18651 15
75901 25
153101 28
233351 33
416701 35
470001 39.6</textarea>
</td>
<td>
State tax table<br/>
<textarea id="tax_table_2" onchange="calculate()" oninput="calculate()"> 0 1
16030 2
38002 4
59978 6
83258 8
105224 9.3
537500 10.3
644998 11.3
1000000 12.3
1074996 13.3</textarea>
<br/>(Initial table is California's)
</td>
</tr>
<tr>
<td colspan="2">
Desired after-tax salary</br>
<input id="after_tax" value="100000" onchange="calculate()" oninput="calculate()">
</td></tr>
</table>
</form>
<p class="output">
<strong><span id="before_tax"></span> before tax</strong>
- <span id="tax_1"></span> federal tax
- <span id="tax_2"></span> state tax
= <span id="after_tax_verification"></span> after tax.
</p>
<p class="privacy_policy">Privacy policy: All calculations are client-side; no figures are sent to any server.</p>
</body>
</html>