taxman/index.html at master · divbzero/taxman · 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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>

<head>
  <meta charset=utf-8>
  <meta name=viewport content="initial-scale=1, maximum-scale=1">
  <title>GOP Tax Bill · Income Tax for 2018</title>
  <link rel=stylesheet href=nv.d3.css>
  <link rel=stylesheet href=taxman.style.css>
</head>

<body>
  <header>
    <h1>GOP Tax Bill</h1>
    <h2>Income Tax for 2018</h2>
  </header>
  <section>
    <form data-status="single">
      <fieldset>
        <legend>Tax Plan</legend>
        <span class=toggle>
          <input type=radio id=plan-2017 name=plan value=2017 checked>
          <label for=plan-2017>2017</label>
        </span>
        <span class=toggle>
          <input type=radio id=plan-2018-house name=plan value=2018-house>
          <label for=plan-2018-house>2018 (House Bill)</label>
        </span>
        <span class=toggle>
          <input type=radio id=plan-2018-senate name=plan value=2018-senate>
          <label for=plan-2018-senate>2018 (Senate Bill)</label>
        </span>
        <span class=toggle>
          <input type=radio id=plan-2018-final name=plan value=2018-final>
          <label for=plan-2018-final>2018 (Final Bill)</label>
        </span>
      </fieldset>

      <fieldset>
        <legend>Filing Status</legend>
        <span class=toggle>
          <input type=radio id=status-single name=status value=single checked>
          <label for=status-single>Single</label>
        </span>
        <span class=toggle>
          <input type=radio id=status-joint name=status value=joint>
          <label for=status-joint>Married filing jointly</label>
        </span>
        <span class=toggle>
          <input type=radio id=status-separate name=status value=separate>
          <label for=status-separate>Married filing separately</label>
        </span>
        <span class=toggle>
          <input type=radio id=status-household name=status value=household>
          <label for=status-household>Head of household</label>
        </span>
      </fieldset>

      <fieldset>
        <legend>Income</legend>
        <span class="input prefix">
          <label class=unit for=income>$</label>
          <input type=number id=income name=income step=5000 value=30000>
          <label for=income>Ordinary income less adjustments</label>
        </span>
      </fieldset>

      <fieldset>
        <legend>Deduction</legend>
        <span class=toggle>
          <input type=radio id=deduction-type-standard name=deduction-type value=standard checked>
          <label for=deduction-type-standard>Standard</label>
        </span>
        <span class=toggle>
          <input type=radio id=deduction-type-itemized name=deduction-type value=itemized>
          <label for=deduction-type-itemized>Itemized</label>
        </span>
        <span class="input prefix">
          <label class=unit for=deduction>$</label>
          <input id=deduction name=deduction value=6350 disabled>
          <label for=deduction>Deduction</label>
        </span>
      </fieldset>

      <fieldset>
        <legend>Exemption</legend>
        <span class=input>
          <input type=number id=dependents name=dependents value=1 min=1>
          <label for=dependents>Dependents</label>
        </span>
        <span class="input prefix">
          <label class=unit for=exemption>$</label>
          <input id=exemption name=exemption min=0 value=4050 disabled>
          <label for=exemption>Exemption</label>
        </span>
      </fieldset>

      <fieldset>
        <legend>Taxable Income</legend>
        <span class="input prefix">
          <label class=unit for=taxable-income>$</label>
          <input id=taxable-income name=taxable-income value=19600 disabled>
        </span>
      </fieldset>

      <fieldset>
        <legend>Marginal Tax Rate</legend>
        <span class="input suffix">
          <input id=taxable-income name=marginal-tax-rate value=15.0 disabled>
          <label class=unit for=marginal-tax-rate>%</label>
        </span>
      </fieldset>

      <fieldset>
        <legend>Income Tax</legend>
        <span class="input prefix">
          <label class=unit for=tax>$</label>
          <input id=tax name=tax value=2474 disabled>
        </span>
      </fieldset>

      <fieldset>
        <legend>Overall Tax Rate</legend>
        <span class="input suffix">
          <input id=taxable-income name=overall-tax-rate value=8.2 disabled>
          <label class=unit for=overall-tax-rate>%</label>
        </span>
      </fieldset>
    </form>
  </section>

  <section>
    <div id=chart></div>
  </section>

  <script src=d3.js></script>
  <script src=fastclick.js></script>
  <script src=object.assign.js></script>
  <script src=nv.d3.js></script>
  <script src=taxman.data.js></script>
  <script src=taxman.ui.js></script>

  <script>
    FastClick.attach(document.body);
  </script>
</body>