Initial Commit
This commit is contained in:
@@ -0,0 +1,35 @@
|
||||
function calculate() {
|
||||
//const gross = parseFloat(document.getElementById('grossPay').value) || 0;
|
||||
const freq = parseInt(document.getElementById('payFreq').value);
|
||||
const gross = (parseFloat(document.getElementById('payCheck').value) * freq) || 0;
|
||||
const status = document.getElementById('filingStatus').value;
|
||||
const stateCode = document.getElementById('state').value;
|
||||
const retPct = parseFloat(document.getElementById('retPct').value) / 100;
|
||||
const preTax = (parseFloat(document.getElementById('preTaxPay').value) || 0) * freq;
|
||||
const postTax = (parseFloat(document.getElementById('postTaxPay').value) || 0) * freq;
|
||||
const other = (parseFloat(document.getElementById('otherPay').value) || 0) * freq;
|
||||
const cityPct = (parseFloat(document.getElementById('cityTax').value) / 100) || 0;
|
||||
|
||||
const stdDed = STD_DEDUCTIONS[status];
|
||||
document.getElementById('stdDedLabel').textContent = '$' + stdDed.toLocaleString();
|
||||
|
||||
const retirement = gross * retPct;
|
||||
const preTaxTotal = retirement + preTax;
|
||||
const fedtaxable = Math.max(0, gross - stdDed - preTaxTotal);
|
||||
const taxable = Math.max(0, gross - preTaxTotal);
|
||||
|
||||
const fed = calcBracketTax(fedtaxable, FED_BRACKETS[status]);
|
||||
const ss = Math.min(gross, SS_BASE) * SS_RATE;
|
||||
const med = gross * MED_RATE;
|
||||
const addMed = gross > ADD_MED_THRESH[status] ? (gross - ADD_MED_THRESH[status]) * 0.009 : 0;
|
||||
const fica = ss + med + addMed;
|
||||
const stTax = calcStateTax(taxable, stateCode);
|
||||
const ctTax = Math.max(0,taxable * cityPct);
|
||||
const totalTax = fed + fica + stTax + ctTax;
|
||||
const totalDeductions = preTaxTotal + postTax + other + totalTax;
|
||||
const net = gross - totalDeductions;
|
||||
const netPer = net / freq;
|
||||
|
||||
currentData = { gross, retPct, retirement, preTax, preTaxTotal, postTax, other, fed, ss, med, addMed, fica, stTax, ctTax, totalTax, net, netPer, taxable, stdDed, freq, status, stateCode };
|
||||
renderResults(currentData);
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Take-Home Pay Calculator & Retirement Analyzer</title>
|
||||
<link rel="stylesheet" href="../retirement.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<a href="/">
|
||||
<h1>💰 Take-Home Pay Calculator</h1>
|
||||
</a>
|
||||
<p>2026 Federal & State Tax Calculator with Retirement Analysis</p>
|
||||
</header>
|
||||
|
||||
<div class="layout">
|
||||
<div>
|
||||
<div class="card">
|
||||
<h2><span class="icon">⚙️</span> Your Details</h2>
|
||||
<div class="input-group" hidden>
|
||||
<label>Gross Annual Pay</label>
|
||||
<input type="number" id="grossPay" value="75000" step="1000" min="0">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label>Gross Paycheck</label>
|
||||
<input type="number" id="payCheck" value="3000" step="10" min="0">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label>Pay Frequency</label>
|
||||
<select id="payFreq">
|
||||
<option value="52">Weekly (52 periods)</option>
|
||||
<option value="26" selected>Bi-Weekly (26 periods)</option>
|
||||
<option value="24">Semi-Monthly (24 periods)</option>
|
||||
<option value="12">Monthly (12 periods)</option>
|
||||
<option value="1">Annually (1 period)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label>Filing Status</label>
|
||||
<select id="filingStatus">
|
||||
<option value="single">Single</option>
|
||||
<option value="married_joint">Married Filing Jointly</option>
|
||||
<option value="head_household">Head of Household</option>
|
||||
<option value="married_separate">Married Filing Separately</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label>State</label>
|
||||
<select id="state">
|
||||
<option value="AL">Alabama</option>
|
||||
<option value="AK">Alaska</option>
|
||||
<option value="AZ">Arizona</option>
|
||||
<option value="AR">Arkansas</option>
|
||||
<option value="CA">California</option>
|
||||
<option value="CO">Colorado</option>
|
||||
<option value="CT">Connecticut</option>
|
||||
<option value="DE">Delaware</option>
|
||||
<option value="FL">Florida</option>
|
||||
<option value="GA">Georgia</option>
|
||||
<option value="HI">Hawaii</option>
|
||||
<option value="ID">Idaho</option>
|
||||
<option value="IL">Illinois</option>
|
||||
<option value="IN">Indiana</option>
|
||||
<option value="IA">Iowa</option>
|
||||
<option value="KS">Kansas</option>
|
||||
<option value="KY">Kentucky</option>
|
||||
<option value="LA">Louisiana</option>
|
||||
<option value="ME">Maine</option>
|
||||
<option value="MD">Maryland</option>
|
||||
<option value="MA">Massachusetts</option>
|
||||
<option value="MI">Michigan</option>
|
||||
<option value="MN">Minnesota</option>
|
||||
<option value="MS">Mississippi</option>
|
||||
<option value="MO">Missouri</option>
|
||||
<option value="MT">Montana</option>
|
||||
<option value="NE">Nebraska</option>
|
||||
<option value="NV">Nevada</option>
|
||||
<option value="NH">New Hampshire</option>
|
||||
<option value="NJ">New Jersey</option>
|
||||
<option value="NM">New Mexico</option>
|
||||
<option value="NY">New York</option>
|
||||
<option value="NC">North Carolina</option>
|
||||
<option value="ND">North Dakota</option>
|
||||
<option value="OH">Ohio</option>
|
||||
<option value="OK">Oklahoma</option>
|
||||
<option value="OR">Oregon</option>
|
||||
<option value="PA">Pennsylvania</option>
|
||||
<option value="RI">Rhode Island</option>
|
||||
<option value="SC">South Carolina</option>
|
||||
<option value="SD">South Dakota</option>
|
||||
<option value="TN">Tennessee</option>
|
||||
<option value="TX">Texas</option>
|
||||
<option value="UT">Utah</option>
|
||||
<option value="VT">Vermont</option>
|
||||
<option value="VA">Virginia</option>
|
||||
<option value="WA">Washington</option>
|
||||
<option value="WV">West Virginia</option>
|
||||
<option value="WI">Wisconsin</option>
|
||||
<option value="WY">Wyoming</option>
|
||||
<option value="DC">Washington D.C.</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label>City Tax (%)</label>
|
||||
<input type="range" id="cityTax" min= "0" max="10" value="0" step="0.5"></input>
|
||||
<span id="cityTaxDisplay" style="font-size:0.8rem; color:var(--accent-light);">0%</span>
|
||||
</div>
|
||||
<hr style="border-color: var(--border); margin: 18px 0;">
|
||||
<div class="two-col">
|
||||
<div class="input-group">
|
||||
<label>Retirement Contribution (%)</label>
|
||||
<input type="range" id="retPct" min="0" max="25" step="0.5" value="10">
|
||||
<span id="retPctDisplay" style="font-size:0.8rem; color:var(--accent-light);">10%</span>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label>Pre-Tax Deductions ($/pay)</label>
|
||||
<input type="number" id="preTaxPay" value="0" min="0" step="1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="two-col">
|
||||
<div class="input-group">
|
||||
<label>Post-Tax Deductions ($/pay)</label>
|
||||
<input type="number" id="postTaxPay" value="0" min="0" step="1">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label>Other Deductions ($/pay)</label>
|
||||
<input type="number" id="otherPay" value="0" min="0" step="1">
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn" id="calcBtn">Calculate Take-Home Pay</button>
|
||||
<div class="tax-brackets-info">
|
||||
<strong>2026 Standard Deduction:</strong> <span id="stdDedLabel">$16,100</span> |
|
||||
<strong>FICA Rate:</strong> 7.65% (SS 6.2% + Medicare 1.45%)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right-panel" id="rightPanel">
|
||||
<div class="empty-state">
|
||||
<div class="icon">📊</div>
|
||||
<p>Enter your details and click <strong>Calculate</strong> to see your take-home pay breakdown.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../taxes.js"></script>
|
||||
<script src="calc.js"></script>
|
||||
<script src="../global.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user