[inverse-tax] / index.html

<!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>
Commit	Line	Data
0993d859 SW	1	<!DOCTYPE html>
	2	<html>
	3	<head>
	4	<script src="tax.js"></script>
d0678fe5	5	<script src="tax_ui.js"></script>
52ca3d7f	6	<!-- Tests are in tax.test.js -->
d0678fe5 SW	7	<style>
	8	td { padding: .5em; vertical-align: top}
	9	textarea { height: 12em; }
	10	input { width: 7em }
7a5e093a SW	11	.output { padding: 1em; background-color: #eee; border: thin solid #888; width: max-content; }
7a5e093a SW	12	.privacy_policy { margin-top: 5em; }
d0678fe5	13	</style>
0993d859	14	</head>
d0678fe5 SW	15	<body onload="calculate()">
d0678fe5 SW	16	<h1>Inverse income tax tool</h1>
151ede0f	17	<p>What before-tax salary is needed to provide a specified after-tax salary?</p>
d0678fe5 SW	18
	19	<form>
	20	<table>
	21	<tr>
	22	<td>
86fe1a72	23	Federal deductible<br/><input id="deductible_1" value="24000" onchange="calculate()" oninput="calculate()"/>
d0678fe5 SW	24	</td>
d0678fe5 SW	25	<td>
86fe1a72	26	State deductible<br/><input id="deductible_2" value="8258" onchange="calculate()" oninput="calculate()"/>
d0678fe5 SW	27	</td>
	28	</tr>
	29	<tr>
	30	<td>
	31	Federal tax table<br/>
86fe1a72	32	<textarea id="tax_table_1" onchange="calculate()" oninput="calculate()"> 0 10
d0678fe5 SW	33	18651 15
	34	75901 25
	35	153101 28
	36	233351 33
	37	416701 35
	38	470001 39.6</textarea>
	39	</td>
	40	<td>
	41	State tax table<br/>
86fe1a72	42	<textarea id="tax_table_2" onchange="calculate()" oninput="calculate()"> 0 1
d0678fe5 SW	43	16030 2
	44	38002 4
	45	59978 6
	46	83258 8
	47	105224 9.3
	48	537500 10.3
	49	644998 11.3
	50	1000000 12.3
	51	1074996 13.3</textarea>
	52	<br/>(Initial table is California's)
	53	</td>
	54	</tr>
	55	<tr>
	56	<td colspan="2">
	57	Desired after-tax salary</br>
	58	<input id="after_tax" value="100000" onchange="calculate()" oninput="calculate()">
	59	</td></tr>
	60	</table>
	61	</form>
	62
7a5e093a SW	63	<p class="output">
	64	<strong><span id="before_tax"></span> before tax</strong>
	65	- <span id="tax_1"></span> federal tax
	66	- <span id="tax_2"></span> state tax
	67	= <span id="after_tax_verification"></span> after tax.
	68	</p>
d0678fe5	69
7a5e093a	70	<p class="privacy_policy">Privacy policy: All calculations are client-side; no figures are sent to any server.</p>
0993d859 SW	71	</body>
0993d859 SW	72	</html>