mirror of
https://gitlab.com/MisterBiggs/secure-act-2.0.git
synced 2025-08-17 16:24:43 +00:00
Anson Biggs
8880b729d7
- Fix chart data showing age 70 values instead of age 65 retirement values - Update all hardcoded examples to match actual calculator output - Recent Graduate: 75K → 94K (corrected retirement value) - MBA Graduate: 25K → 29K (corrected retirement value) - Medical Professional: 85K → ,065K (corrected) - Teacher: 8K → 88K (corrected) - Software Engineer: 12K → ,132K (corrected) - Attorney: 5K → 54K (corrected) - All examples now mathematically consistent with calculator logic - Charts no longer appear to 'slow down' at retirement age
1326 lines
74 KiB
HTML
1326 lines
74 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>SECURE Act 2.0: Student Loan Matching Program Calculator</title>
|
||
|
||
<!-- SEO Meta Tags -->
|
||
<meta name="description" content="Calculate how the SECURE Act 2.0 student loan matching program can help you build retirement savings while paying off student debt. Free calculator with real-time visualizations.">
|
||
<meta name="keywords" content="SECURE Act 2.0, student loan matching, 401k, retirement calculator, student debt, employer benefits">
|
||
<meta name="author" content="SECURE Act Calculator">
|
||
|
||
<!-- Open Graph / Facebook -->
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://401k.ansonbiggs.com/">
|
||
<meta property="og:title" content="SECURE Act 2.0 Student Loan Matching Calculator">
|
||
<meta property="og:description" content="Discover how employer 401(k) matching for student loan payments can transform your financial future. Free calculator with instant results.">
|
||
<meta property="og:image" content="https://401k.ansonbiggs.com/og-image.png">
|
||
|
||
<!-- Twitter -->
|
||
<meta property="twitter:card" content="summary_large_image">
|
||
<meta property="twitter:url" content="https://401k.ansonbiggs.com/">
|
||
<meta property="twitter:title" content="SECURE Act 2.0 Student Loan Matching Calculator">
|
||
<meta property="twitter:description" content="Calculate your retirement savings potential with student loan 401(k) matching. Free tool for employees and employers.">
|
||
<meta property="twitter:image" content="https://401k.ansonbiggs.com/twitter-image.png">
|
||
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.45.0/dist/apexcharts.min.js"></script>
|
||
<script src="calculations.js"></script>
|
||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||
<style>
|
||
[x-cloak] { display: none !important; }
|
||
@media print {
|
||
.no-print { display: none !important; }
|
||
.print-only { display: block !important; }
|
||
}
|
||
.print-only { display: none; }
|
||
|
||
/* Custom tooltip styles */
|
||
.tooltip {
|
||
position: relative;
|
||
}
|
||
|
||
.tooltip::after {
|
||
content: "ℹ️";
|
||
position: absolute;
|
||
top: 0.5rem;
|
||
right: 0.5rem;
|
||
font-size: 0.75rem;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.tooltip .tooltip-text {
|
||
visibility: hidden;
|
||
width: 280px;
|
||
background-color: rgba(0, 0, 0, 0.9);
|
||
color: white;
|
||
text-align: center;
|
||
border-radius: 6px;
|
||
padding: 8px 12px;
|
||
position: absolute;
|
||
z-index: 1;
|
||
bottom: 125%;
|
||
left: 50%;
|
||
margin-left: -140px;
|
||
opacity: 0;
|
||
transition: opacity 0.3s;
|
||
font-size: 0.75rem;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.tooltip .tooltip-text::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 50%;
|
||
margin-left: -5px;
|
||
border-width: 5px;
|
||
border-style: solid;
|
||
border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
|
||
}
|
||
|
||
.tooltip:hover .tooltip-text {
|
||
visibility: visible;
|
||
opacity: 1;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-50">
|
||
<!-- Hero Section -->
|
||
<section class="bg-gradient-to-r from-blue-600 to-purple-700 text-white">
|
||
<div class="container mx-auto px-6 py-16">
|
||
<div class="text-center">
|
||
<h1 class="text-4xl md:text-6xl font-bold mb-6">
|
||
SECURE Act 2.0
|
||
</h1>
|
||
<h2 class="text-2xl md:text-3xl font-light mb-8">
|
||
Student Loan Matching Program
|
||
</h2>
|
||
<p class="text-xl md:text-2xl max-w-4xl mx-auto leading-relaxed mb-6">
|
||
A game-changing benefit that helps employees build retirement savings
|
||
while paying off student loans
|
||
</p>
|
||
<div class="text-center mb-8">
|
||
<p class="text-sm text-white/90 bg-white/10 backdrop-blur-sm inline-block px-6 py-3 rounded-full border border-white/20">
|
||
Student debt grew 4.5% annually through 2019 — nearly twice as fast as wage growth
|
||
</p>
|
||
</div>
|
||
<div class="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto text-center">
|
||
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-4 tooltip">
|
||
<div class="text-3xl font-bold">$1.81 Trillion</div>
|
||
<div class="text-sm opacity-90">Total U.S. Student Debt</div>
|
||
<span class="tooltip-text">Source: Education Data Initiative, Q2 2025 student loan debt statistics</span>
|
||
</div>
|
||
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-4 tooltip">
|
||
<div class="text-3xl font-bold">42,500,000</div>
|
||
<div class="text-sm opacity-90">Americans with Student Loans</div>
|
||
<span class="tooltip-text">Source: Education Data Initiative, 2025 federal student loan borrower data</span>
|
||
</div>
|
||
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-4 tooltip">
|
||
<div class="text-3xl font-bold">$39,000</div>
|
||
<div class="text-sm opacity-90">Average Federal Debt per Borrower</div>
|
||
<span class="tooltip-text">Source: Education Data Initiative, 2025 average federal student loan debt per borrower</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- What is it Section -->
|
||
<section class="py-16 bg-white">
|
||
<div class="container mx-auto px-6">
|
||
<div class="max-w-4xl mx-auto">
|
||
<h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">
|
||
What is the Student Loan Matching Program?
|
||
</h2>
|
||
<div class="grid md:grid-cols-2 gap-8">
|
||
<div class="bg-blue-50 p-6 rounded-lg">
|
||
<h3 class="text-xl font-semibold text-blue-800 mb-4">For Employees</h3>
|
||
<p class="text-gray-700">
|
||
Make student loan payments and receive employer 401(k) matching contributions
|
||
as if you contributed directly to your retirement account. No need to choose
|
||
between paying off debt and saving for retirement.
|
||
</p>
|
||
</div>
|
||
<div class="bg-green-50 p-6 rounded-lg">
|
||
<h3 class="text-xl font-semibold text-green-800 mb-4">For Employers</h3>
|
||
<p class="text-gray-700">
|
||
Offer a competitive benefit that helps younger employees build retirement
|
||
savings while managing student debt. Improve retention and attract top talent
|
||
without increasing costs.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Real World Examples -->
|
||
<section class="py-16 bg-white">
|
||
<div class="container mx-auto px-6">
|
||
<h2 class="text-3xl font-bold text-gray-800 mb-12 text-center">
|
||
Real-World Impact Examples
|
||
</h2>
|
||
|
||
<div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
||
<!-- Example 1: Recent Graduate -->
|
||
<div class="bg-gradient-to-br from-blue-50 to-blue-100 p-6 rounded-lg">
|
||
<div class="text-center mb-4">
|
||
<div class="w-16 h-16 bg-blue-500 rounded-full mx-auto mb-4 flex items-center justify-center">
|
||
<span class="text-white text-2xl">👩🎓</span>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-blue-800">Recent Graduate</h3>
|
||
</div>
|
||
<div class="space-y-2 text-sm">
|
||
<p><strong>Salary:</strong> $50,000</p>
|
||
<p><strong>Total Student Debt:</strong> $35,000</p>
|
||
<p><strong>Monthly Payment:</strong> $400</p>
|
||
<p><strong>Loan Term:</strong> 11 years</p>
|
||
<p><strong>Employer Match:</strong> 4%</p>
|
||
</div>
|
||
<div class="mt-4 p-3 bg-white rounded">
|
||
<p class="text-lg font-bold text-blue-600">$493,553</p>
|
||
<p class="text-xs text-gray-600">Retirement value at age 65</p>
|
||
<p class="text-xs text-blue-600 mt-1">$20,000 in matching over 10 years</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Example 2: Mid-Career Professional -->
|
||
<div class="bg-gradient-to-br from-green-50 to-green-100 p-6 rounded-lg">
|
||
<div class="text-center mb-4">
|
||
<div class="w-16 h-16 bg-green-500 rounded-full mx-auto mb-4 flex items-center justify-center">
|
||
<span class="text-white text-2xl">👨💼</span>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-green-800">MBA Graduate</h3>
|
||
</div>
|
||
<div class="space-y-2 text-sm">
|
||
<p><strong>Salary:</strong> $85,000</p>
|
||
<p><strong>Total Student Debt:</strong> $65,000</p>
|
||
<p><strong>Monthly Payment:</strong> $650</p>
|
||
<p><strong>Loan Term:</strong> 14 years</p>
|
||
<p><strong>Employer Match:</strong> 5%</p>
|
||
</div>
|
||
<div class="mt-4 p-3 bg-white rounded">
|
||
<p class="text-lg font-bold text-green-600">$729,134</p>
|
||
<p class="text-xs text-gray-600">Retirement value at age 65</p>
|
||
<p class="text-xs text-green-600 mt-1">$46,750 in matching over 11 years</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Example 3: Advanced Degree Holder -->
|
||
<div class="bg-gradient-to-br from-purple-50 to-purple-100 p-6 rounded-lg">
|
||
<div class="text-center mb-4">
|
||
<div class="w-16 h-16 bg-purple-500 rounded-full mx-auto mb-4 flex items-center justify-center">
|
||
<span class="text-white text-2xl">👩⚕️</span>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-purple-800">Medical Professional</h3>
|
||
</div>
|
||
<div class="space-y-2 text-sm">
|
||
<p><strong>Salary:</strong> $120,000</p>
|
||
<p><strong>Total Student Debt:</strong> $200,000</p>
|
||
<p><strong>Monthly Payment:</strong> $1,800</p>
|
||
<p><strong>Loan Term:</strong> 17 years</p>
|
||
<p><strong>Employer Match:</strong> 6%</p>
|
||
</div>
|
||
<div class="mt-4 p-3 bg-white rounded">
|
||
<p class="text-lg font-bold text-purple-600">$1,064,977</p>
|
||
<p class="text-xs text-gray-600">Retirement value at age 65</p>
|
||
<p class="text-xs text-purple-600 mt-1">$93,600 in matching over 13 years</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Additional Examples Row -->
|
||
<div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto mt-8">
|
||
<!-- Example 4: Teacher -->
|
||
<div class="bg-gradient-to-br from-amber-50 to-amber-100 p-6 rounded-lg">
|
||
<div class="text-center mb-4">
|
||
<div class="w-16 h-16 bg-amber-500 rounded-full mx-auto mb-4 flex items-center justify-center">
|
||
<span class="text-white text-2xl">👩🏫</span>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-amber-800">Public School Teacher</h3>
|
||
</div>
|
||
<div class="space-y-2 text-sm">
|
||
<p><strong>Salary:</strong> $45,000</p>
|
||
<p><strong>Total Student Debt:</strong> $42,000</p>
|
||
<p><strong>Monthly Payment:</strong> $350</p>
|
||
<p><strong>Loan Term:</strong> 21 years</p>
|
||
<p><strong>Employer Match:</strong> 3%</p>
|
||
</div>
|
||
<div class="mt-4 p-3 bg-white rounded">
|
||
<p class="text-lg font-bold text-amber-600">$288,373</p>
|
||
<p class="text-xs text-gray-600">Retirement value at age 65</p>
|
||
<p class="text-xs text-amber-600 mt-1">$18,900 in matching over 14 years</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Example 5: Tech Professional -->
|
||
<div class="bg-gradient-to-br from-indigo-50 to-indigo-100 p-6 rounded-lg">
|
||
<div class="text-center mb-4">
|
||
<div class="w-16 h-16 bg-indigo-500 rounded-full mx-auto mb-4 flex items-center justify-center">
|
||
<span class="text-white text-2xl">👨💻</span>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-indigo-800">Software Engineer</h3>
|
||
</div>
|
||
<div class="space-y-2 text-sm">
|
||
<p><strong>Salary:</strong> $95,000</p>
|
||
<p><strong>Total Student Debt:</strong> $28,000</p>
|
||
<p><strong>Monthly Payment:</strong> $500</p>
|
||
<p><strong>Loan Term:</strong> 6 years</p>
|
||
<p><strong>Employer Match:</strong> 6%</p>
|
||
</div>
|
||
<div class="mt-4 p-3 bg-white rounded">
|
||
<p class="text-lg font-bold text-indigo-600">$1,132,220</p>
|
||
<p class="text-xs text-gray-600">Retirement value at age 65</p>
|
||
<p class="text-xs text-indigo-600 mt-1">$34,200 in matching over 6 years</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Example 6: Law Graduate -->
|
||
<div class="bg-gradient-to-br from-red-50 to-red-100 p-6 rounded-lg">
|
||
<div class="text-center mb-4">
|
||
<div class="w-16 h-16 bg-red-500 rounded-full mx-auto mb-4 flex items-center justify-center">
|
||
<span class="text-white text-2xl">⚖️</span>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-red-800">Attorney</h3>
|
||
</div>
|
||
<div class="space-y-2 text-sm">
|
||
<p><strong>Salary:</strong> $75,000</p>
|
||
<p><strong>Total Student Debt:</strong> $150,000</p>
|
||
<p><strong>Monthly Payment:</strong> $1,200</p>
|
||
<p><strong>Loan Term:</strong> 23 years</p>
|
||
<p><strong>Employer Match:</strong> 4%</p>
|
||
</div>
|
||
<div class="mt-4 p-3 bg-white rounded">
|
||
<p class="text-lg font-bold text-red-600">$553,921</p>
|
||
<p class="text-xs text-gray-600">Retirement value at age 65</p>
|
||
<p class="text-xs text-red-600 mt-1">$45,000 in matching over 15 years</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Quick Load Buttons -->
|
||
<div class="text-center mt-8" x-data>
|
||
<p class="text-sm text-gray-600 mb-3">Click any example to load it into the calculator below</p>
|
||
<div class="flex flex-wrap justify-center gap-2">
|
||
<button @click="$dispatch('load-example', {salary:50000, totalDebt:35000, loanPayment:400, matchRate:4, currentAge:23})"
|
||
class="px-3 py-1 text-xs bg-blue-100 text-blue-700 rounded hover:bg-blue-200 transition-colors">
|
||
Load Recent Graduate
|
||
</button>
|
||
<button @click="$dispatch('load-example', {salary:85000, totalDebt:65000, loanPayment:650, matchRate:5, currentAge:28})"
|
||
class="px-3 py-1 text-xs bg-green-100 text-green-700 rounded hover:bg-green-200 transition-colors">
|
||
Load MBA Graduate
|
||
</button>
|
||
<button @click="$dispatch('load-example', {salary:120000, totalDebt:200000, loanPayment:1800, matchRate:6, currentAge:30})"
|
||
class="px-3 py-1 text-xs bg-purple-100 text-purple-700 rounded hover:bg-purple-200 transition-colors">
|
||
Load Medical Professional
|
||
</button>
|
||
<button @click="$dispatch('load-example', {salary:45000, totalDebt:42000, loanPayment:350, matchRate:3, currentAge:25})"
|
||
class="px-3 py-1 text-xs bg-amber-100 text-amber-700 rounded hover:bg-amber-200 transition-colors">
|
||
Load Teacher
|
||
</button>
|
||
<button @click="$dispatch('load-example', {salary:95000, totalDebt:28000, loanPayment:500, matchRate:6, currentAge:26})"
|
||
class="px-3 py-1 text-xs bg-indigo-100 text-indigo-700 rounded hover:bg-indigo-200 transition-colors">
|
||
Load Software Engineer
|
||
</button>
|
||
<button @click="$dispatch('load-example', {salary:75000, totalDebt:150000, loanPayment:1200, matchRate:4, currentAge:27})"
|
||
class="px-3 py-1 text-xs bg-red-100 text-red-700 rounded hover:bg-red-200 transition-colors">
|
||
Load Attorney
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Interactive Calculator -->
|
||
<section class="py-16 bg-gray-100" x-data="calculator()"
|
||
@load-example.window="salary=$event.detail.salary; totalDebt=$event.detail.totalDebt; loanPayment=$event.detail.loanPayment; matchRate=$event.detail.matchRate; currentAge=$event.detail.currentAge">
|
||
<div class="container mx-auto px-6">
|
||
<h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">
|
||
Calculate Your Personal Impact
|
||
</h2>
|
||
|
||
<div class="max-w-6xl mx-auto">
|
||
<div class="grid lg:grid-cols-2 gap-8">
|
||
<!-- Calculator Inputs -->
|
||
<div class="bg-white p-6 rounded-lg shadow-lg">
|
||
<h3 class="text-xl font-semibold mb-6">Your Information</h3>
|
||
|
||
<div class="space-y-4">
|
||
<div>
|
||
<label for="salary-input" class="block text-sm font-medium text-gray-700 mb-2 cursor-help hover:text-gray-900" title="Your gross annual income before taxes">
|
||
Annual Salary
|
||
</label>
|
||
<input type="number" x-model.number="salary"
|
||
@blur="validateInputs()"
|
||
id="salary-input"
|
||
aria-label="Annual salary in dollars"
|
||
aria-describedby="salary-error"
|
||
min="0" max="10000000"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
:class="{'border-red-500': errors.salary}"
|
||
placeholder="65000"> <span x-show="errors.salary" x-text="errors.salary" id="salary-error" class="text-red-500 text-xs mt-1"></span>
|
||
</div>
|
||
|
||
<div>
|
||
<label for="debt-input" class="block text-sm font-medium text-gray-700 mb-2 cursor-help hover:text-gray-900" title="Total outstanding student loan balance">
|
||
Total Student Debt
|
||
</label>
|
||
<input type="number" x-model.number="totalDebt"
|
||
@blur="validateInputs()"
|
||
id="debt-input"
|
||
aria-label="Total student debt in dollars"
|
||
aria-describedby="debt-error"
|
||
min="0" max="1000000"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
:class="{'border-red-500': errors.totalDebt}"
|
||
placeholder="37000"> <span x-show="errors.totalDebt" x-text="errors.totalDebt" id="debt-error" class="text-red-500 text-xs mt-1"></span>
|
||
</div>
|
||
|
||
<div>
|
||
<label for="payment-input" class="block text-sm font-medium text-gray-700 mb-2 cursor-help hover:text-gray-900" title="Your current monthly student loan payment amount">
|
||
Monthly Loan Payment
|
||
</label>
|
||
<input type="number" x-model.number="loanPayment"
|
||
@blur="validateInputs()"
|
||
id="payment-input"
|
||
aria-label="Monthly loan payment in dollars"
|
||
aria-describedby="payment-error"
|
||
min="0"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
:class="{'border-red-500': errors.loanPayment}"
|
||
placeholder="400"> <span x-show="errors.loanPayment" x-text="errors.loanPayment" id="payment-error" class="text-red-500 text-xs mt-1"></span>
|
||
</div>
|
||
|
||
<div>
|
||
<label for="match-input" class="block text-sm font-medium text-gray-700 mb-2 cursor-help hover:text-gray-900" title="Percentage of salary your employer will match">
|
||
Employer Match Rate (%)
|
||
</label>
|
||
<input type="number" x-model.number="matchRate"
|
||
@blur="validateInputs()"
|
||
id="match-input"
|
||
aria-label="Employer match rate as percentage"
|
||
aria-describedby="match-error"
|
||
min="0" max="100"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
:class="{'border-red-500': errors.matchRate}"
|
||
placeholder="4"> <span x-show="errors.matchRate" x-text="errors.matchRate" id="match-error" class="text-red-500 text-xs mt-1"></span>
|
||
</div>
|
||
|
||
<div>
|
||
<label for="age-input" class="block text-sm font-medium text-gray-700 mb-2 cursor-help hover:text-gray-900" title="Your current age in years">
|
||
Current Age
|
||
</label>
|
||
<input type="number" x-model.number="currentAge"
|
||
@blur="validateInputs()"
|
||
id="age-input"
|
||
aria-label="Current age in years"
|
||
aria-describedby="age-error"
|
||
min="18" max="64"
|
||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
:class="{'border-red-500': errors.currentAge}"
|
||
placeholder="28"> <span x-show="errors.currentAge" x-text="errors.currentAge" id="age-error" class="text-red-500 text-xs mt-1"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Chart and Results -->
|
||
<div class="bg-white p-6 rounded-lg shadow-lg">
|
||
<div class="flex justify-between items-center mb-6">
|
||
<h3 class="text-xl font-semibold">Net Worth Comparison</h3>
|
||
</div>
|
||
|
||
<!-- Results Summary -->
|
||
<div class="mb-6 grid grid-cols-3 gap-3">
|
||
<div class="p-3 bg-blue-50 rounded-lg text-center">
|
||
<p class="text-sm font-semibold text-blue-800">Loan Payoff</p>
|
||
<p class="text-lg font-bold text-blue-600" x-text="payoffYears + ' years'"></p>
|
||
</div>
|
||
<div class="p-3 bg-green-50 rounded-lg text-center">
|
||
<p class="text-sm font-semibold text-green-800">Total Matching</p>
|
||
<p class="text-lg font-bold text-green-600" x-text="'$' + totalMatching.toLocaleString()"></p>
|
||
</div>
|
||
<div class="p-3 bg-purple-50 rounded-lg text-center">
|
||
<p class="text-sm font-semibold text-purple-800">Value at 65</p>
|
||
<p class="text-lg font-bold text-purple-600" x-text="'$' + retirementValue.toLocaleString()"></p>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="savingsChart"></div>
|
||
|
||
<!-- Print-only summary -->
|
||
<div class="print-only mt-6 p-4 border-2 border-gray-300 rounded">
|
||
<h4 class="font-semibold mb-2">Calculator Inputs</h4>
|
||
<div class="grid grid-cols-2 gap-2 text-sm">
|
||
<div>Annual Salary: <span x-text="'$' + salary.toLocaleString()"></span></div>
|
||
<div>Total Debt: <span x-text="'$' + totalDebt.toLocaleString()"></span></div>
|
||
<div>Monthly Payment: <span x-text="'$' + loanPayment.toLocaleString()"></span></div>
|
||
<div>Match Rate: <span x-text="matchRate + '%'"></span></div>
|
||
<div>Current Age: <span x-text="currentAge"></span></div>
|
||
</div>
|
||
<p class="mt-4 text-xs text-gray-600">Generated from SECURE Act 2.0 Calculator - https://401k.ansonbiggs.com</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="max-w-6xl mx-auto mt-8" x-data="{ open: false }">
|
||
<div class="bg-white rounded-lg shadow-lg">
|
||
<button @click="open = !open" class="w-full px-6 py-4 flex items-center justify-between text-left hover:bg-gray-50 transition-colors">
|
||
<h3 class="text-lg font-semibold text-gray-800">Calculation Details & Assumptions</h3>
|
||
<svg class="w-5 h-5 text-gray-500 transform transition-transform" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||
</svg>
|
||
</button>
|
||
|
||
<div x-show="open" x-collapse class="px-6 pb-6">
|
||
<div class="border-t pt-4">
|
||
<div class="grid md:grid-cols-2 gap-6">
|
||
<div>
|
||
<h4 class="font-semibold text-gray-800 mb-3">How the Calculation Works</h4>
|
||
<ul class="space-y-2 text-sm text-gray-600">
|
||
<li class="flex items-start">
|
||
<span class="text-blue-500 mr-2">•</span>
|
||
<span><strong>Employer Matching:</strong> Your employer matches your student loan payments as 401(k) contributions, up to the specified match rate (% of salary)</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-blue-500 mr-2">•</span>
|
||
<span><strong>Annual Match Amount:</strong> Minimum of (your annual loan payments, match cap based on salary percentage)</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-blue-500 mr-2">•</span>
|
||
<span><strong>Compound Growth:</strong> Each year's contribution grows at 7% annually from the time it's contributed until retirement</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-blue-500 mr-2">•</span>
|
||
<span><strong>Net Worth:</strong> Calculated as retirement account balance minus remaining student loan debt</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 class="font-semibold text-gray-800 mb-3">Key Assumptions</h4>
|
||
<ul class="space-y-2 text-sm text-gray-600">
|
||
<li class="flex items-start">
|
||
<span class="text-green-500 mr-2">•</span>
|
||
<span><strong>Investment Returns:</strong> 7% average annual return <em>(S&P 500 long-term average: 9.96% nominal, ~7% real after inflation - Investopedia, 2025)</em></span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-green-500 mr-2">•</span>
|
||
<span><strong>Loan Interest Rate:</strong> 5% annual rate <em>(representative federal student loan rate)</em></span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-green-500 mr-2">•</span>
|
||
<span><strong>Retirement Age:</strong> 65 years old</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-green-500 mr-2">•</span>
|
||
<span><strong>Without Program:</strong> After loan payoff, you contribute the same amount to 401(k) that was going to loans (up to match cap)</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-4 p-4 bg-amber-50 rounded-lg">
|
||
<p class="text-sm text-amber-800">
|
||
<strong>Note:</strong> This calculator provides estimates for educational purposes. Actual results will vary based on your specific loan terms, employer plan details, investment performance, and contribution consistency. Consult with a financial advisor for personalized advice.
|
||
</p>
|
||
<div class="mt-3 pt-3 border-t border-amber-200">
|
||
<p class="text-xs text-amber-700">
|
||
<strong>Data Sources:</strong> Student loan statistics from Education Data Initiative (2025). Investment return assumptions based on S&P 500 historical performance data from Investopedia (2025). Federal Reserve household debt data from NY Fed Center for Microeconomic Data. Growth rate comparisons use 2019 pre-pandemic baseline data.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Employer Benefits -->
|
||
<section class="py-16 bg-gray-100">
|
||
<div class="container mx-auto px-6">
|
||
<h2 class="text-3xl font-bold text-gray-800 mb-12 text-center">
|
||
Why Employers Should Offer This Program
|
||
</h2>
|
||
|
||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
|
||
<div class="bg-white p-6 rounded-lg shadow text-center">
|
||
<div class="text-3xl mb-4">🎯</div>
|
||
<h3 class="font-semibold mb-2">Attract Talent</h3>
|
||
<p class="text-sm text-gray-600">Stand out to younger professionals with student debt</p>
|
||
</div>
|
||
|
||
<div class="bg-white p-6 rounded-lg shadow text-center">
|
||
<div class="text-3xl mb-4">💰</div>
|
||
<h3 class="font-semibold mb-2">No Extra Cost</h3>
|
||
<p class="text-sm text-gray-600">Use existing 401(k) match budget more effectively</p>
|
||
</div>
|
||
|
||
<div class="bg-white p-6 rounded-lg shadow text-center">
|
||
<div class="text-3xl mb-4">📈</div>
|
||
<h3 class="font-semibold mb-2">Improve Retention</h3>
|
||
<p class="text-sm text-gray-600">Employees value benefits that address real financial challenges</p>
|
||
</div>
|
||
|
||
<div class="bg-white p-6 rounded-lg shadow text-center">
|
||
<div class="text-3xl mb-4">⚖️</div>
|
||
<h3 class="font-semibold mb-2">Promote Equity</h3>
|
||
<p class="text-sm text-gray-600">Help all employees access retirement benefits equally</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
<!-- Call to Action -->
|
||
<section class="py-16 bg-gradient-to-r from-blue-600 to-purple-700 text-white" x-data="{ showModal: false, showEmailModal: false, copied: false }">
|
||
<div class="container mx-auto px-6 text-center">
|
||
<h2 class="text-3xl font-bold mb-6">Ready to Make an Impact?</h2>
|
||
<p class="text-xl mb-8 max-w-2xl mx-auto">
|
||
The SECURE Act 2.0 student loan matching program can transform your employees'
|
||
financial futures. The time to act is now.
|
||
</p>
|
||
<div class="space-y-4 md:space-y-0 md:space-x-4 md:flex md:justify-center">
|
||
<button @click="showModal = true"
|
||
class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
|
||
For Employers: Learn More
|
||
</button>
|
||
<button @click="showEmailModal = true"
|
||
class="bg-transparent border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition-colors">
|
||
For Employees: Request This Benefit
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal -->
|
||
<div x-show="showModal"
|
||
x-transition:enter="transition ease-out duration-300"
|
||
x-transition:enter-start="opacity-0"
|
||
x-transition:enter-end="opacity-100"
|
||
x-transition:leave="transition ease-in duration-200"
|
||
x-transition:leave-start="opacity-100"
|
||
x-transition:leave-end="opacity-0"
|
||
class="fixed inset-0 z-50 overflow-y-auto"
|
||
style="display: none;">
|
||
<div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
||
<!-- Background overlay -->
|
||
<div @click="showModal = false" class="fixed inset-0 transition-opacity bg-gray-900 bg-opacity-75"></div>
|
||
|
||
<!-- Modal panel -->
|
||
<div class="inline-block overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
|
||
<div class="px-6 pt-6 pb-4">
|
||
<div class="flex items-start justify-between">
|
||
<h3 class="text-2xl font-bold text-gray-900">
|
||
SECURE Act 2.0 Resources for Employers
|
||
</h3>
|
||
<button @click="showModal = false"
|
||
class="text-gray-400 hover:text-gray-500 focus:outline-none">
|
||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<p class="mt-3 text-gray-600">
|
||
Learn how major retirement plan providers can help you implement student loan matching:
|
||
</p>
|
||
|
||
<div class="mt-6 space-y-4">
|
||
<!-- Fidelity -->
|
||
<a href="https://www.fidelityworkplace.com/s/studentdebt-retirement"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="block p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
|
||
<div class="flex items-start">
|
||
<div class="flex-1">
|
||
<h4 class="font-semibold text-gray-900">Fidelity Workplace</h4>
|
||
<p class="mt-1 text-sm text-gray-600">
|
||
Student debt and retirement solutions - comprehensive guide to implementing SECURE Act 2.0 matching programs
|
||
</p>
|
||
</div>
|
||
<svg class="w-5 h-5 text-gray-400 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
|
||
</svg>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Vanguard -->
|
||
<a href="https://corporate.vanguard.com/content/corporatesite/us/en/corp/articles/what-secure-2-means-for-young-savers.html"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="block p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
|
||
<div class="flex items-start">
|
||
<div class="flex-1">
|
||
<h4 class="font-semibold text-gray-900">Vanguard</h4>
|
||
<p class="mt-1 text-sm text-gray-600">
|
||
What SECURE 2.0 means for young savers - insights on student loan matching benefits
|
||
</p>
|
||
</div>
|
||
<svg class="w-5 h-5 text-gray-400 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
|
||
</svg>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Schwab -->
|
||
<a href="https://www.schwab.com/retirement"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="block p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
|
||
<div class="flex items-start">
|
||
<div class="flex-1">
|
||
<h4 class="font-semibold text-gray-900">Charles Schwab</h4>
|
||
<p class="mt-1 text-sm text-gray-600">
|
||
Retirement planning resources and 401(k) solutions
|
||
</p>
|
||
</div>
|
||
<svg class="w-5 h-5 text-gray-400 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
|
||
</svg>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- IRS Official -->
|
||
<a href="https://www.irs.gov/newsroom/irs-issues-important-interim-guidance-on-employer-matching-contributions-made-to-retirement-plans-related-to-employee-student-loan-payments"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="block p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
|
||
<div class="flex items-start">
|
||
<div class="flex-1">
|
||
<h4 class="font-semibold text-gray-900">IRS Official Guidance</h4>
|
||
<p class="mt-1 text-sm text-gray-600">
|
||
SECURE 2.0 Act of 2022 - official IRS guidance and regulatory information
|
||
</p>
|
||
</div>
|
||
<svg class="w-5 h-5 text-gray-400 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
|
||
</svg>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mt-6 p-4 bg-blue-50 rounded-lg">
|
||
<p class="text-sm text-blue-900">
|
||
<strong>Next Steps:</strong> Contact your retirement plan provider to discuss implementing student loan matching.
|
||
Most major providers now offer SECURE Act 2.0 compliant solutions.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Employee Email Template Modal -->
|
||
<div x-show="showEmailModal"
|
||
x-transition:enter="transition ease-out duration-300"
|
||
x-transition:enter-start="opacity-0"
|
||
x-transition:enter-end="opacity-100"
|
||
x-transition:leave="transition ease-in duration-200"
|
||
x-transition:leave-start="opacity-100"
|
||
x-transition:leave-end="opacity-0"
|
||
class="fixed inset-0 z-50 overflow-y-auto"
|
||
style="display: none;">
|
||
<div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
||
<!-- Background overlay -->
|
||
<div @click="showEmailModal = false" class="fixed inset-0 transition-opacity bg-gray-900 bg-opacity-75"></div>
|
||
|
||
<!-- Modal panel -->
|
||
<div class="inline-block overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
|
||
<div class="px-6 pt-6 pb-4">
|
||
<div class="flex items-start justify-between">
|
||
<h3 class="text-2xl font-bold text-gray-900">
|
||
Request Student Loan 401(k) Matching
|
||
</h3>
|
||
<button @click="showEmailModal = false; copied = false"
|
||
class="text-gray-400 hover:text-gray-500 focus:outline-none">
|
||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<p class="mt-3 text-gray-600">
|
||
Use this email template to ask your HR department about implementing SECURE Act 2.0 student loan matching:
|
||
</p>
|
||
|
||
<div class="mt-6">
|
||
<div class="flex justify-between items-center mb-2">
|
||
<label class="text-sm font-medium text-gray-700">Email Template</label>
|
||
<button @click="
|
||
const emailText = $refs.emailTemplate.innerText;
|
||
navigator.clipboard.writeText(emailText);
|
||
copied = true;
|
||
setTimeout(() => copied = false, 3000);
|
||
"
|
||
class="px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors">
|
||
<span x-show="!copied">Copy to Clipboard</span>
|
||
<span x-show="copied">Copied!</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div x-ref="emailTemplate" class="p-4 bg-gray-50 rounded-lg border border-gray-200 text-sm text-gray-700 whitespace-pre-wrap">Subject: Inquiry About SECURE Act 2.0 Student Loan 401(k) Matching Benefit
|
||
|
||
Dear [HR Team/Benefits Administrator],
|
||
|
||
I hope this email finds you well. I'm writing to inquire about a new retirement benefit opportunity made available through the SECURE Act 2.0 that could significantly benefit employees with student loans.
|
||
|
||
The SECURE Act 2.0, which took effect in 2024, allows employers to make matching contributions to employees' 401(k) accounts based on their qualified student loan payments. This means employees who are paying down student debt can still receive employer retirement matching contributions, even if they can't afford to contribute directly to their 401(k).
|
||
|
||
Key benefits of this program include:
|
||
• Helping employees build retirement savings while managing student debt
|
||
• Improving employee retention and satisfaction
|
||
• Promoting financial wellness and equity across the organization
|
||
• No additional cost beyond existing 401(k) matching budget
|
||
|
||
According to recent data, the average borrower has $37,000 in student loan debt. With this benefit, an employee making $400/month in loan payments could receive approximately $1,920 annually in employer matching contributions (assuming a 4% match rate).
|
||
|
||
I'd like to know:
|
||
1. Is our company currently offering this student loan 401(k) matching benefit?
|
||
2. If not, what would be needed to implement this program?
|
||
3. Are there plans to consider this benefit in the future?
|
||
|
||
Many major retirement plan providers including Fidelity, Vanguard, and Schwab now offer SECURE Act 2.0 compliant solutions to facilitate this benefit.
|
||
|
||
I believe this could make a meaningful difference for many employees at our company. I'd be happy to discuss this further or provide additional information about the program.
|
||
|
||
Thank you for considering this request and for your continued efforts to support employee financial wellness.
|
||
|
||
Best regards,
|
||
[Your Name]
|
||
[Your Department]
|
||
[Your Contact Information]</div>
|
||
</div>
|
||
|
||
<div class="mt-6 p-4 bg-blue-50 rounded-lg">
|
||
<p class="text-sm text-blue-900">
|
||
<strong>Tips:</strong>
|
||
• Personalize the template with your company's specific matching rate if known
|
||
• Include your own student loan situation if comfortable sharing
|
||
• Consider gathering support from colleagues before sending
|
||
</p>
|
||
</div>
|
||
|
||
<div class="mt-4 flex space-x-3">
|
||
<a href="https://twitter.com/intent/tweet?text=I%20just%20asked%20my%20HR%20team%20about%20SECURE%20Act%202.0%20student%20loan%20401k%20matching!%20Check%20if%20you%20qualify%20too%3A&url=https://401k.ansonbiggs.com/"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="flex-1 text-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
|
||
Share on Twitter
|
||
</a>
|
||
<a href="https://bsky.app/intent/compose?text=I%20just%20asked%20my%20HR%20team%20about%20SECURE%20Act%202.0%20student%20loan%20401k%20matching!%20Check%20if%20you%20qualify%20too%3A%20https%3A%2F%2F401k.ansonbiggs.com%2F"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="flex-1 text-center px-4 py-2 bg-sky-500 text-white rounded-lg hover:bg-sky-600 transition-colors">
|
||
Share on Bluesky
|
||
</a>
|
||
<a href="https://www.linkedin.com/sharing/share-offsite/?url=https://401k.ansonbiggs.com/"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="flex-1 text-center px-4 py-2 bg-blue-800 text-white rounded-lg hover:bg-blue-900 transition-colors">
|
||
Share on LinkedIn
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="bg-gray-900 text-gray-300 py-12">
|
||
<div class="container mx-auto px-6">
|
||
<div class="grid md:grid-cols-3 gap-8">
|
||
<!-- About -->
|
||
<div>
|
||
<h3 class="text-white font-semibold mb-4">About This Calculator</h3>
|
||
<p class="text-sm">
|
||
A free tool to help employees and employers understand the impact of SECURE Act 2.0
|
||
student loan 401(k) matching provisions.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Resources -->
|
||
<div>
|
||
<h3 class="text-white font-semibold mb-4">Resources</h3>
|
||
<ul class="space-y-2 text-sm">
|
||
<li>
|
||
<a href="https://en.wikipedia.org/wiki/SECURE_2.0_Act"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="hover:text-white transition-colors">
|
||
Wikipedia SECURE Act 2.0 Guidance
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://www.irs.gov/newsroom/irs-issues-important-interim-guidance-on-employer-matching-contributions-made-to-retirement-plans-related-to-employee-student-loan-payments"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="hover:text-white transition-colors">
|
||
IRS SECURE Act 2.0 Guidance
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://educationdata.org/student-loan-debt-statistics"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="hover:text-white transition-colors">
|
||
Education Data Initiative - Student Loan Statistics
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://www.investopedia.com/ask/answers/042415/what-average-annual-return-sp-500.asp"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="hover:text-white transition-colors">
|
||
Investopedia - S&P 500 Historical Returns
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://www.newyorkfed.org/microeconomics/hhdc/background.html"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="hover:text-white transition-colors">
|
||
Federal Reserve Bank of NY - Household Debt Data
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Connect -->
|
||
<div>
|
||
<h3 class="text-white font-semibold mb-4">Connect</h3>
|
||
<ul class="space-y-2 text-sm">
|
||
<li>
|
||
<a href="https://bsky.app/profile/ansonbiggs.com"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="hover:text-white transition-colors">
|
||
Bluesky
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://gitlab.com/MisterBiggs"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="hover:text-white transition-colors">
|
||
GitLab
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://notes.ansonbiggs.com"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="hover:text-white transition-colors">
|
||
Blog
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm">
|
||
<p>
|
||
Built by <a href="https://ansonbiggs.com" class="text-blue-400 hover:text-blue-300">Anson Biggs</a>
|
||
</p>
|
||
<p class="mt-2 text-gray-500">
|
||
This calculator is for informational purposes only. Consult your HR department and financial advisor for specific guidance.
|
||
</p>
|
||
<p class="mt-2 text-gray-600 text-xs">
|
||
© 2025 | Data current as of 2025 - Student loan and financial statistics change frequently
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
function calculator() {
|
||
return {
|
||
salary: 65000,
|
||
totalDebt: 37000,
|
||
loanPayment: 400,
|
||
matchRate: 4,
|
||
currentAge: 28,
|
||
chart: null,
|
||
isUpdating: false,
|
||
errors: {},
|
||
|
||
validateInputs() {
|
||
this.errors = {};
|
||
|
||
// Salary validation
|
||
if (this.salary < 0) {
|
||
this.errors.salary = 'Salary cannot be negative';
|
||
this.salary = 0;
|
||
} else if (this.salary > 10000000) {
|
||
this.errors.salary = 'Salary seems too high';
|
||
this.salary = 10000000;
|
||
}
|
||
|
||
// Debt validation
|
||
if (this.totalDebt < 0) {
|
||
this.errors.totalDebt = 'Debt cannot be negative';
|
||
this.totalDebt = 0;
|
||
} else if (this.totalDebt > 1000000) {
|
||
this.errors.totalDebt = 'Debt amount seems too high';
|
||
this.totalDebt = 1000000;
|
||
}
|
||
|
||
// Loan payment validation
|
||
if (this.loanPayment < 0) {
|
||
this.errors.loanPayment = 'Payment cannot be negative';
|
||
this.loanPayment = 0;
|
||
} else if (this.loanPayment > this.salary / 12) {
|
||
this.errors.loanPayment = 'Payment exceeds monthly salary';
|
||
}
|
||
|
||
// Match rate validation
|
||
if (this.matchRate < 0) {
|
||
this.errors.matchRate = 'Match rate cannot be negative';
|
||
this.matchRate = 0;
|
||
} else if (this.matchRate > 100) {
|
||
this.errors.matchRate = 'Match rate cannot exceed 100%';
|
||
this.matchRate = 100;
|
||
}
|
||
|
||
// Age validation
|
||
if (this.currentAge < 18) {
|
||
this.errors.currentAge = 'Age must be at least 18';
|
||
this.currentAge = 18;
|
||
} else if (this.currentAge > 64) {
|
||
this.errors.currentAge = 'Age must be less than 65';
|
||
this.currentAge = 64;
|
||
}
|
||
|
||
return Object.keys(this.errors).length === 0;
|
||
},
|
||
|
||
exportResults() {
|
||
// Create CSV content
|
||
const headers = ['Parameter', 'Value'];
|
||
const inputData = [
|
||
['Annual Salary', '$' + this.salary.toLocaleString()],
|
||
['Total Student Debt', '$' + this.totalDebt.toLocaleString()],
|
||
['Monthly Loan Payment', '$' + this.loanPayment.toLocaleString()],
|
||
['Employer Match Rate', this.matchRate + '%'],
|
||
['Current Age', this.currentAge],
|
||
['', ''],
|
||
['Results', ''],
|
||
['Loan Payoff Time', this.payoffYears + ' years'],
|
||
['Total Employer Matching', '$' + this.totalMatching.toLocaleString()],
|
||
['Retirement Value at 65', '$' + this.retirementValue.toLocaleString()],
|
||
['', ''],
|
||
['Net Worth Comparison', ''],
|
||
['Age', 'With Program', 'Without Program']
|
||
];
|
||
|
||
// Add chart data
|
||
if (this.chart && this.chart.w && this.chart.w.config) {
|
||
const categories = this.chart.w.config.xaxis.categories;
|
||
const series = this.chart.w.config.series;
|
||
if (categories && series && series.length >= 2) {
|
||
for (let i = 0; i < categories.length; i++) {
|
||
inputData.push([
|
||
categories[i],
|
||
'$' + (series[0].data[i] || 0).toLocaleString(),
|
||
'$' + (series[1].data[i] || 0).toLocaleString()
|
||
]);
|
||
}
|
||
}
|
||
}
|
||
|
||
// Convert to CSV format
|
||
const csvContent = inputData.map(row => row.join(',')).join('\n');
|
||
|
||
// Create download link
|
||
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
||
const link = document.createElement('a');
|
||
const url = URL.createObjectURL(blob);
|
||
link.setAttribute('href', url);
|
||
link.setAttribute('download', 'secure_act_calculator_results.csv');
|
||
link.style.visibility = 'hidden';
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
},
|
||
|
||
shareResults() {
|
||
const shareText = `SECURE Act 2.0 Calculator Results:\n` +
|
||
`💰 With student loan matching, I'll have $${this.retirementValue.toLocaleString()} at retirement!\n` +
|
||
`📊 That's $${this.totalMatching.toLocaleString()} in employer matching over ${this.payoffYears} years.\n\n` +
|
||
`Calculate your own impact:`;
|
||
|
||
const shareUrl = 'https://401k.ansonbiggs.com';
|
||
|
||
if (navigator.share) {
|
||
// Use Web Share API if available (mobile)
|
||
navigator.share({
|
||
title: 'SECURE Act 2.0 Student Loan Matching Calculator',
|
||
text: shareText,
|
||
url: shareUrl
|
||
}).catch(err => {
|
||
// Fallback to copying to clipboard
|
||
this.copyToClipboard(shareText + ' ' + shareUrl);
|
||
});
|
||
} else {
|
||
// Desktop: Copy to clipboard
|
||
this.copyToClipboard(shareText + ' ' + shareUrl);
|
||
}
|
||
},
|
||
|
||
copyToClipboard(text) {
|
||
const textarea = document.createElement('textarea');
|
||
textarea.value = text;
|
||
textarea.style.position = 'fixed';
|
||
textarea.style.opacity = '0';
|
||
document.body.appendChild(textarea);
|
||
textarea.select();
|
||
document.execCommand('copy');
|
||
document.body.removeChild(textarea);
|
||
|
||
// Show success message
|
||
const button = event.target;
|
||
const originalText = button.textContent;
|
||
button.textContent = '✓ Copied!';
|
||
button.classList.add('bg-green-600');
|
||
setTimeout(() => {
|
||
button.textContent = originalText;
|
||
button.classList.remove('bg-green-600');
|
||
}, 2000);
|
||
},
|
||
|
||
get payoffYears() {
|
||
return window.StudentLoanCalculator.calculatePayoffYears(
|
||
parseFloat(this.totalDebt) || 0,
|
||
parseFloat(this.loanPayment) || 0
|
||
);
|
||
},
|
||
|
||
get annualMatch() {
|
||
// Employer matches up to matchRate% of salary
|
||
// The match is based on the loan payments, but capped at matchRate% of salary
|
||
const salary = parseFloat(this.salary) || 0;
|
||
const payment = parseFloat(this.loanPayment) || 0;
|
||
const rate = parseFloat(this.matchRate) || 0;
|
||
|
||
const maxMatch = salary * (rate / 100);
|
||
const loanPaymentAnnual = payment * 12;
|
||
// Employer matches the loan payment amount, up to the match cap
|
||
return Math.min(loanPaymentAnnual, maxMatch);
|
||
},
|
||
|
||
get totalMatching() {
|
||
return this.annualMatch * this.payoffYears;
|
||
},
|
||
|
||
get retirementValue() {
|
||
const annualReturn = 0.07; // 7% average return
|
||
const retirementAge = 65;
|
||
|
||
// Calculate future value with annual contributions during loan period
|
||
let futureValue = 0;
|
||
for (let year = 0; year < this.payoffYears; year++) {
|
||
const yearsToGrow = retirementAge - this.currentAge - year;
|
||
futureValue += this.annualMatch * Math.pow(1 + annualReturn, yearsToGrow);
|
||
}
|
||
|
||
return Math.round(futureValue);
|
||
},
|
||
|
||
init() {
|
||
this.$nextTick(() => {
|
||
this.initChart();
|
||
});
|
||
|
||
// Set up watchers immediately
|
||
let updateTimeout;
|
||
const debouncedUpdate = () => {
|
||
clearTimeout(updateTimeout);
|
||
updateTimeout = setTimeout(() => {
|
||
this.updateChart();
|
||
}, 100);
|
||
};
|
||
|
||
this.$watch('salary', debouncedUpdate);
|
||
this.$watch('totalDebt', debouncedUpdate);
|
||
this.$watch('loanPayment', debouncedUpdate);
|
||
this.$watch('matchRate', debouncedUpdate);
|
||
this.$watch('currentAge', debouncedUpdate);
|
||
},
|
||
|
||
initChart() {
|
||
const options = {
|
||
series: [{
|
||
name: 'Net Worth With Student Loan Matching',
|
||
data: []
|
||
}, {
|
||
name: 'Net Worth Without Program',
|
||
data: []
|
||
}],
|
||
chart: {
|
||
type: 'line',
|
||
height: 400,
|
||
animations: {
|
||
enabled: true,
|
||
easing: 'easeinout',
|
||
speed: 800,
|
||
animateGradually: {
|
||
enabled: true,
|
||
delay: 150
|
||
},
|
||
dynamicAnimation: {
|
||
enabled: true,
|
||
speed: 350
|
||
}
|
||
},
|
||
toolbar: {
|
||
show: false
|
||
}
|
||
},
|
||
stroke: {
|
||
curve: 'smooth',
|
||
width: 3,
|
||
lineCap: 'round'
|
||
},
|
||
colors: ['#2563EB', '#DC2626'],
|
||
fill: {
|
||
opacity: 1
|
||
},
|
||
xaxis: {
|
||
categories: [],
|
||
title: {
|
||
text: 'Age'
|
||
},
|
||
labels: {
|
||
show: true,
|
||
rotate: -45,
|
||
rotateAlways: false,
|
||
hideOverlappingLabels: false,
|
||
showDuplicates: true,
|
||
trim: false
|
||
}
|
||
},
|
||
annotations: {
|
||
xaxis: []
|
||
},
|
||
yaxis: {
|
||
title: {
|
||
text: 'Net Worth'
|
||
},
|
||
labels: {
|
||
formatter: function(value) {
|
||
return '$' + value.toLocaleString();
|
||
}
|
||
}
|
||
},
|
||
legend: {
|
||
position: 'top',
|
||
horizontalAlign: 'center'
|
||
},
|
||
tooltip: {
|
||
y: {
|
||
formatter: function(value) {
|
||
return '$' + value.toLocaleString();
|
||
}
|
||
}
|
||
},
|
||
grid: {
|
||
borderColor: '#e5e7eb',
|
||
strokeDashArray: 4,
|
||
xaxis: {
|
||
lines: {
|
||
show: true
|
||
}
|
||
},
|
||
yaxis: {
|
||
lines: {
|
||
show: true
|
||
}
|
||
}
|
||
},
|
||
markers: {
|
||
size: 0,
|
||
hover: {
|
||
size: 6,
|
||
sizeOffset: 3
|
||
}
|
||
}
|
||
};
|
||
|
||
this.chart = new ApexCharts(document.querySelector("#savingsChart"), options);
|
||
this.chart.render();
|
||
|
||
// Perform initial update after chart is created
|
||
this.$nextTick(() => {
|
||
this.updateChart();
|
||
});
|
||
},
|
||
|
||
updateChart() {
|
||
if (!this.chart || this.isUpdating) return;
|
||
|
||
this.isUpdating = true;
|
||
|
||
// Use the extracted calculator
|
||
const results = window.StudentLoanCalculator.calculateNetWorthComparison({
|
||
salary: parseFloat(this.salary) || 0,
|
||
totalDebt: parseFloat(this.totalDebt) || 0,
|
||
monthlyPayment: parseFloat(this.loanPayment) || 0,
|
||
matchRate: parseFloat(this.matchRate) || 0,
|
||
currentAge: parseFloat(this.currentAge) || 28
|
||
});
|
||
|
||
// Calculate payoff age for annotation
|
||
const currentAge = parseFloat(this.currentAge) || 28;
|
||
const payoffAge = currentAge + results.payoffYears;
|
||
|
||
// Find the index of the payoff age in the categories
|
||
const categories = results.ages.map(age => 'Age ' + age);
|
||
const payoffIndex = results.ages.findIndex(age => age >= payoffAge);
|
||
|
||
// Clear and add annotation
|
||
this.chart.clearAnnotations();
|
||
|
||
if (payoffIndex >= 0 && payoffIndex < categories.length) {
|
||
this.chart.addXaxisAnnotation({
|
||
x: categories[payoffIndex],
|
||
borderColor: '#10B981',
|
||
borderWidth: 3,
|
||
strokeDashArray: 0,
|
||
label: {
|
||
text: 'Loans Paid Off',
|
||
borderColor: '#10B981',
|
||
style: {
|
||
color: '#fff',
|
||
background: '#10B981',
|
||
fontSize: '12px',
|
||
fontWeight: 600
|
||
},
|
||
orientation: 'horizontal'
|
||
}
|
||
});
|
||
}
|
||
|
||
this.chart.updateOptions({
|
||
xaxis: {
|
||
categories: categories
|
||
}
|
||
});
|
||
|
||
this.chart.updateSeries([{
|
||
name: 'Net Worth With Student Loan Matching',
|
||
data: results.withProgram
|
||
}, {
|
||
name: 'Net Worth Without Program',
|
||
data: results.withoutProgram
|
||
}]);
|
||
|
||
this.isUpdating = false;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |