sdfp-framework/index.html at main · cashputation/sdfp-framework · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Self-Adjusting Tax Bracket Simulator</title>
<link rel="stylesheet" href="./components/styles.css">
</head>
<body>
<h2>Self-Adjusting Tax Bracket Simulator</h2>

<div class="flex">
  <div class="left">
    <div id="form-container"></div>
    <div id="table-container"></div>
  </div>
  <div class="right">
    <div id="desc-container"></div>
  </div>
</div>

<script type="module">
import "./components/form.js";
import { renderTable } from "./components/table.js";
import { renderDesc } from "./components/description.js";

const defaults = { B:1, Target:150, alpha:0.5, beta:0.3, rmin:5, rmax:37.75 };
const baseBrackets = [
  {low:0,      high:49275,  rate:15},
  {low:49275,  high:98540,  rate:20},
  {low:98540,  high:119910, rate:24},
  {low:119910, high:300000, rate:37.75}
];
const taperBrackets = [
  {low:300000, high:1000000},
  {low:1000000,high:10000000},
  {low:10000000,high:100000000},
  {low:100000000,high:1000000000},
  {low:1000000000,high:Infinity}
];

function getInputs() {
  return {
    B:      +document.getElementById('inputB').value,
    Target: +document.getElementById('inputTarget').value,
    alpha:  +document.getElementById('inputAlpha').value,
    beta:   +document.getElementById('inputBeta').value,
    rmin:   +document.getElementById('inputRmin').value,
    rmax:   +document.getElementById('inputRmax').value
  };
}

function calculateAndRender() {
  const {B, Target, alpha, beta, rmin, rmax} = getInputs();
  const ratio = Math.min(1, B / Target);
  const floor = 20000 + ratio * 130000;
  renderTable(floor, baseBrackets, taperBrackets, alpha, beta, rmin, rmax);
  renderDesc(floor, Target, B, rmin);
}

document.addEventListener('tax-input-change', calculateAndRender);

// Wait for DOM and components to load before initial render
window.addEventListener('DOMContentLoaded', () => {
  setTimeout(calculateAndRender, 200);
});
</script>
</body>
</html>