Aesthetics

[inverse-tax] / tax.html
diff --git a/tax.html b/tax.html

index 51c323e4ae54a00f57d7c121b8e8b04e2df5211b..73aa260c38d10c4def3845cbe85c77b68c5f6e93 100644 (file)
--- a/tax.html
+++ b/tax.html
@@ -7,6 +7,8 @@
    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()">
@@ -17,16 +19,16 @@
  <table>
  <tr>
  <td>
-Federal deductible<br/><input id="deductible_1" value="24000"/>
+Federal deductible<br/><input id="deductible_1" value="24000" onchange="calculate()" oninput="calculate()"/>
  </td>
  <td>
-State deductible<br/><input id="deductible_2" value="8258"/>
+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">     0 10
+<textarea id="tax_table_1" onchange="calculate()" oninput="calculate()">     0 10
   18651 15
   75901 25
  153101 28
@@ -36,7 +38,7 @@ Federal tax table<br/>
  </td>
  <td>
  State tax table<br/>
-<textarea id="tax_table_2">      0  1
+<textarea id="tax_table_2" onchange="calculate()" oninput="calculate()">      0  1
    16030  2
    38002  4
    59978  6
@@ -57,11 +59,13 @@ Desired after-tax salary</br>
  </table>
  </form>
  
-<p><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="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>Privacy policy: All calculations are client-side; no figures are sent to any server.</p>
+<p class="privacy_policy">Privacy policy: All calculations are client-side; no figures are sent to any server.</p>
  </body>
  </html>