git.scottworley.com Git - inverse-tax/blob - index.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="tax.js"></script>
   5 <script src="tax_ui.js"></script>
   6 <!-- Tests are in tax.test.js -->
   7 <style>
   8   td { padding: .5em; vertical-align: top}
   9   textarea { height: 12em; }
  10   input { width: 7em }
  11   .output { padding: 1em; background-color: #eee; border: thin solid #888; width: max-content;  }
  12   .privacy_policy { margin-top: 5em; }
  13 </style>
  14 </head>
  15 <body onload="calculate()">
  16 <h1>Inverse income tax tool</h1>
  17 <p>What before-tax salary is needed to provide a specified after-tax salary?</p>
  18
  19 <form>
  20 <table>
  21 <tr>
  22 <td>
  23 Federal deductible<br/><input id="deductible_1" value="24000" onchange="calculate()" oninput="calculate()"/>
  24 </td>
  25 <td>
  26 State deductible<br/><input id="deductible_2" value="8258" onchange="calculate()" oninput="calculate()"/>
  27 </td>
  28 </tr>
  29 <tr>
  30 <td>
  31 Federal tax table<br/>
  32 <textarea id="tax_table_1" onchange="calculate()" oninput="calculate()">     0 10
  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/>
  42 <textarea id="tax_table_2" onchange="calculate()" oninput="calculate()">      0  1
  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
  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>
  69
  70 <p class="privacy_policy">Privacy policy: All calculations are client-side; no figures are sent to any server.</p>
  71 </body>
  72 </html>