{"id":689,"date":"2026-08-17T06:43:26","date_gmt":"2026-08-17T06:43:26","guid":{"rendered":"https:\/\/www.stockmaster.in\/universe\/?p=689"},"modified":"2026-08-17T06:44:07","modified_gmt":"2026-08-17T06:44:07","slug":"debt-vs-401k-calculator","status":"publish","type":"post","link":"https:\/\/www.stockmaster.in\/universe\/debt-vs-401k-calculator\/","title":{"rendered":"Debt vs 401(k) Calculator"},"content":{"rendered":"<div id=\"d401k-calculator\">\r\n\r\n  <div class=\"d401k-container\">\r\n\r\n    <div class=\"d401k-hero\">\r\n\r\n      <div class=\"d401k-badge\">\r\n        USA DEBT VS 401(K) CALCULATOR\r\n      <\/div>\r\n\r\n      <h2>Debt vs 401(k) Calculator<\/h2>\r\n\r\n      <p>\r\n        Compare using extra money to pay down debt versus contributing\r\n        more to your 401(k) and see how the two strategies could affect\r\n        your finances over time.\r\n      <\/p>\r\n\r\n    <\/div>\r\n\r\n\r\n    <div class=\"d401k-main\">\r\n\r\n      <!-- INPUTS -->\r\n\r\n      <div class=\"d401k-input-card\">\r\n\r\n        <h3>Your Financial Situation<\/h3>\r\n\r\n\r\n        <div class=\"d401k-field\">\r\n\r\n          <label for=\"d401k-debt\">\r\n            Current Debt Balance\r\n          <\/label>\r\n\r\n          <div class=\"d401k-input-wrap\">\r\n\r\n            <span>$<\/span>\r\n\r\n            <input\r\n              type=\"number\"\r\n              id=\"d401k-debt\"\r\n              value=\"20000\"\r\n              min=\"0\"\r\n              step=\"0.01\"\r\n            >\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"d401k-field\">\r\n\r\n          <label for=\"d401k-apr\">\r\n            Debt Interest Rate (APR)\r\n          <\/label>\r\n\r\n          <div class=\"d401k-input-wrap\">\r\n\r\n            <input\r\n              type=\"number\"\r\n              id=\"d401k-apr\"\r\n              value=\"12\"\r\n              min=\"0\"\r\n              step=\"0.01\"\r\n            >\r\n\r\n            <span>%<\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"d401k-field\">\r\n\r\n          <label for=\"d401k-payment\">\r\n            Current Monthly Debt Payment\r\n          <\/label>\r\n\r\n          <div class=\"d401k-input-wrap\">\r\n\r\n            <span>$<\/span>\r\n\r\n            <input\r\n              type=\"number\"\r\n              id=\"d401k-payment\"\r\n              value=\"500\"\r\n              min=\"0\"\r\n              step=\"0.01\"\r\n            >\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"d401k-field\">\r\n\r\n          <label for=\"d401k-extra\">\r\n            Extra Money Available Each Month\r\n          <\/label>\r\n\r\n          <div class=\"d401k-input-wrap\">\r\n\r\n            <span>$<\/span>\r\n\r\n            <input\r\n              type=\"number\"\r\n              id=\"d401k-extra\"\r\n              value=\"500\"\r\n              min=\"0\"\r\n              step=\"0.01\"\r\n            >\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <hr>\r\n\r\n\r\n        <h3 class=\"d401k-subheading\">\r\n          401(k) Information\r\n        <\/h3>\r\n\r\n\r\n        <div class=\"d401k-field\">\r\n\r\n          <label for=\"d401k-balance\">\r\n            Current 401(k) Balance\r\n          <\/label>\r\n\r\n          <div class=\"d401k-input-wrap\">\r\n\r\n            <span>$<\/span>\r\n\r\n            <input\r\n              type=\"number\"\r\n              id=\"d401k-balance\"\r\n              value=\"25000\"\r\n              min=\"0\"\r\n              step=\"0.01\"\r\n            >\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"d401k-field\">\r\n\r\n          <label for=\"d401k-contribution\">\r\n            Current Monthly 401(k) Contribution\r\n          <\/label>\r\n\r\n          <div class=\"d401k-input-wrap\">\r\n\r\n            <span>$<\/span>\r\n\r\n            <input\r\n              type=\"number\"\r\n              id=\"d401k-contribution\"\r\n              value=\"500\"\r\n              min=\"0\"\r\n              step=\"0.01\"\r\n            >\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"d401k-field\">\r\n\r\n          <label for=\"d401k-match\">\r\n            Employer Match\r\n          <\/label>\r\n\r\n          <div class=\"d401k-input-wrap\">\r\n\r\n            <input\r\n              type=\"number\"\r\n              id=\"d401k-match\"\r\n              value=\"50\"\r\n              min=\"0\"\r\n              max=\"100\"\r\n              step=\"0.01\"\r\n            >\r\n\r\n            <span>%<\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"d401k-field\">\r\n\r\n          <label for=\"d401k-match-limit\">\r\n            Employer Match Limit\r\n          <\/label>\r\n\r\n          <div class=\"d401k-input-wrap\">\r\n\r\n            <input\r\n              type=\"number\"\r\n              id=\"d401k-match-limit\"\r\n              value=\"6\"\r\n              min=\"0\"\r\n              max=\"100\"\r\n              step=\"0.01\"\r\n            >\r\n\r\n            <span>% of salary<\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"d401k-field\">\r\n\r\n          <label for=\"d401k-salary\">\r\n            Annual Salary\r\n          <\/label>\r\n\r\n          <div class=\"d401k-input-wrap\">\r\n\r\n            <span>$<\/span>\r\n\r\n            <input\r\n              type=\"number\"\r\n              id=\"d401k-salary\"\r\n              value=\"75000\"\r\n              min=\"0\"\r\n              step=\"100\"\r\n            >\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"d401k-field\">\r\n\r\n          <label for=\"d401k-return\">\r\n            Expected Annual 401(k) Return\r\n          <\/label>\r\n\r\n          <div class=\"d401k-input-wrap\">\r\n\r\n            <input\r\n              type=\"number\"\r\n              id=\"d401k-return\"\r\n              value=\"7\"\r\n              min=\"0\"\r\n              max=\"30\"\r\n              step=\"0.1\"\r\n            >\r\n\r\n            <span>%<\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"d401k-field\">\r\n\r\n          <label for=\"d401k-years\">\r\n            Comparison Period\r\n          <\/label>\r\n\r\n          <div class=\"d401k-input-wrap\">\r\n\r\n            <input\r\n              type=\"number\"\r\n              id=\"d401k-years\"\r\n              value=\"10\"\r\n              min=\"1\"\r\n              max=\"50\"\r\n              step=\"1\"\r\n            >\r\n\r\n            <span>years<\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <button\r\n          type=\"button\"\r\n          id=\"d401k-calculate\"\r\n        >\r\n          Compare Strategies\r\n        <\/button>\r\n\r\n\r\n        <button\r\n          type=\"button\"\r\n          id=\"d401k-reset\"\r\n          class=\"d401k-reset\"\r\n        >\r\n          Reset Calculator\r\n        <\/button>\r\n\r\n      <\/div>\r\n\r\n\r\n      <!-- RESULTS -->\r\n\r\n      <div class=\"d401k-results\">\r\n\r\n        <div\r\n          id=\"d401k-error\"\r\n          class=\"d401k-error\"\r\n        ><\/div>\r\n\r\n\r\n        <div class=\"d401k-result-banner\">\r\n\r\n          <div>\r\n\r\n            <span>\r\n              DEBT-FIRST RESULT\r\n            <\/span>\r\n\r\n            <strong id=\"d401k-debt-result\">\r\n              \u2014\r\n            <\/strong>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"d401k-banner-right\">\r\n\r\n            <span>\r\n              401(K)-FIRST RESULT\r\n            <\/span>\r\n\r\n            <strong id=\"d401k-invest-result\">\r\n              \u2014\r\n            <\/strong>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- STRATEGY CARDS -->\r\n\r\n        <div class=\"d401k-strategy-grid\">\r\n\r\n          <div class=\"d401k-strategy debt-strategy\">\r\n\r\n            <div class=\"d401k-strategy-icon\">\r\n              D\r\n            <\/div>\r\n\r\n            <h3>\r\n              Debt-First\r\n            <\/h3>\r\n\r\n            <p>\r\n              Use your extra monthly money to pay down debt faster.\r\n            <\/p>\r\n\r\n            <div class=\"d401k-strategy-value\">\r\n              <span>Debt Interest Avoided<\/span>\r\n              <strong id=\"d401k-debt-saved\">\r\n                $0\r\n              <\/strong>\r\n            <\/div>\r\n\r\n            <div class=\"d401k-strategy-value\">\r\n              <span>Debt-Free Time<\/span>\r\n              <strong id=\"d401k-debt-time\">\r\n                \u2014\r\n              <\/strong>\r\n            <\/div>\r\n\r\n            <div class=\"d401k-strategy-value\">\r\n              <span>401(k) Value<\/span>\r\n              <strong id=\"d401k-debt-401k\">\r\n                $0\r\n              <\/strong>\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"d401k-strategy invest-strategy\">\r\n\r\n            <div class=\"d401k-strategy-icon\">\r\n              401K\r\n            <\/div>\r\n\r\n            <h3>\r\n              401(k)-First\r\n            <\/h3>\r\n\r\n            <p>\r\n              Keep the normal debt payment and invest the extra money.\r\n            <\/p>\r\n\r\n            <div class=\"d401k-strategy-value\">\r\n              <span>Debt Interest Paid<\/span>\r\n              <strong id=\"d401k-invest-interest\">\r\n                $0\r\n              <\/strong>\r\n            <\/div>\r\n\r\n            <div class=\"d401k-strategy-value\">\r\n              <span>Debt-Free Time<\/span>\r\n              <strong id=\"d401k-invest-time\">\r\n                \u2014\r\n              <\/strong>\r\n            <\/div>\r\n\r\n            <div class=\"d401k-strategy-value\">\r\n              <span>401(k) Value<\/span>\r\n              <strong id=\"d401k-invest-401k\">\r\n                $0\r\n              <\/strong>\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- MATCH -->\r\n\r\n        <div class=\"d401k-match-box\">\r\n\r\n          <div>\r\n\r\n            <strong>\r\n              Estimated Employer Match\r\n            <\/strong>\r\n\r\n            <small>\r\n              Based on the salary, contribution and match assumptions entered above.\r\n            <\/small>\r\n\r\n          <\/div>\r\n\r\n          <span id=\"d401k-match-value\">\r\n            $0\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- COMPARISON -->\r\n\r\n        <div class=\"d401k-section\">\r\n\r\n          <div class=\"d401k-heading\">\r\n\r\n            <h3>\r\n              Strategy Comparison\r\n            <\/h3>\r\n\r\n            <p>\r\n              Estimated values after your selected comparison period.\r\n            <\/p>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"d401k-comparison\">\r\n\r\n            <div class=\"d401k-comparison-row d401k-head\">\r\n\r\n              <div>Metric<\/div>\r\n\r\n              <div>Debt-First<\/div>\r\n\r\n              <div>401(k)-First<\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"d401k-comparison-row\">\r\n\r\n              <div>Debt Balance<\/div>\r\n\r\n              <div id=\"d401k-c-debt\">\r\n                $0\r\n              <\/div>\r\n\r\n              <div id=\"d401k-i-debt\">\r\n                $0\r\n              <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"d401k-comparison-row\">\r\n\r\n              <div>Debt Interest Paid<\/div>\r\n\r\n              <div id=\"d401k-c-interest\">\r\n                $0\r\n              <\/div>\r\n\r\n              <div id=\"d401k-i-interest\">\r\n                $0\r\n              <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"d401k-comparison-row\">\r\n\r\n              <div>401(k) Value<\/div>\r\n\r\n              <div id=\"d401k-c-401k\">\r\n                $0\r\n              <\/div>\r\n\r\n              <div id=\"d401k-i-401k\">\r\n                $0\r\n              <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"d401k-comparison-row\">\r\n\r\n              <div>Total Financial Position<\/div>\r\n\r\n              <div id=\"d401k-c-position\">\r\n                $0\r\n              <\/div>\r\n\r\n              <div id=\"d401k-i-position\">\r\n                $0\r\n              <\/div>\r\n\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- DIFFERENCE -->\r\n\r\n        <div class=\"d401k-difference\">\r\n\r\n          <span>\r\n            Estimated Difference in Financial Position\r\n          <\/span>\r\n\r\n          <strong id=\"d401k-difference-value\">\r\n            $0\r\n          <\/strong>\r\n\r\n          <p id=\"d401k-difference-text\"><\/p>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- CHART -->\r\n\r\n        <div class=\"d401k-section\">\r\n\r\n          <div class=\"d401k-heading\">\r\n\r\n            <h3>\r\n              401(k) Growth Comparison\r\n            <\/h3>\r\n\r\n            <p>\r\n              Estimated 401(k) value under each strategy.\r\n            <\/p>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"d401k-chart\">\r\n\r\n            <canvas id=\"d401k-chart-canvas\"><\/canvas>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- YEAR TABLE -->\r\n\r\n        <div class=\"d401k-section\">\r\n\r\n          <div class=\"d401k-heading\">\r\n\r\n            <h3>\r\n              Year-by-Year Comparison\r\n            <\/h3>\r\n\r\n            <p>\r\n              Estimated debt and 401(k) values over time.\r\n            <\/p>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"d401k-table-wrap\">\r\n\r\n            <table class=\"d401k-table\">\r\n\r\n              <thead>\r\n\r\n                <tr>\r\n\r\n                  <th>Year<\/th>\r\n\r\n                  <th>Debt-First Debt<\/th>\r\n\r\n                  <th>Debt-First 401(k)<\/th>\r\n\r\n                  <th>401(k)-First Debt<\/th>\r\n\r\n                  <th>401(k)-First 401(k)<\/th>\r\n\r\n                <\/tr>\r\n\r\n              <\/thead>\r\n\r\n              <tbody id=\"d401k-year-body\"><\/tbody>\r\n\r\n            <\/table>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- IMPORTANT -->\r\n\r\n        <div class=\"d401k-info\">\r\n\r\n          <h3>\r\n            Important Considerations\r\n          <\/h3>\r\n\r\n          <ul>\r\n\r\n            <li>\r\n              Employer matching contributions can make contributing enough\r\n              to receive the available match particularly valuable.\r\n            <\/li>\r\n\r\n            <li>\r\n              Paying down debt produces a reduction in interest costs,\r\n              while investment returns are uncertain.\r\n            <\/li>\r\n\r\n            <li>\r\n              A high-interest debt may have a stronger mathematical\r\n              case for accelerated repayment than low-interest debt.\r\n            <\/li>\r\n\r\n            <li>\r\n              Your emergency savings, tax situation, loan type,\r\n              employer plan rules and other financial goals also matter.\r\n            <\/li>\r\n\r\n          <\/ul>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- DISCLAIMER -->\r\n\r\n        <div class=\"d401k-disclaimer\">\r\n\r\n          <strong>Disclaimer:<\/strong>\r\n\r\n          This calculator provides hypothetical estimates for educational\r\n          purposes only. Investment returns are not guaranteed, actual\r\n          401(k) returns can vary, and taxes, fees, investment expenses,\r\n          contribution limits, vesting rules and employer plan provisions\r\n          are not fully modeled. Debt interest calculations are estimates\r\n          and actual loan terms may differ. This tool does not provide\r\n          personalized financial, tax, legal or investment advice.\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- SEO CONTENT -->\r\n\r\n    <div class=\"d401k-content\">\r\n\r\n      <h3>\r\n        How the Debt vs 401(k) Calculator Works\r\n      <\/h3>\r\n\r\n      <p>\r\n        The Debt vs 401(k) Calculator compares two hypothetical strategies\r\n        for using extra monthly money. The first strategy directs the extra\r\n        amount toward paying down debt faster, while the second strategy\r\n        keeps the normal debt payment and invests the extra money in a\r\n        401(k). The calculator considers the debt interest rate, monthly\r\n        payment, expected investment return, employer matching contribution,\r\n        current 401(k) balance and selected time period.\r\n      <\/p>\r\n\r\n\r\n      <h3>\r\n        Debt Repayment vs 401(k) Contributions\r\n      <\/h3>\r\n\r\n      <p>\r\n        Paying debt can reduce future interest costs, while contributing to\r\n        a 401(k) gives your money an opportunity to grow through investments.\r\n        Employer matching contributions may also add value to eligible\r\n        retirement contributions. The right approach depends on factors\r\n        including your debt interest rate, available employer match,\r\n        emergency savings, investment assumptions and financial goals.\r\n      <\/p>\r\n\r\n\r\n      <h3>\r\n        Should I Pay Off Debt or Invest in My 401(k)?\r\n      <\/h3>\r\n\r\n      <p>\r\n        There is no universal answer. High-interest debt can be expensive\r\n        to carry, while giving up an available employer match can mean\r\n        missing part of your compensation. Use the calculator to compare\r\n        hypothetical outcomes under different assumptions and discuss\r\n        important decisions with a qualified financial professional when\r\n        appropriate.\r\n      <\/p>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<style>\r\n\r\n\/* ==================================================\r\n   DEBT VS 401(K) CALCULATOR USA\r\n   PRIMARY COLOR: #7C3AED\r\n================================================== *\/\r\n\r\n#d401k-calculator {\r\n\r\n  --d401k-primary: #7C3AED;\r\n  --d401k-primary-dark: #6D28D9;\r\n  --d401k-primary-light: #F3E8FF;\r\n\r\n  --d401k-text: #111827;\r\n  --d401k-muted: #6B7280;\r\n\r\n  --d401k-border: #E5E7EB;\r\n  --d401k-green: #15803D;\r\n  --d401k-green-bg: #F0FDF4;\r\n\r\n  --d401k-red: #B91C1C;\r\n  --d401k-red-bg: #FEF2F2;\r\n\r\n  max-width: 1100px;\r\n\r\n  margin: 30px auto;\r\n\r\n  font-family:\r\n    Arial,\r\n    Helvetica,\r\n    sans-serif;\r\n\r\n  color:\r\n    var(--d401k-text);\r\n\r\n  line-height: 1.5;\r\n\r\n}\r\n\r\n\r\n#d401k-calculator *,\r\n#d401k-calculator *::before,\r\n#d401k-calculator *::after {\r\n\r\n  box-sizing: border-box;\r\n\r\n}\r\n\r\n\r\n\/* HERO *\/\r\n\r\n.d401k-hero {\r\n\r\n  text-align: center;\r\n\r\n  margin-bottom: 25px;\r\n\r\n}\r\n\r\n\r\n.d401k-badge {\r\n\r\n  display: inline-block;\r\n\r\n  padding: 6px 12px;\r\n\r\n  border-radius: 50px;\r\n\r\n  background:\r\n    var(--d401k-primary-light);\r\n\r\n  color:\r\n    var(--d401k-primary-dark);\r\n\r\n  font-size: 11px;\r\n\r\n  font-weight: 800;\r\n\r\n  letter-spacing: .5px;\r\n\r\n  margin-bottom: 10px;\r\n\r\n}\r\n\r\n\r\n.d401k-hero h2 {\r\n\r\n  margin:\r\n    0 0 10px;\r\n\r\n  font-size: 32px;\r\n\r\n  line-height: 1.2;\r\n\r\n}\r\n\r\n\r\n.d401k-hero p {\r\n\r\n  max-width: 750px;\r\n\r\n  margin: auto;\r\n\r\n  color:\r\n    var(--d401k-muted);\r\n\r\n  font-size: 15px;\r\n\r\n}\r\n\r\n\r\n\/* MAIN *\/\r\n\r\n.d401k-main {\r\n\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    340px\r\n    1fr;\r\n\r\n  gap: 22px;\r\n\r\n  align-items: start;\r\n\r\n}\r\n\r\n\r\n\/* INPUT *\/\r\n\r\n.d401k-input-card {\r\n\r\n  background:\r\n    #fff;\r\n\r\n  border:\r\n    1px solid\r\n    var(--d401k-border);\r\n\r\n  border-radius: 14px;\r\n\r\n  padding: 22px;\r\n\r\n  box-shadow:\r\n    0 4px 18px\r\n    rgba(0,0,0,.05);\r\n\r\n  position: sticky;\r\n\r\n  top: 20px;\r\n\r\n}\r\n\r\n\r\n.d401k-input-card h3 {\r\n\r\n  margin:\r\n    0 0 20px;\r\n\r\n  font-size: 20px;\r\n\r\n}\r\n\r\n\r\n.d401k-subheading {\r\n\r\n  margin-top:\r\n    20px !important;\r\n\r\n  margin-bottom:\r\n    16px !important;\r\n\r\n}\r\n\r\n\r\n.d401k-input-card hr {\r\n\r\n  border: 0;\r\n\r\n  border-top:\r\n    1px solid\r\n    var(--d401k-border);\r\n\r\n  margin:\r\n    22px 0;\r\n\r\n}\r\n\r\n\r\n.d401k-field {\r\n\r\n  margin-bottom: 16px;\r\n\r\n}\r\n\r\n\r\n.d401k-field label {\r\n\r\n  display: block;\r\n\r\n  margin-bottom: 7px;\r\n\r\n  font-size: 13px;\r\n\r\n  font-weight: 700;\r\n\r\n}\r\n\r\n\r\n.d401k-input-wrap {\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  height: 48px;\r\n\r\n  border:\r\n    1px solid\r\n    #D1D5DB;\r\n\r\n  border-radius: 8px;\r\n\r\n  background:\r\n    #fff;\r\n\r\n  overflow: hidden;\r\n\r\n}\r\n\r\n\r\n.d401k-input-wrap:focus-within {\r\n\r\n  border-color:\r\n    var(--d401k-primary);\r\n\r\n  box-shadow:\r\n    0 0 0 3px\r\n    rgba(124,58,237,.12);\r\n\r\n}\r\n\r\n\r\n.d401k-input-wrap span {\r\n\r\n  padding:\r\n    0 11px;\r\n\r\n  color:\r\n    var(--d401k-muted);\r\n\r\n  font-size: 12px;\r\n\r\n  font-weight: 600;\r\n\r\n  white-space: nowrap;\r\n\r\n}\r\n\r\n\r\n.d401k-input-wrap input {\r\n\r\n  width: 100%;\r\n\r\n  height: 100%;\r\n\r\n  border: 0;\r\n\r\n  outline: 0;\r\n\r\n  padding:\r\n    0 10px;\r\n\r\n  background:\r\n    transparent;\r\n\r\n  color:\r\n    var(--d401k-text);\r\n\r\n  font-size: 15px;\r\n\r\n}\r\n\r\n\r\n#d401k-calculate {\r\n\r\n  width: 100%;\r\n\r\n  height: 50px;\r\n\r\n  border: 0;\r\n\r\n  border-radius: 8px;\r\n\r\n  background:\r\n    var(--d401k-primary);\r\n\r\n  color: #fff;\r\n\r\n  font-size: 16px;\r\n\r\n  font-weight: 800;\r\n\r\n  cursor: pointer;\r\n\r\n}\r\n\r\n\r\n#d401k-calculate:hover {\r\n\r\n  background:\r\n    var(--d401k-primary-dark);\r\n\r\n}\r\n\r\n\r\n.d401k-reset {\r\n\r\n  width: 100%;\r\n\r\n  height: 40px;\r\n\r\n  margin-top: 7px;\r\n\r\n  border: 0;\r\n\r\n  background:\r\n    transparent;\r\n\r\n  color:\r\n    var(--d401k-muted);\r\n\r\n  cursor: pointer;\r\n\r\n  font-size: 13px;\r\n\r\n}\r\n\r\n\r\n\/* ERROR *\/\r\n\r\n.d401k-error {\r\n\r\n  display: none;\r\n\r\n  margin-bottom: 17px;\r\n\r\n  padding: 13px;\r\n\r\n  border-radius: 9px;\r\n\r\n  background:\r\n    var(--d401k-red-bg);\r\n\r\n  color:\r\n    var(--d401k-red);\r\n\r\n  font-size: 13px;\r\n\r\n}\r\n\r\n\r\n\/* BANNER *\/\r\n\r\n.d401k-result-banner {\r\n\r\n  display: flex;\r\n\r\n  justify-content: space-between;\r\n\r\n  gap: 15px;\r\n\r\n  padding: 23px;\r\n\r\n  border-radius: 14px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      var(--d401k-primary),\r\n      var(--d401k-primary-dark)\r\n    );\r\n\r\n  color: #fff;\r\n\r\n  box-shadow:\r\n    0 8px 25px\r\n    rgba(124,58,237,.22);\r\n\r\n}\r\n\r\n\r\n.d401k-result-banner span {\r\n\r\n  display: block;\r\n\r\n  font-size: 10px;\r\n\r\n  opacity: .82;\r\n\r\n  font-weight: 800;\r\n\r\n  margin-bottom: 5px;\r\n\r\n}\r\n\r\n\r\n.d401k-result-banner strong {\r\n\r\n  display: block;\r\n\r\n  font-size: 24px;\r\n\r\n}\r\n\r\n\r\n.d401k-banner-right {\r\n\r\n  text-align: right;\r\n\r\n}\r\n\r\n\r\n\/* STRATEGIES *\/\r\n\r\n.d401k-strategy-grid {\r\n\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    1fr 1fr;\r\n\r\n  gap: 14px;\r\n\r\n  margin-top: 15px;\r\n\r\n}\r\n\r\n\r\n.d401k-strategy {\r\n\r\n  background: #fff;\r\n\r\n  border:\r\n    1px solid\r\n    var(--d401k-border);\r\n\r\n  border-radius: 12px;\r\n\r\n  padding: 19px;\r\n\r\n}\r\n\r\n\r\n.d401k-strategy-icon {\r\n\r\n  display: inline-flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: center;\r\n\r\n  min-width: 38px;\r\n\r\n  height: 32px;\r\n\r\n  padding: 0 8px;\r\n\r\n  border-radius: 7px;\r\n\r\n  background:\r\n    var(--d401k-primary-light);\r\n\r\n  color:\r\n    var(--d401k-primary-dark);\r\n\r\n  font-size: 12px;\r\n\r\n  font-weight: 900;\r\n\r\n}\r\n\r\n\r\n.d401k-strategy h3 {\r\n\r\n  margin:\r\n    11px 0 5px;\r\n\r\n  font-size: 19px;\r\n\r\n}\r\n\r\n\r\n.d401k-strategy p {\r\n\r\n  margin:\r\n    0 0 15px;\r\n\r\n  color:\r\n    var(--d401k-muted);\r\n\r\n  font-size: 13px;\r\n\r\n}\r\n\r\n\r\n.d401k-strategy-value {\r\n\r\n  display: flex;\r\n\r\n  justify-content: space-between;\r\n\r\n  gap: 10px;\r\n\r\n  padding:\r\n    10px 0;\r\n\r\n  border-top:\r\n    1px solid\r\n    var(--d401k-border);\r\n\r\n}\r\n\r\n\r\n.d401k-strategy-value span {\r\n\r\n  color:\r\n    var(--d401k-muted);\r\n\r\n  font-size: 12px;\r\n\r\n}\r\n\r\n\r\n.d401k-strategy-value strong {\r\n\r\n  font-size: 13px;\r\n\r\n}\r\n\r\n\r\n\/* MATCH *\/\r\n\r\n.d401k-match-box {\r\n\r\n  display: flex;\r\n\r\n  justify-content: space-between;\r\n\r\n  align-items: center;\r\n\r\n  gap: 15px;\r\n\r\n  margin-top: 15px;\r\n\r\n  padding: 18px;\r\n\r\n  border:\r\n    1px solid\r\n    #BBF7D0;\r\n\r\n  border-radius: 11px;\r\n\r\n  background:\r\n    var(--d401k-green-bg);\r\n\r\n}\r\n\r\n\r\n.d401k-match-box strong {\r\n\r\n  display: block;\r\n\r\n}\r\n\r\n\r\n.d401k-match-box small {\r\n\r\n  display: block;\r\n\r\n  margin-top: 4px;\r\n\r\n  color:\r\n    var(--d401k-muted);\r\n\r\n  font-size: 11px;\r\n\r\n}\r\n\r\n\r\n.d401k-match-box span {\r\n\r\n  color:\r\n    var(--d401k-green);\r\n\r\n  font-size: 22px;\r\n\r\n  font-weight: 800;\r\n\r\n}\r\n\r\n\r\n\/* SECTIONS *\/\r\n\r\n.d401k-section {\r\n\r\n  margin-top: 26px;\r\n\r\n}\r\n\r\n\r\n.d401k-heading h3 {\r\n\r\n  margin:\r\n    0 0 5px;\r\n\r\n  font-size: 20px;\r\n\r\n}\r\n\r\n\r\n.d401k-heading p {\r\n\r\n  margin:\r\n    0 0 14px;\r\n\r\n  color:\r\n    var(--d401k-muted);\r\n\r\n  font-size: 13px;\r\n\r\n}\r\n\r\n\r\n\/* COMPARISON *\/\r\n\r\n.d401k-comparison {\r\n\r\n  overflow-x: auto;\r\n\r\n  border:\r\n    1px solid\r\n    var(--d401k-border);\r\n\r\n  border-radius: 10px;\r\n\r\n}\r\n\r\n\r\n.d401k-comparison-row {\r\n\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    1.5fr 1fr 1fr;\r\n\r\n  min-width: 500px;\r\n\r\n}\r\n\r\n\r\n.d401k-comparison-row > div {\r\n\r\n  padding:\r\n    12px;\r\n\r\n  border-top:\r\n    1px solid\r\n    var(--d401k-border);\r\n\r\n  font-size: 13px;\r\n\r\n}\r\n\r\n\r\n.d401k-comparison-row:first-child > div {\r\n\r\n  border-top: 0;\r\n\r\n}\r\n\r\n\r\n.d401k-head {\r\n\r\n  background:\r\n    #F9FAFB;\r\n\r\n  font-weight: 800;\r\n\r\n}\r\n\r\n\r\n.d401k-comparison-row > div:not(:first-child) {\r\n\r\n  text-align: right;\r\n\r\n}\r\n\r\n\r\n\/* DIFFERENCE *\/\r\n\r\n.d401k-difference {\r\n\r\n  margin-top: 20px;\r\n\r\n  padding: 20px;\r\n\r\n  border-radius: 11px;\r\n\r\n  background:\r\n    var(--d401k-primary-light);\r\n\r\n  border-left:\r\n    4px solid\r\n    var(--d401k-primary);\r\n\r\n}\r\n\r\n\r\n.d401k-difference > span {\r\n\r\n  display: block;\r\n\r\n  color:\r\n    var(--d401k-muted);\r\n\r\n  font-size: 12px;\r\n\r\n}\r\n\r\n\r\n.d401k-difference > strong {\r\n\r\n  display: block;\r\n\r\n  margin-top: 5px;\r\n\r\n  color:\r\n    var(--d401k-primary-dark);\r\n\r\n  font-size: 27px;\r\n\r\n}\r\n\r\n\r\n.d401k-difference p {\r\n\r\n  margin:\r\n    5px 0 0;\r\n\r\n  font-size: 13px;\r\n\r\n}\r\n\r\n\r\n\/* CHART *\/\r\n\r\n.d401k-chart {\r\n\r\n  width: 100%;\r\n\r\n  height: 300px;\r\n\r\n  padding: 15px;\r\n\r\n  background: #fff;\r\n\r\n  border:\r\n    1px solid\r\n    var(--d401k-border);\r\n\r\n  border-radius: 10px;\r\n\r\n}\r\n\r\n\r\n#d401k-chart-canvas {\r\n\r\n  width: 100%;\r\n\r\n  height: 100%;\r\n\r\n}\r\n\r\n\r\n\/* TABLE *\/\r\n\r\n.d401k-table-wrap {\r\n\r\n  overflow-x: auto;\r\n\r\n  border:\r\n    1px solid\r\n    var(--d401k-border);\r\n\r\n  border-radius: 10px;\r\n\r\n}\r\n\r\n\r\n.d401k-table {\r\n\r\n  width: 100%;\r\n\r\n  min-width: 680px;\r\n\r\n  border-collapse:\r\n    collapse;\r\n\r\n}\r\n\r\n\r\n.d401k-table th {\r\n\r\n  background:\r\n    #F9FAFB;\r\n\r\n  padding: 12px;\r\n\r\n  font-size: 11px;\r\n\r\n  text-align: left;\r\n\r\n  white-space: nowrap;\r\n\r\n}\r\n\r\n\r\n.d401k-table td {\r\n\r\n  padding: 12px;\r\n\r\n  border-top:\r\n    1px solid\r\n    var(--d401k-border);\r\n\r\n  font-size: 12px;\r\n\r\n}\r\n\r\n\r\n.d401k-table tbody tr:hover {\r\n\r\n  background:\r\n    #FAF5FF;\r\n\r\n}\r\n\r\n\r\n\/* INFO *\/\r\n\r\n.d401k-info {\r\n\r\n  margin-top: 25px;\r\n\r\n  padding: 20px;\r\n\r\n  background:\r\n    #F9FAFB;\r\n\r\n  border:\r\n    1px solid\r\n    var(--d401k-border);\r\n\r\n  border-radius: 11px;\r\n\r\n}\r\n\r\n\r\n.d401k-info h3 {\r\n\r\n  margin:\r\n    0 0 10px;\r\n\r\n  font-size: 18px;\r\n\r\n}\r\n\r\n\r\n.d401k-info ul {\r\n\r\n  margin:\r\n    0;\r\n\r\n  padding-left: 20px;\r\n\r\n}\r\n\r\n\r\n.d401k-info li {\r\n\r\n  margin-bottom: 8px;\r\n\r\n  color:\r\n    #4B5563;\r\n\r\n  font-size: 13px;\r\n\r\n}\r\n\r\n\r\n\/* CONTENT *\/\r\n\r\n.d401k-content {\r\n\r\n  margin-top: 30px;\r\n\r\n  padding: 25px;\r\n\r\n  background: #fff;\r\n\r\n  border:\r\n    1px solid\r\n    var(--d401k-border);\r\n\r\n  border-radius: 14px;\r\n\r\n}\r\n\r\n\r\n.d401k-content h3 {\r\n\r\n  margin:\r\n    0 0 9px;\r\n\r\n  font-size: 21px;\r\n\r\n}\r\n\r\n\r\n.d401k-content p {\r\n\r\n  margin:\r\n    0 0 25px;\r\n\r\n  color:\r\n    #4B5563;\r\n\r\n  font-size: 15px;\r\n\r\n}\r\n\r\n\r\n\/* DISCLAIMER *\/\r\n\r\n.d401k-disclaimer {\r\n\r\n  margin-top: 22px;\r\n\r\n  padding-top: 18px;\r\n\r\n  border-top:\r\n    1px solid\r\n    var(--d401k-border);\r\n\r\n  color:\r\n    var(--d401k-muted);\r\n\r\n  font-size: 11px;\r\n\r\n  line-height: 1.7;\r\n\r\n}\r\n\r\n\r\n\/* MOBILE *\/\r\n\r\n@media(max-width:850px) {\r\n\r\n  .d401k-main {\r\n\r\n    grid-template-columns:\r\n      1fr;\r\n\r\n  }\r\n\r\n  .d401k-input-card {\r\n\r\n    position: static;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n@media(max-width:650px) {\r\n\r\n  .d401k-hero h2 {\r\n\r\n    font-size: 26px;\r\n\r\n  }\r\n\r\n  .d401k-strategy-grid {\r\n\r\n    grid-template-columns:\r\n      1fr;\r\n\r\n  }\r\n\r\n  .d401k-result-banner {\r\n\r\n    flex-direction:\r\n      column;\r\n\r\n  }\r\n\r\n  .d401k-banner-right {\r\n\r\n    text-align: left;\r\n\r\n  }\r\n\r\n  .d401k-match-box {\r\n\r\n    align-items:\r\n      flex-start;\r\n\r\n    flex-direction:\r\n      column;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n@media(max-width:450px) {\r\n\r\n  #d401k-calculator {\r\n\r\n    margin:\r\n      15px auto;\r\n\r\n  }\r\n\r\n  .d401k-input-card {\r\n\r\n    padding: 17px;\r\n\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<script>\r\n\r\n(function() {\r\n\r\n  \"use strict\";\r\n\r\n\r\n  \/* =========================================\r\n     HELPERS\r\n  ========================================= *\/\r\n\r\n  function num(id) {\r\n\r\n    var el =\r\n      document.getElementById(id);\r\n\r\n    if (!el) return 0;\r\n\r\n    var value =\r\n      parseFloat(el.value);\r\n\r\n    return isFinite(value)\r\n      ? value\r\n      : 0;\r\n\r\n  }\r\n\r\n\r\n  function money(value) {\r\n\r\n    if (!isFinite(value)) {\r\n\r\n      return \"$0.00\";\r\n\r\n    }\r\n\r\n    return \"$\" +\r\n      value.toLocaleString(\r\n        \"en-US\",\r\n        {\r\n          minimumFractionDigits: 2,\r\n          maximumFractionDigits: 2\r\n        }\r\n      );\r\n\r\n  }\r\n\r\n\r\n  function wholeMoney(value) {\r\n\r\n    if (!isFinite(value)) {\r\n\r\n      return \"$0\";\r\n\r\n    }\r\n\r\n    return \"$\" +\r\n      Math.round(value)\r\n        .toLocaleString(\"en-US\");\r\n\r\n  }\r\n\r\n\r\n  function timeText(months) {\r\n\r\n    if (!months) {\r\n\r\n      return \"\u2014\";\r\n\r\n    }\r\n\r\n\r\n    var years =\r\n      Math.floor(months \/ 12);\r\n\r\n    var remaining =\r\n      months % 12;\r\n\r\n\r\n    if (years === 0) {\r\n\r\n      return months +\r\n        (\r\n          months === 1\r\n            ? \" month\"\r\n            : \" months\"\r\n        );\r\n\r\n    }\r\n\r\n\r\n    if (remaining === 0) {\r\n\r\n      return years +\r\n        (\r\n          years === 1\r\n            ? \" year\"\r\n            : \" years\"\r\n        );\r\n\r\n    }\r\n\r\n\r\n    return years +\r\n      (\r\n        years === 1\r\n          ? \" year \"\r\n          : \" years \"\r\n      ) +\r\n      remaining +\r\n      (\r\n        remaining === 1\r\n          ? \" month\"\r\n          : \" months\"\r\n      );\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================\r\n     DEBT MODEL\r\n  ========================================= *\/\r\n\r\n  function calculateDebt(\r\n    balance,\r\n    apr,\r\n    payment,\r\n    maxMonths\r\n  ) {\r\n\r\n    if (\r\n      balance <= 0\r\n    ) {\r\n\r\n      return {\r\n\r\n        months: 0,\r\n\r\n        interest: 0,\r\n\r\n        balance: 0,\r\n\r\n        schedule: []\r\n\r\n      };\r\n\r\n    }\r\n\r\n\r\n    var rate =\r\n      apr \/ 100 \/ 12;\r\n\r\n\r\n    var remaining =\r\n      balance;\r\n\r\n\r\n    var interestTotal = 0;\r\n\r\n    var months = 0;\r\n\r\n    var schedule = [];\r\n\r\n\r\n    if (rate === 0) {\r\n\r\n      while (\r\n        remaining > 0 &&\r\n        months < maxMonths\r\n      ) {\r\n\r\n        var pay =\r\n          Math.min(\r\n            payment,\r\n            remaining\r\n          );\r\n\r\n\r\n        remaining -= pay;\r\n\r\n        months++;\r\n\r\n\r\n        schedule.push({\r\n\r\n          month:\r\n            months,\r\n\r\n          payment:\r\n            pay,\r\n\r\n          interest:\r\n            0,\r\n\r\n          principal:\r\n            pay,\r\n\r\n          balance:\r\n            Math.max(\r\n              0,\r\n              remaining\r\n            )\r\n\r\n        });\r\n\r\n      }\r\n\r\n\r\n      return {\r\n\r\n        months:\r\n          months,\r\n\r\n        interest:\r\n          0,\r\n\r\n        balance:\r\n          remaining,\r\n\r\n        schedule:\r\n          schedule\r\n\r\n      };\r\n\r\n    }\r\n\r\n\r\n    var firstInterest =\r\n      balance * rate;\r\n\r\n\r\n    if (\r\n      payment <= firstInterest\r\n    ) {\r\n\r\n      return {\r\n\r\n        impossible:\r\n          true,\r\n\r\n        firstInterest:\r\n          firstInterest\r\n\r\n      };\r\n\r\n    }\r\n\r\n\r\n    while (\r\n      remaining > 0 &&\r\n      months < maxMonths\r\n    ) {\r\n\r\n      var interest =\r\n        remaining * rate;\r\n\r\n\r\n      var principal =\r\n        payment - interest;\r\n\r\n\r\n      if (\r\n        principal <= 0\r\n      ) {\r\n\r\n        return {\r\n\r\n          impossible:\r\n            true\r\n\r\n        };\r\n\r\n      }\r\n\r\n\r\n      var actualPayment =\r\n        payment;\r\n\r\n\r\n      if (\r\n        payment >=\r\n        remaining + interest\r\n      ) {\r\n\r\n        actualPayment =\r\n          remaining + interest;\r\n\r\n        principal =\r\n          remaining;\r\n\r\n        remaining = 0;\r\n\r\n      } else {\r\n\r\n        remaining -=\r\n          principal;\r\n\r\n      }\r\n\r\n\r\n      interestTotal +=\r\n        interest;\r\n\r\n      months++;\r\n\r\n\r\n      schedule.push({\r\n\r\n        month:\r\n          months,\r\n\r\n        payment:\r\n          actualPayment,\r\n\r\n        interest:\r\n          interest,\r\n\r\n        principal:\r\n          principal,\r\n\r\n        balance:\r\n          Math.max(\r\n            0,\r\n            remaining\r\n          )\r\n\r\n      });\r\n\r\n    }\r\n\r\n\r\n    return {\r\n\r\n      months:\r\n        months,\r\n\r\n      interest:\r\n        interestTotal,\r\n\r\n      balance:\r\n        remaining,\r\n\r\n      schedule:\r\n        schedule\r\n\r\n    };\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================\r\n     INVESTMENT MODEL\r\n  ========================================= *\/\r\n\r\n  function calculate401k(\r\n    startingBalance,\r\n    monthlyContribution,\r\n    annualReturn,\r\n    years,\r\n    employerMatch\r\n  ) {\r\n\r\n    var monthlyRate =\r\n      annualReturn \/ 100 \/ 12;\r\n\r\n\r\n    var balance =\r\n      startingBalance;\r\n\r\n\r\n    var totalEmployee =\r\n      0;\r\n\r\n    var totalMatch =\r\n      0;\r\n\r\n\r\n    var yearly = [];\r\n\r\n\r\n    for (\r\n      var month = 1;\r\n      month <= years * 12;\r\n      month++\r\n    ) {\r\n\r\n      balance *=\r\n        (1 + monthlyRate);\r\n\r\n\r\n      balance +=\r\n        monthlyContribution;\r\n\r\n\r\n      balance +=\r\n        employerMatch;\r\n\r\n\r\n      totalEmployee +=\r\n        monthlyContribution;\r\n\r\n\r\n      totalMatch +=\r\n        employerMatch;\r\n\r\n\r\n      if (\r\n        month % 12 === 0\r\n      ) {\r\n\r\n        yearly.push({\r\n\r\n          year:\r\n            month \/ 12,\r\n\r\n          balance:\r\n            balance\r\n\r\n        });\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n    return {\r\n\r\n      balance:\r\n        balance,\r\n\r\n      employee:\r\n        totalEmployee,\r\n\r\n      match:\r\n        totalMatch,\r\n\r\n      yearly:\r\n        yearly\r\n\r\n    };\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================\r\n     EMPLOYER MATCH\r\n  ========================================= *\/\r\n\r\n  function calculateEmployerMatch(\r\n    salary,\r\n    contribution,\r\n    matchPercent,\r\n    matchLimit\r\n  ) {\r\n\r\n    if (\r\n      salary <= 0 ||\r\n      contribution <= 0 ||\r\n      matchPercent <= 0 ||\r\n      matchLimit <= 0\r\n    ) {\r\n\r\n      return 0;\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n     * Match limit is entered as percentage\r\n     * of salary that can receive matching.\r\n     *\/\r\n\r\n    var eligibleAnnualContribution =\r\n      salary *\r\n      (matchLimit \/ 100);\r\n\r\n\r\n    var annualEmployeeContribution =\r\n      contribution * 12;\r\n\r\n\r\n    var matchedContribution =\r\n      Math.min(\r\n        annualEmployeeContribution,\r\n        eligibleAnnualContribution\r\n      );\r\n\r\n\r\n    \/*\r\n     * Example:\r\n     * employee contributes $6,000\r\n     * employer match = 50%\r\n     * eligible amount = $6,000\r\n     * employer match = $3,000\/year\r\n     *\/\r\n\r\n    var annualMatch =\r\n      matchedContribution *\r\n      (matchPercent \/ 100);\r\n\r\n\r\n    return annualMatch \/ 12;\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================\r\n     CHART\r\n  ========================================= *\/\r\n\r\n  function drawChart(\r\n    debtSeries,\r\n    investSeries\r\n  ) {\r\n\r\n    var canvas =\r\n      document.getElementById(\r\n        \"d401k-chart-canvas\"\r\n      );\r\n\r\n\r\n    if (!canvas) return;\r\n\r\n\r\n    var rect =\r\n      canvas.getBoundingClientRect();\r\n\r\n\r\n    var dpr =\r\n      window.devicePixelRatio ||\r\n      1;\r\n\r\n\r\n    canvas.width =\r\n      rect.width * dpr;\r\n\r\n\r\n    canvas.height =\r\n      rect.height * dpr;\r\n\r\n\r\n    var ctx =\r\n      canvas.getContext(\"2d\");\r\n\r\n\r\n    ctx.scale(\r\n      dpr,\r\n      dpr\r\n    );\r\n\r\n\r\n    var width =\r\n      rect.width;\r\n\r\n\r\n    var height =\r\n      rect.height;\r\n\r\n\r\n    ctx.clearRect(\r\n      0,\r\n      0,\r\n      width,\r\n      height\r\n    );\r\n\r\n\r\n    var max =\r\n      0;\r\n\r\n\r\n    debtSeries.forEach(\r\n      function(v) {\r\n\r\n        max =\r\n          Math.max(\r\n            max,\r\n            v\r\n          );\r\n\r\n      }\r\n    );\r\n\r\n\r\n    investSeries.forEach(\r\n      function(v) {\r\n\r\n        max =\r\n          Math.max(\r\n            max,\r\n            v\r\n          );\r\n\r\n      }\r\n    );\r\n\r\n\r\n    if (max <= 0) {\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    var padding =\r\n      35;\r\n\r\n\r\n    var count =\r\n      Math.max(\r\n        debtSeries.length,\r\n        investSeries.length\r\n      );\r\n\r\n\r\n    function x(index) {\r\n\r\n      if (count <= 1) {\r\n\r\n        return padding;\r\n\r\n      }\r\n\r\n      return padding +\r\n        (\r\n          index \/\r\n          (count - 1)\r\n        ) *\r\n        (\r\n          width -\r\n          padding * 2\r\n        );\r\n\r\n    }\r\n\r\n\r\n    function y(value) {\r\n\r\n      return height -\r\n        padding -\r\n        (\r\n          value \/ max\r\n        ) *\r\n        (\r\n          height -\r\n          padding * 2\r\n        );\r\n\r\n    }\r\n\r\n\r\n    \/* GRID *\/\r\n\r\n    ctx.strokeStyle =\r\n      \"#E5E7EB\";\r\n\r\n    ctx.lineWidth = 1;\r\n\r\n\r\n    for (\r\n      var i = 0;\r\n      i <= 4;\r\n      i++\r\n    ) {\r\n\r\n      var gy =\r\n        padding +\r\n        i *\r\n        (\r\n          (\r\n            height -\r\n            padding * 2\r\n          ) \/ 4\r\n        );\r\n\r\n\r\n      ctx.beginPath();\r\n\r\n      ctx.moveTo(\r\n        padding,\r\n        gy\r\n      );\r\n\r\n      ctx.lineTo(\r\n        width - padding,\r\n        gy\r\n      );\r\n\r\n      ctx.stroke();\r\n\r\n    }\r\n\r\n\r\n    function line(\r\n      series,\r\n      dash\r\n    ) {\r\n\r\n      ctx.beginPath();\r\n\r\n\r\n      series.forEach(\r\n        function(value, index) {\r\n\r\n          var px =\r\n            x(index);\r\n\r\n          var py =\r\n            y(value);\r\n\r\n\r\n          if (\r\n            index === 0\r\n          ) {\r\n\r\n            ctx.moveTo(\r\n              px,\r\n              py\r\n            );\r\n\r\n          } else {\r\n\r\n            ctx.lineTo(\r\n              px,\r\n              py\r\n            );\r\n\r\n          }\r\n\r\n        }\r\n      );\r\n\r\n\r\n      ctx.setLineDash(\r\n        dash || []\r\n      );\r\n\r\n\r\n      ctx.strokeStyle =\r\n        \"#7C3AED\";\r\n\r\n      ctx.lineWidth = 3;\r\n\r\n      ctx.stroke();\r\n\r\n      ctx.setLineDash([]);\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n     * Debt-first 401(k)\r\n     *\/\r\n\r\n    line(\r\n      debtSeries,\r\n      []\r\n    );\r\n\r\n\r\n    \/*\r\n     * 401(k)-first\r\n     *\/\r\n\r\n    ctx.beginPath();\r\n\r\n\r\n    investSeries.forEach(\r\n      function(value, index) {\r\n\r\n        var px =\r\n          x(index);\r\n\r\n        var py =\r\n          y(value);\r\n\r\n\r\n        if (\r\n          index === 0\r\n        ) {\r\n\r\n          ctx.moveTo(\r\n            px,\r\n            py\r\n          );\r\n\r\n        } else {\r\n\r\n          ctx.lineTo(\r\n            px,\r\n            py\r\n          );\r\n\r\n        }\r\n\r\n      }\r\n    );\r\n\r\n\r\n    ctx.setLineDash(\r\n      [6,5]\r\n    );\r\n\r\n\r\n    ctx.strokeStyle =\r\n      \"#111827\";\r\n\r\n    ctx.lineWidth = 2.5;\r\n\r\n    ctx.stroke();\r\n\r\n    ctx.setLineDash([]);\r\n\r\n\r\n    ctx.fillStyle =\r\n      \"#6B7280\";\r\n\r\n    ctx.font =\r\n      \"11px Arial\";\r\n\r\n\r\n    ctx.fillText(\r\n      money(max),\r\n      5,\r\n      padding\r\n    );\r\n\r\n\r\n    ctx.fillText(\r\n      \"$0\",\r\n      5,\r\n      height - padding\r\n    );\r\n\r\n\r\n    \/*\r\n     * Legend\r\n     *\/\r\n\r\n    ctx.fillStyle =\r\n      \"#7C3AED\";\r\n\r\n    ctx.fillRect(\r\n      width - 185,\r\n      12,\r\n      20,\r\n      3\r\n    );\r\n\r\n\r\n    ctx.fillStyle =\r\n      \"#6B7280\";\r\n\r\n    ctx.fillText(\r\n      \"Debt-First\",\r\n      width - 160,\r\n      16\r\n    );\r\n\r\n\r\n    ctx.strokeStyle =\r\n      \"#111827\";\r\n\r\n    ctx.setLineDash(\r\n      [5,4]\r\n    );\r\n\r\n    ctx.beginPath();\r\n\r\n    ctx.moveTo(\r\n      width - 185,\r\n      30\r\n    );\r\n\r\n    ctx.lineTo(\r\n      width - 165,\r\n      30\r\n    );\r\n\r\n    ctx.stroke();\r\n\r\n    ctx.setLineDash([]);\r\n\r\n\r\n    ctx.fillStyle =\r\n      \"#6B7280\";\r\n\r\n    ctx.fillText(\r\n      \"401(k)-First\",\r\n      width - 160,\r\n      34\r\n    );\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================\r\n     MAIN\r\n  ========================================= *\/\r\n\r\n  function calculate() {\r\n\r\n    var debt =\r\n      num(\"d401k-debt\");\r\n\r\n\r\n    var apr =\r\n      num(\"d401k-apr\");\r\n\r\n\r\n    var currentPayment =\r\n      num(\"d401k-payment\");\r\n\r\n\r\n    var extra =\r\n      num(\"d401k-extra\");\r\n\r\n\r\n    var current401k =\r\n      num(\"d401k-balance\");\r\n\r\n\r\n    var contribution =\r\n      num(\"d401k-contribution\");\r\n\r\n\r\n    var matchPercent =\r\n      num(\"d401k-match\");\r\n\r\n\r\n    var matchLimit =\r\n      num(\"d401k-match-limit\");\r\n\r\n\r\n    var salary =\r\n      num(\"d401k-salary\");\r\n\r\n\r\n    var returnRate =\r\n      num(\"d401k-return\");\r\n\r\n\r\n    var years =\r\n      Math.round(\r\n        num(\"d401k-years\")\r\n      );\r\n\r\n\r\n    var error =\r\n      document.getElementById(\r\n        \"d401k-error\"\r\n      );\r\n\r\n\r\n    error.style.display =\r\n      \"none\";\r\n\r\n\r\n    \/* VALIDATION *\/\r\n\r\n    if (\r\n      debt <= 0\r\n    ) {\r\n\r\n      error.textContent =\r\n        \"Please enter a debt balance greater than $0.\";\r\n\r\n      error.style.display =\r\n        \"block\";\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    if (\r\n      currentPayment <= 0\r\n    ) {\r\n\r\n      error.textContent =\r\n        \"Please enter your current monthly debt payment.\";\r\n\r\n      error.style.display =\r\n        \"block\";\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    if (\r\n      extra < 0\r\n    ) {\r\n\r\n      error.textContent =\r\n        \"Extra monthly payment cannot be negative.\";\r\n\r\n      error.style.display =\r\n        \"block\";\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    if (\r\n      years < 1\r\n    ) {\r\n\r\n      error.textContent =\r\n        \"Please enter a comparison period of at least 1 year.\";\r\n\r\n      error.style.display =\r\n        \"block\";\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n     * Match available on current employee\r\n     * contribution.\r\n     *\/\r\n\r\n    var monthlyMatch =\r\n      calculateEmployerMatch(\r\n        salary,\r\n        contribution,\r\n        matchPercent,\r\n        matchLimit\r\n      );\r\n\r\n\r\n    \/*\r\n     * Debt-first:\r\n     *\r\n     * Extra money goes to debt.\r\n     *\r\n     * After debt is paid off, the former\r\n     * extra debt payment is redirected into\r\n     * the 401(k).\r\n     *\/\r\n\r\n    var debtFirstDebt =\r\n      calculateDebt(\r\n        debt,\r\n        apr,\r\n        currentPayment + extra,\r\n        years * 12\r\n      );\r\n\r\n\r\n    if (\r\n      debtFirstDebt.impossible\r\n    ) {\r\n\r\n      error.textContent =\r\n        \"Your current debt payment is not high enough to reduce the debt at the entered interest rate. Increase the monthly debt payment.\";\r\n\r\n      error.style.display =\r\n        \"block\";\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n     * 401(k)-first:\r\n     *\r\n     * Normal debt payment.\r\n     * Extra money goes to 401(k).\r\n     *\/\r\n\r\n    var normalDebt =\r\n      calculateDebt(\r\n        debt,\r\n        apr,\r\n        currentPayment,\r\n        years * 12\r\n      );\r\n\r\n\r\n    if (\r\n      normalDebt.impossible\r\n    ) {\r\n\r\n      error.textContent =\r\n        \"Your normal debt payment is not sufficient to pay down the debt at the entered interest rate. Increase the current monthly debt payment.\";\r\n\r\n      error.style.display =\r\n        \"block\";\r\n\r\n      return;\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n     * Employee contribution for each strategy.\r\n     *\/\r\n\r\n    var debtFirstContribution =\r\n      contribution;\r\n\r\n\r\n    var investmentFirstContribution =\r\n      contribution +\r\n      extra;\r\n\r\n\r\n    \/*\r\n     * Estimate how long debt-first takes\r\n     * to become debt-free.\r\n     *\/\r\n\r\n    var debtFullPayoff =\r\n      calculateDebt(\r\n        debt,\r\n        apr,\r\n        currentPayment + extra,\r\n        1200\r\n      );\r\n\r\n\r\n    var debtFreeMonth =\r\n      debtFullPayoff.months;\r\n\r\n\r\n    \/*\r\n     * After debt payoff, redirect the\r\n     * freed-up debt payment + extra\r\n     * to 401(k).\r\n     *\/\r\n\r\n    var debtFirstMonthlyInvestment =\r\n      debtFirstContribution;\r\n\r\n\r\n    if (\r\n      debtFreeMonth <= years * 12\r\n    ) {\r\n\r\n      debtFirstMonthlyInvestment +=\r\n        currentPayment +\r\n        extra;\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n     * Calculate year-by-year models.\r\n     *\/\r\n\r\n    var debtFirstBalance =\r\n      current401k;\r\n\r\n\r\n    var investFirstBalance =\r\n      current401k;\r\n\r\n\r\n    var debtFirstDebtBalance =\r\n      debt;\r\n\r\n\r\n    var investFirstDebtBalance =\r\n      debt;\r\n\r\n\r\n    var monthlyReturn =\r\n      returnRate \/\r\n      100 \/\r\n      12;\r\n\r\n\r\n    var debtFirstInterest =\r\n      0;\r\n\r\n\r\n    var investFirstInterest =\r\n      0;\r\n\r\n\r\n    var debtFirstSeries =\r\n      [];\r\n\r\n\r\n    var investFirstSeries =\r\n      [];\r\n\r\n\r\n    var yearRows =\r\n      [];\r\n\r\n\r\n    var totalDebtFirstMatch =\r\n      0;\r\n\r\n\r\n    var totalInvestMatch =\r\n      0;\r\n\r\n\r\n    for (\r\n      var month = 1;\r\n      month <= years * 12;\r\n      month++\r\n    ) {\r\n\r\n\r\n      \/*\r\n       * =================================\r\n       * DEBT-FIRST\r\n       * =================================\r\n       *\/\r\n\r\n      var dfInterest =\r\n        debtFirstDebtBalance *\r\n        (\r\n          apr \/\r\n          100 \/\r\n          12\r\n        );\r\n\r\n\r\n      var dfPayment =\r\n        Math.min(\r\n          currentPayment + extra,\r\n          debtFirstDebtBalance +\r\n          dfInterest\r\n        );\r\n\r\n\r\n      var dfPrincipal =\r\n        Math.max(\r\n          0,\r\n          dfPayment -\r\n          dfInterest\r\n        );\r\n\r\n\r\n      debtFirstDebtBalance =\r\n        Math.max(\r\n          0,\r\n          debtFirstDebtBalance -\r\n          dfPrincipal\r\n        );\r\n\r\n\r\n      debtFirstInterest +=\r\n        dfInterest;\r\n\r\n\r\n      \/*\r\n       * Investment contribution.\r\n       *\r\n       * Before debt is paid off:\r\n       * normal 401(k) contribution.\r\n       *\r\n       * After debt is paid off:\r\n       * normal contribution +\r\n       * freed debt payment.\r\n       *\/\r\n\r\n      var dfContribution =\r\n        debtFirstContribution;\r\n\r\n\r\n      if (\r\n        month > debtFreeMonth\r\n      ) {\r\n\r\n        dfContribution +=\r\n          currentPayment +\r\n          extra;\r\n\r\n      }\r\n\r\n\r\n      \/*\r\n       * Employer match.\r\n       *\/\r\n\r\n      var dfMatch =\r\n        monthlyMatch;\r\n\r\n\r\n      debtFirstBalance *=\r\n        (\r\n          1 +\r\n          monthlyReturn\r\n        );\r\n\r\n\r\n      debtFirstBalance +=\r\n        dfContribution +\r\n        dfMatch;\r\n\r\n\r\n      totalDebtFirstMatch +=\r\n        dfMatch;\r\n\r\n\r\n      \/*\r\n       * =================================\r\n       * 401(K)-FIRST\r\n       * =================================\r\n       *\/\r\n\r\n      var invInterest =\r\n        investFirstDebtBalance *\r\n        (\r\n          apr \/\r\n          100 \/\r\n          12\r\n        );\r\n\r\n\r\n      var invPayment =\r\n        Math.min(\r\n          currentPayment,\r\n          investFirstDebtBalance +\r\n          invInterest\r\n        );\r\n\r\n\r\n      var invPrincipal =\r\n        Math.max(\r\n          0,\r\n          invPayment -\r\n          invInterest\r\n        );\r\n\r\n\r\n      investFirstDebtBalance =\r\n        Math.max(\r\n          0,\r\n          investFirstDebtBalance -\r\n          invPrincipal\r\n        );\r\n\r\n\r\n      investFirstInterest +=\r\n        invInterest;\r\n\r\n\r\n      \/*\r\n       * Extra money goes into 401(k).\r\n       *\/\r\n\r\n      var invContribution =\r\n        investmentFirstContribution;\r\n\r\n\r\n      var invMatch =\r\n        monthlyMatch;\r\n\r\n\r\n      investFirstBalance *=\r\n        (\r\n          1 +\r\n          monthlyReturn\r\n        );\r\n\r\n\r\n      investFirstBalance +=\r\n        invContribution +\r\n        invMatch;\r\n\r\n\r\n      totalInvestMatch +=\r\n        invMatch;\r\n\r\n\r\n      \/*\r\n       * Store chart data.\r\n       *\/\r\n\r\n      debtFirstSeries.push(\r\n        debtFirstBalance\r\n      );\r\n\r\n\r\n      investFirstSeries.push(\r\n        investFirstBalance\r\n      );\r\n\r\n\r\n      \/*\r\n       * Year row.\r\n       *\/\r\n\r\n      if (\r\n        month % 12 === 0\r\n      ) {\r\n\r\n        var currentYear =\r\n          month \/ 12;\r\n\r\n\r\n        yearRows.push({\r\n\r\n          year:\r\n            currentYear,\r\n\r\n          dfDebt:\r\n            debtFirstDebtBalance,\r\n\r\n          df401k:\r\n            debtFirstBalance,\r\n\r\n          invDebt:\r\n            investFirstDebtBalance,\r\n\r\n          inv401k:\r\n            investFirstBalance\r\n\r\n        });\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n     * FINANCIAL POSITION\r\n     *\r\n     * 401(k) minus remaining debt.\r\n     *\/\r\n\r\n    var debtFirstPosition =\r\n      debtFirstBalance -\r\n      debtFirstDebtBalance;\r\n\r\n\r\n    var investFirstPosition =\r\n      investFirstBalance -\r\n      investFirstDebtBalance;\r\n\r\n\r\n    var difference =\r\n      investFirstPosition -\r\n      debtFirstPosition;\r\n\r\n\r\n    \/*\r\n     * HEADER\r\n     *\/\r\n\r\n    document.getElementById(\r\n      \"d401k-debt-result\"\r\n    ).textContent =\r\n      wholeMoney(\r\n        debtFirstPosition\r\n      );\r\n\r\n\r\n    document.getElementById(\r\n      \"d401k-invest-result\"\r\n    ).textContent =\r\n      wholeMoney(\r\n        investFirstPosition\r\n      );\r\n\r\n\r\n    \/*\r\n     * DEBT-FIRST CARD\r\n     *\/\r\n\r\n    var interestAvoided =\r\n      Math.max(\r\n        0,\r\n        normalDebt.interest -\r\n        debtFirstDebt.interest\r\n      );\r\n\r\n\r\n    document.getElementById(\r\n      \"d401k-debt-saved\"\r\n    ).textContent =\r\n      money(\r\n        interestAvoided\r\n      );\r\n\r\n\r\n    document.getElementById(\r\n      \"d401k-debt-time\"\r\n    ).textContent =\r\n      timeText(\r\n        debtFullPayoff.months\r\n      );\r\n\r\n\r\n    document.getElementById(\r\n      \"d401k-debt-401k\"\r\n    ).textContent =\r\n      wholeMoney(\r\n        debtFirstBalance\r\n      );\r\n\r\n\r\n    \/*\r\n     * INVESTMENT CARD\r\n     *\/\r\n\r\n    document.getElementById(\r\n      \"d401k-invest-interest\"\r\n    ).textContent =\r\n      money(\r\n        normalDebt.interest\r\n      );\r\n\r\n\r\n    document.getElementById(\r\n      \"d401k-invest-time\"\r\n    ).textContent =\r\n      timeText(\r\n        normalDebt.months\r\n      );\r\n\r\n\r\n    document.getElementById(\r\n      \"d401k-invest-401k\"\r\n    ).textContent =\r\n      wholeMoney(\r\n        investFirstBalance\r\n      );\r\n\r\n\r\n    \/*\r\n     * MATCH\r\n     *\/\r\n\r\n    document.getElementById(\r\n      \"d401k-match-value\"\r\n    ).textContent =\r\n      money(\r\n        monthlyMatch * 12\r\n      ) +\r\n      \" \/ year\";\r\n\r\n\r\n    \/*\r\n     * COMPARISON TABLE\r\n     *\/\r\n\r\n    document.getElementById(\r\n      \"d401k-c-debt\"\r\n    ).textContent =\r\n      wholeMoney(\r\n        debtFirstDebtBalance\r\n      );\r\n\r\n\r\n    document.getElementById(\r\n      \"d401k-i-debt\"\r\n    ).textContent =\r\n      wholeMoney(\r\n        investFirstDebtBalance\r\n      );\r\n\r\n\r\n    document.getElementById(\r\n      \"d401k-c-interest\"\r\n    ).textContent =\r\n      money(\r\n        debtFirstInterest\r\n      );\r\n\r\n\r\n    document.getElementById(\r\n      \"d401k-i-interest\"\r\n    ).textContent =\r\n      money(\r\n        investFirstInterest\r\n      );\r\n\r\n\r\n    document.getElementById(\r\n      \"d401k-c-401k\"\r\n    ).textContent =\r\n      wholeMoney(\r\n        debtFirstBalance\r\n      );\r\n\r\n\r\n    document.getElementById(\r\n      \"d401k-i-401k\"\r\n    ).textContent =\r\n      wholeMoney(\r\n        investFirstBalance\r\n      );\r\n\r\n\r\n    document.getElementById(\r\n      \"d401k-c-position\"\r\n    ).textContent =\r\n      wholeMoney(\r\n        debtFirstPosition\r\n      );\r\n\r\n\r\n    document.getElementById(\r\n      \"d401k-i-position\"\r\n    ).textContent =\r\n      wholeMoney(\r\n        investFirstPosition\r\n      );\r\n\r\n\r\n    \/*\r\n     * DIFFERENCE\r\n     *\/\r\n\r\n    document.getElementById(\r\n      \"d401k-difference-value\"\r\n    ).textContent =\r\n      wholeMoney(\r\n        Math.abs(difference)\r\n      );\r\n\r\n\r\n    var differenceText;\r\n\r\n\r\n    if (\r\n      Math.abs(difference) < 1\r\n    ) {\r\n\r\n      differenceText =\r\n        \"Under these assumptions, the two strategies produce approximately the same estimated financial position.\";\r\n\r\n    }\r\n\r\n    else if (\r\n      difference > 0\r\n    ) {\r\n\r\n      differenceText =\r\n        \"Under these assumptions, the 401(k)-first strategy produces an estimated financial position that is higher by \" +\r\n        money(Math.abs(difference)) +\r\n        \" after \" +\r\n        years +\r\n        \" years.\";\r\n\r\n    }\r\n\r\n    else {\r\n\r\n      differenceText =\r\n        \"Under these assumptions, the debt-first strategy produces an estimated financial position that is higher by \" +\r\n        money(Math.abs(difference)) +\r\n        \" after \" +\r\n        years +\r\n        \" years.\";\r\n\r\n    }\r\n\r\n\r\n    document.getElementById(\r\n      \"d401k-difference-text\"\r\n    ).textContent =\r\n      differenceText;\r\n\r\n\r\n    \/*\r\n     * YEAR TABLE\r\n     *\/\r\n\r\n    var body =\r\n      document.getElementById(\r\n        \"d401k-year-body\"\r\n      );\r\n\r\n\r\n    body.innerHTML = \"\";\r\n\r\n\r\n    yearRows.forEach(\r\n      function(row) {\r\n\r\n        var tr =\r\n          document.createElement(\r\n            \"tr\"\r\n          );\r\n\r\n\r\n        tr.innerHTML =\r\n\r\n          \"<td>\" +\r\n          row.year +\r\n          \"<\/td>\" +\r\n\r\n          \"<td>\" +\r\n          wholeMoney(row.dfDebt) +\r\n          \"<\/td>\" +\r\n\r\n          \"<td>\" +\r\n          wholeMoney(row.df401k) +\r\n          \"<\/td>\" +\r\n\r\n          \"<td>\" +\r\n          wholeMoney(row.invDebt) +\r\n          \"<\/td>\" +\r\n\r\n          \"<td>\" +\r\n          wholeMoney(row.inv401k) +\r\n          \"<\/td>\";\r\n\r\n\r\n        body.appendChild(tr);\r\n\r\n      }\r\n    );\r\n\r\n\r\n    \/*\r\n     * CHART\r\n     *\/\r\n\r\n    drawChart(\r\n      debtFirstSeries,\r\n      investFirstSeries\r\n    );\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================\r\n     RESET\r\n  ========================================= *\/\r\n\r\n  function resetCalculator() {\r\n\r\n    document.getElementById(\r\n      \"d401k-debt\"\r\n    ).value =\r\n      \"20000\";\r\n\r\n\r\n    document.getElementById(\r\n      \"d401k-apr\"\r\n    ).value =\r\n      \"12\";\r\n\r\n\r\n    document.getElementById(\r\n      \"d401k-payment\"\r\n    ).value =\r\n      \"500\";\r\n\r\n\r\n    document.getElementById(\r\n      \"d401k-extra\"\r\n    ).value =\r\n      \"500\";\r\n\r\n\r\n    document.getElementById(\r\n      \"d401k-balance\"\r\n    ).value =\r\n      \"25000\";\r\n\r\n\r\n    document.getElementById(\r\n      \"d401k-contribution\"\r\n    ).value =\r\n      \"500\";\r\n\r\n\r\n    document.getElementById(\r\n      \"d401k-match\"\r\n    ).value =\r\n      \"50\";\r\n\r\n\r\n    document.getElementById(\r\n      \"d401k-match-limit\"\r\n    ).value =\r\n      \"6\";\r\n\r\n\r\n    document.getElementById(\r\n      \"d401k-salary\"\r\n    ).value =\r\n      \"75000\";\r\n\r\n\r\n    document.getElementById(\r\n      \"d401k-return\"\r\n    ).value =\r\n      \"7\";\r\n\r\n\r\n    document.getElementById(\r\n      \"d401k-years\"\r\n    ).value =\r\n      \"10\";\r\n\r\n\r\n    calculate();\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================\r\n     EVENTS\r\n  ========================================= *\/\r\n\r\n  document.getElementById(\r\n    \"d401k-calculate\"\r\n  ).addEventListener(\r\n    \"click\",\r\n    calculate\r\n  );\r\n\r\n\r\n  document.getElementById(\r\n    \"d401k-reset\"\r\n  ).addEventListener(\r\n    \"click\",\r\n    resetCalculator\r\n  );\r\n\r\n\r\n  var inputs =\r\n    document.querySelectorAll(\r\n      \"#d401k-calculator input\"\r\n    );\r\n\r\n\r\n  inputs.forEach(\r\n    function(input) {\r\n\r\n      input.addEventListener(\r\n        \"keydown\",\r\n        function(event) {\r\n\r\n          if (\r\n            event.key === \"Enter\"\r\n          ) {\r\n\r\n            calculate();\r\n\r\n          }\r\n\r\n        }\r\n      );\r\n\r\n    }\r\n  );\r\n\r\n\r\n  \/*\r\n   * Initial calculation\r\n   *\/\r\n\r\n  calculate();\r\n\r\n\r\n  \/*\r\n   * Redraw chart on resize\r\n   *\/\r\n\r\n  window.addEventListener(\r\n    \"resize\",\r\n    calculate\r\n  );\r\n\r\n\r\n})();\r\n\r\n<\/script>\n<p style=\"text-align: justify;\">The <strong>Debt vs 401(k) Calculator USA<\/strong> is a free financial planning tool that helps you compare two common strategies when you have extra money each month: paying down debt faster or increasing your 401(k) contributions. Enter your debt balance, interest rate, monthly payment, available extra money, current 401(k) balance, contribution, employer match, salary, expected investment return, and comparison period. The calculator estimates how each strategy could affect your remaining debt, 401(k) value, interest costs, and overall financial position over time. It also considers the potential value of employer matching contributions and provides a year-by-year comparison to make the differences easier to understand. This tool can help you explore whether prioritising debt repayment or retirement investing may produce a stronger hypothetical outcome based on your assumptions. Investment returns are not guaranteed, and actual results depend on taxes, fees, plan rules, debt terms, and market performance. Use the results as an educational comparison, not personalised financial advice.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Debt vs 401(k) Calculator USA is a free financial planning tool that helps you compare two common strategies when [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[83],"tags":[],"class_list":["post-689","post","type-post","status-publish","format-standard","hentry","category-calculator"],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"StockMaster Universe","author_link":"https:\/\/www.stockmaster.in\/universe\/author\/unistockadmin\/"},"rttpg_comment":0,"rttpg_category":"<a href=\"https:\/\/www.stockmaster.in\/universe\/category\/debt-personal-finance\/calculator\/\" rel=\"category tag\">Calculator<\/a>","rttpg_excerpt":"The Debt vs 401(k) Calculator USA is a free financial planning tool that helps you compare two common strategies when [&hellip;]","_links":{"self":[{"href":"https:\/\/www.stockmaster.in\/universe\/wp-json\/wp\/v2\/posts\/689","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.stockmaster.in\/universe\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.stockmaster.in\/universe\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.stockmaster.in\/universe\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.stockmaster.in\/universe\/wp-json\/wp\/v2\/comments?post=689"}],"version-history":[{"count":0,"href":"https:\/\/www.stockmaster.in\/universe\/wp-json\/wp\/v2\/posts\/689\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.stockmaster.in\/universe\/wp-json\/wp\/v2\/media?parent=689"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.stockmaster.in\/universe\/wp-json\/wp\/v2\/categories?post=689"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.stockmaster.in\/universe\/wp-json\/wp\/v2\/tags?post=689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}