Advanced DTI Ratio Calculator | Financial Health Analyzer<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n }\r\n\r\n :root {\r\n --primary: #4361ee;\r\n --secondary: #3a0ca3;\r\n --accent: #f72585;\r\n --success: #4cc9f0;\r\n --warning: #f8961e;\r\n --danger: #f94144;\r\n --light: #f8f9fa;\r\n --dark: #212529;\r\n --gray: #6c757d;\r\n --light-gray: #e9ecef;\r\n --income-color: #2a9d8f;\r\n --debt-color: #e76f51;\r\n --front-end-color: #7209b7;\r\n --back-end-color: #3a86ff;\r\n }\r\n\r\n body {\r\n background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\r\n color: var(--dark);\r\n line-height: 1.6;\r\n padding: 20px;\r\n min-height: 100vh;\r\n }\r\n\r\n .container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n\r\n header {\r\n text-align: center;\r\n margin-bottom: 30px;\r\n padding: 20px;\r\n background: linear-gradient(to right, var(--primary), var(--secondary));\r\n color: white;\r\n border-radius: 15px;\r\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n h1 {\r\n font-size: 2.8rem;\r\n margin-bottom: 10px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 15px;\r\n }\r\n\r\n h1 i {\r\n color: var(--accent);\r\n }\r\n\r\n .tagline {\r\n font-size: 1.2rem;\r\n opacity: 0.9;\r\n max-width: 800px;\r\n margin: 0 auto;\r\n }\r\n\r\n .main-content {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 30px;\r\n margin-bottom: 40px;\r\n }\r\n\r\n @media (max-width: 1100px) {\r\n .main-content {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n\r\n .calculator-section {\r\n background: white;\r\n border-radius: 15px;\r\n padding: 25px;\r\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);\r\n }\r\n\r\n .section-title {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 1.6rem;\r\n color: var(--secondary);\r\n margin-bottom: 25px;\r\n padding-bottom: 15px;\r\n border-bottom: 2px solid var(--light-gray);\r\n }\r\n\r\n .section-title i {\r\n color: var(--primary);\r\n }\r\n\r\n .input-group {\r\n margin-bottom: 25px;\r\n }\r\n\r\n .input-label {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 8px;\r\n font-weight: 600;\r\n }\r\n\r\n .input-label span:first-child {\r\n color: var(--dark);\r\n }\r\n\r\n .input-label span:last-child {\r\n font-weight: normal;\r\n color: var(--gray);\r\n font-size: 0.9rem;\r\n }\r\n\r\n .input-container {\r\n display: flex;\r\n align-items: center;\r\n border: 2px solid var(--light-gray);\r\n border-radius: 10px;\r\n overflow: hidden;\r\n transition: all 0.3s;\r\n }\r\n\r\n .input-container:focus-within {\r\n border-color: var(--primary);\r\n box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);\r\n }\r\n\r\n .input-container.income {\r\n border-left: 5px solid var(--income-color);\r\n }\r\n\r\n .input-container.debt {\r\n border-left: 5px solid var(--debt-color);\r\n }\r\n\r\n .input-container input {\r\n flex: 1;\r\n border: none;\r\n padding: 15px;\r\n font-size: 1.1rem;\r\n outline: none;\r\n }\r\n\r\n .period-selector {\r\n display: flex;\r\n background: var(--light-gray);\r\n border-radius: 5px;\r\n overflow: hidden;\r\n margin-left: 10px;\r\n margin-right: 10px;\r\n }\r\n\r\n .period-selector button {\r\n padding: 8px 15px;\r\n border: none;\r\n background: transparent;\r\n cursor: pointer;\r\n font-weight: 600;\r\n transition: all 0.3s;\r\n }\r\n\r\n .period-selector button.active {\r\n background: var(--primary);\r\n color: white;\r\n }\r\n\r\n .period-selector button:hover:not(.active) {\r\n background: rgba(67, 97, 238, 0.1);\r\n }\r\n\r\n .results-section {\r\n background: white;\r\n border-radius: 15px;\r\n padding: 25px;\r\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);\r\n }\r\n\r\n .results-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .calculate-btn {\r\n background: linear-gradient(to right, var(--primary), var(--secondary));\r\n color: white;\r\n border: none;\r\n padding: 15px 35px;\r\n font-size: 1.2rem;\r\n font-weight: 600;\r\n border-radius: 10px;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n transition: all 0.3s;\r\n box-shadow: 0 5px 15px rgba(67, 97, 238, 0.4);\r\n }\r\n\r\n .calculate-btn:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 8px 20px rgba(67, 97, 238, 0.5);\r\n }\r\n\r\n .calculate-btn:active {\r\n transform: translateY(0);\r\n }\r\n\r\n .result-cards {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 20px;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .result-card {\r\n background: var(--light);\r\n border-radius: 12px;\r\n padding: 20px;\r\n text-align: center;\r\n border-top: 5px solid;\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\r\n transition: transform 0.3s;\r\n }\r\n\r\n .result-card:hover {\r\n transform: translateY(-5px);\r\n }\r\n\r\n .result-card.front-end {\r\n border-color: var(--front-end-color);\r\n }\r\n\r\n .result-card.back-end {\r\n border-color: var(--back-end-color);\r\n }\r\n\r\n .result-card.health {\r\n border-color: var(--success);\r\n }\r\n\r\n .result-card.total {\r\n border-color: var(--accent);\r\n }\r\n\r\n .result-value {\r\n font-size: 2.5rem;\r\n font-weight: 700;\r\n margin: 10px 0;\r\n }\r\n\r\n .result-label {\r\n color: var(--gray);\r\n font-size: 1rem;\r\n font-weight: 600;\r\n }\r\n\r\n .result-status {\r\n display: inline-block;\r\n padding: 5px 15px;\r\n border-radius: 20px;\r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n margin-top: 10px;\r\n }\r\n\r\n .status-good {\r\n background: rgba(76, 201, 240, 0.2);\r\n color: #0a9396;\r\n }\r\n\r\n .status-warning {\r\n background: rgba(248, 150, 30, 0.2);\r\n color: #ca6702;\r\n }\r\n\r\n .status-danger {\r\n background: rgba(249, 65, 68, 0.2);\r\n color: #ae2012;\r\n }\r\n\r\n .visualization {\r\n margin-top: 30px;\r\n }\r\n\r\n .progress-container {\r\n margin-bottom: 25px;\r\n }\r\n\r\n .progress-label {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .progress-bar {\r\n height: 25px;\r\n background: var(--light-gray);\r\n border-radius: 12px;\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n\r\n .progress-fill {\r\n height: 100%;\r\n border-radius: 12px;\r\n transition: width 1s ease-out;\r\n }\r\n\r\n .progress-fill.front-end {\r\n background: linear-gradient(to right, var(--front-end-color), #9d4edd);\r\n }\r\n\r\n .progress-fill.back-end {\r\n background: linear-gradient(to right, var(--back-end-color), #4895ef);\r\n }\r\n\r\n .progress-marker {\r\n position: absolute;\r\n height: 100%;\r\n width: 2px;\r\n background: rgba(0, 0, 0, 0.5);\r\n top: 0;\r\n }\r\n\r\n .progress-marker-label {\r\n position: absolute;\r\n top: -25px;\r\n transform: translateX(-50%);\r\n font-size: 0.8rem;\r\n color: var(--gray);\r\n white-space: nowrap;\r\n }\r\n\r\n .info-section {\r\n background: white;\r\n border-radius: 15px;\r\n padding: 25px;\r\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);\r\n margin-top: 30px;\r\n }\r\n\r\n .tabs {\r\n display: flex;\r\n border-bottom: 2px solid var(--light-gray);\r\n margin-bottom: 25px;\r\n overflow-x: auto;\r\n }\r\n\r\n .tab {\r\n padding: 15px 25px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n border-bottom: 3px solid transparent;\r\n transition: all 0.3s;\r\n white-space: nowrap;\r\n }\r\n\r\n .tab:hover {\r\n color: var(--primary);\r\n }\r\n\r\n .tab.active {\r\n color: var(--primary);\r\n border-bottom: 3px solid var(--primary);\r\n }\r\n\r\n .tab-content {\r\n display: none;\r\n }\r\n\r\n .tab-content.active {\r\n display: block;\r\n animation: fadeIn 0.5s;\r\n }\r\n\r\n @keyframes fadeIn {\r\n from { opacity: 0; }\r\n to { opacity: 1; }\r\n }\r\n\r\n .comparison-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n margin-top: 20px;\r\n }\r\n\r\n .comparison-table th, .comparison-table td {\r\n padding: 15px;\r\n text-align: left;\r\n border-bottom: 1px solid var(--light-gray);\r\n }\r\n\r\n .comparison-table th {\r\n background: var(--light);\r\n color: var(--secondary);\r\n font-weight: 600;\r\n }\r\n\r\n .comparison-table tr:hover {\r\n background: rgba(67, 97, 238, 0.05);\r\n }\r\n\r\n .comparison-table .good {\r\n color: #2a9d8f;\r\n font-weight: 600;\r\n }\r\n\r\n .comparison-table .fair {\r\n color: #f8961e;\r\n font-weight: 600;\r\n }\r\n\r\n .comparison-table .poor {\r\n color: #e76f51;\r\n font-weight: 600;\r\n }\r\n\r\n .tips-list {\r\n list-style-type: none;\r\n }\r\n\r\n .tips-list li {\r\n padding: 15px;\r\n margin-bottom: 15px;\r\n background: var(--light);\r\n border-radius: 10px;\r\n border-left: 4px solid var(--primary);\r\n }\r\n\r\n .tips-list li i {\r\n color: var(--primary);\r\n margin-right: 10px;\r\n }\r\n\r\n footer {\r\n text-align: center;\r\n margin-top: 50px;\r\n padding: 20px;\r\n color: var(--gray);\r\n font-size: 0.9rem;\r\n border-top: 1px solid var(--light-gray);\r\n }\r\n\r\n .financial-links {\r\n display: flex;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n gap: 20px;\r\n margin-top: 20px;\r\n }\r\n\r\n .financial-links a {\r\n color: var(--primary);\r\n text-decoration: none;\r\n font-weight: 600;\r\n padding: 8px 15px;\r\n border-radius: 5px;\r\n transition: all 0.3s;\r\n }\r\n\r\n .financial-links a:hover {\r\n background: rgba(67, 97, 238, 0.1);\r\n }\r\n\r\n .highlight {\r\n background: rgba(67, 97, 238, 0.1);\r\n padding: 3px 8px;\r\n border-radius: 5px;\r\n font-weight: 600;\r\n }\r\n\r\n .reset-btn {\r\n background: var(--light-gray);\r\n color: var(--dark);\r\n border: none;\r\n padding: 10px 20px;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n font-weight: 600;\r\n margin-top: 15px;\r\n transition: all 0.3s;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n\r\n .reset-btn:hover {\r\n background: #dee2e6;\r\n }\r\n\r\n .calculator-actions {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n h1 {\r\n font-size: 2rem;\r\n }\r\n \r\n .main-content {\r\n gap: 20px;\r\n }\r\n \r\n .calculator-section, .results-section {\r\n padding: 20px;\r\n }\r\n \r\n .result-cards {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .result-value {\r\n font-size: 2rem;\r\n }\r\n \r\n .tabs {\r\n flex-wrap: nowrap;\r\n overflow-x: auto;\r\n }\r\n \r\n .tab {\r\n padding: 12px 18px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <header>\r\n <h1><i class=\"fas fa-calculator\"><\/i> Advanced DTI Ratio Calculator<\/h1>\r\n <p class=\"tagline\">Calculate your debt-to-income ratio, analyze your financial health, and get personalized recommendations to improve your financial standing.<\/p>\r\n <\/header>\r\n\r\n <div class=\"main-content\">\r\n <div class=\"calculator-section\">\r\n <h2 class=\"section-title\"><i class=\"fas fa-money-bill-wave\"><\/i> Incomes (Before Tax)<\/h2>\r\n \r\n <div class=\"input-group\">\r\n <div class=\"input-label\">\r\n <span>Salary & Earned Income<\/span>\r\n <span>Annual \/ Monthly<\/span>\r\n <\/div>\r\n <div class=\"input-container income\">\r\n <input type=\"number\" id=\"salary\" value=\"60000\" min=\"0\" step=\"1000\">\r\n <div class=\"period-selector\">\r\n <button class=\"period-btn active\" data-period=\"year\">Year<\/button>\r\n <button class=\"period-btn\" data-period=\"month\">Month<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <div class=\"input-label\">\r\n <span>Pension & Social Security<\/span>\r\n <span>Annual \/ Monthly<\/span>\r\n <\/div>\r\n <div class=\"input-container income\">\r\n <input type=\"number\" id=\"pension\" value=\"0\" min=\"0\" step=\"100\">\r\n <div class=\"period-selector\">\r\n <button class=\"period-btn active\" data-period=\"year\">Year<\/button>\r\n <button class=\"period-btn\" data-period=\"month\">Month<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <div class=\"input-label\">\r\n <span>Investment & Savings Income<\/span>\r\n <span>Interest, capital gain, dividend, rental income...<\/span>\r\n <\/div>\r\n <div class=\"input-container income\">\r\n <input type=\"number\" id=\"investment\" value=\"0\" min=\"0\" step=\"100\">\r\n <div class=\"period-selector\">\r\n <button class=\"period-btn active\" data-period=\"year\">Year<\/button>\r\n <button class=\"period-btn\" data-period=\"month\">Month<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <div class=\"input-label\">\r\n <span>Other Income<\/span>\r\n <span>Gift, alimony, child support...<\/span>\r\n <\/div>\r\n <div class=\"input-container income\">\r\n <input type=\"number\" id=\"other-income\" value=\"0\" min=\"0\" step=\"100\">\r\n <div class=\"period-selector\">\r\n <button class=\"period-btn active\" data-period=\"year\">Year<\/button>\r\n <button class=\"period-btn\" data-period=\"month\">Month<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <h2 class=\"section-title\" style=\"margin-top: 40px;\"><i class=\"fas fa-credit-card\"><\/i> Debts \/ Expenses<\/h2>\r\n \r\n <div class=\"input-group\">\r\n <div class=\"input-label\">\r\n <span>Rental Cost \/ Mortgage<\/span>\r\n <span>Monthly \/ Annual<\/span>\r\n <\/div>\r\n <div class=\"input-container debt\">\r\n <input type=\"number\" id=\"rent\" value=\"1200\" min=\"0\" step=\"100\">\r\n <div class=\"period-selector\">\r\n <button class=\"period-btn active\" data-period=\"month\">Month<\/button>\r\n <button class=\"period-btn\" data-period=\"year\">Year<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <div class=\"input-label\">\r\n <span>Property Tax<\/span>\r\n <span>Annual \/ Monthly<\/span>\r\n <\/div>\r\n <div class=\"input-container debt\">\r\n <input type=\"number\" id=\"property-tax\" value=\"0\" min=\"0\" step=\"100\">\r\n <div class=\"period-selector\">\r\n <button class=\"period-btn active\" data-period=\"year\">Year<\/button>\r\n <button class=\"period-btn\" data-period=\"month\">Month<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <div class=\"input-label\">\r\n <span>HOA Fees<\/span>\r\n <span>Monthly \/ Annual<\/span>\r\n <\/div>\r\n <div class=\"input-container debt\">\r\n <input type=\"number\" id=\"hoa\" value=\"0\" min=\"0\" step=\"50\">\r\n <div class=\"period-selector\">\r\n <button class=\"period-btn active\" data-period=\"month\">Month<\/button>\r\n <button class=\"period-btn\" data-period=\"year\">Year<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <div class=\"input-label\">\r\n <span>Homeowner Insurance<\/span>\r\n <span>Annual \/ Monthly<\/span>\r\n <\/div>\r\n <div class=\"input-container debt\">\r\n <input type=\"number\" id=\"insurance\" value=\"0\" min=\"0\" step=\"100\">\r\n <div class=\"period-selector\">\r\n <button class=\"period-btn active\" data-period=\"year\">Year<\/button>\r\n <button class=\"period-btn\" data-period=\"month\">Month<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <div class=\"input-label\">\r\n <span>Credit Cards<\/span>\r\n <span>Monthly \/ Annual<\/span>\r\n <\/div>\r\n <div class=\"input-container debt\">\r\n <input type=\"number\" id=\"credit-cards\" value=\"200\" min=\"0\" step=\"50\">\r\n <div class=\"period-selector\">\r\n <button class=\"period-btn active\" data-period=\"month\">Month<\/button>\r\n <button class=\"period-btn\" data-period=\"year\">Year<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <div class=\"input-label\">\r\n <span>Auto Loan<\/span>\r\n <span>Monthly \/ Annual<\/span>\r\n <\/div>\r\n <div class=\"input-container debt\">\r\n <input type=\"number\" id=\"auto-loan\" value=\"250\" min=\"0\" step=\"50\">\r\n <div class=\"period-selector\">\r\n <button class=\"period-btn active\" data-period=\"month\">Month<\/button>\r\n <button class=\"period-btn\" data-period=\"year\">Year<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <div class=\"input-label\">\r\n <span>Student Loan<\/span>\r\n <span>Monthly \/ Annual<\/span>\r\n <\/div>\r\n <div class=\"input-container debt\">\r\n <input type=\"number\" id=\"student-loan\" value=\"0\" min=\"0\" step=\"50\">\r\n <div class=\"period-selector\">\r\n <button class=\"period-btn active\" data-period=\"month\">Month<\/button>\r\n <button class=\"period-btn\" data-period=\"year\">Year<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <div class=\"input-label\">\r\n <span>Other Loans & Liabilities<\/span>\r\n <span>Personal loan, child support, alimony, etc.<\/span>\r\n <\/div>\r\n <div class=\"input-container debt\">\r\n <input type=\"number\" id=\"other-debts\" value=\"0\" min=\"0\" step=\"50\">\r\n <div class=\"period-selector\">\r\n <button class=\"period-btn active\" data-period=\"month\">Month<\/button>\r\n <button class=\"period-btn\" data-period=\"year\">Year<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"calculator-actions\">\r\n <button class=\"reset-btn\" id=\"resetBtn\">\r\n <i class=\"fas fa-redo\"><\/i> Reset All Values\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"results-section\">\r\n <div class=\"results-header\">\r\n <h2 class=\"section-title\"><i class=\"fas fa-chart-line\"><\/i> Results<\/h2>\r\n <button class=\"calculate-btn\" id=\"calculateBtn\">\r\n <i class=\"fas fa-calculator\"><\/i> Calculate DTI\r\n <\/button>\r\n <\/div>\r\n \r\n <div class=\"result-cards\">\r\n <div class=\"result-card front-end\">\r\n <div class=\"result-label\">Front-End Ratio<\/div>\r\n <div class=\"result-value\" id=\"frontEndRatio\">--%<\/div>\r\n <div class=\"result-status\" id=\"frontEndStatus\">Calculate to see status<\/div>\r\n <p style=\"margin-top: 10px; font-size: 0.9rem;\">Housing costs vs income<\/p>\r\n <\/div>\r\n \r\n <div class=\"result-card back-end\">\r\n <div class=\"result-label\">Back-End Ratio<\/div>\r\n <div class=\"result-value\" id=\"backEndRatio\">--%<\/div>\r\n <div class=\"result-status\" id=\"backEndStatus\">Calculate to see status<\/div>\r\n <p style=\"margin-top: 10px; font-size: 0.9rem;\">All debts vs income<\/p>\r\n <\/div>\r\n \r\n <div class=\"result-card health\">\r\n <div class=\"result-label\">Financial Health<\/div>\r\n <div class=\"result-value\" id=\"healthScore\">--<\/div>\r\n <div class=\"result-status\" id=\"healthStatus\">Calculate to see status<\/div>\r\n <p style=\"margin-top: 10px; font-size: 0.9rem;\">Based on your DTI<\/p>\r\n <\/div>\r\n \r\n <div class=\"result-card total\">\r\n <div class=\"result-label\">Monthly Cash Flow<\/div>\r\n <div class=\"result-value\" id=\"cashFlow\">$--<\/div>\r\n <div class=\"result-status\" id=\"cashFlowStatus\">Calculate to see status<\/div>\r\n <p style=\"margin-top: 10px; font-size: 0.9rem;\">Income minus debts<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"visualization\">\r\n <h3 style=\"margin-bottom: 20px; color: var(--secondary);\">DTI Ratio Visualization<\/h3>\r\n \r\n <div class=\"progress-container\">\r\n <div class=\"progress-label\">\r\n <span>Front-End Ratio<\/span>\r\n <span id=\"frontEndPercent\">0%<\/span>\r\n <\/div>\r\n <div class=\"progress-bar\">\r\n <div class=\"progress-fill front-end\" id=\"frontEndBar\" style=\"width: 0%\"><\/div>\r\n <div class=\"progress-marker\" style=\"left: 28%\" data-label=\"Conventional Limit (28%)\">\r\n <div class=\"progress-marker-label\">Conventional (28%)<\/div>\r\n <\/div>\r\n <div class=\"progress-marker\" style=\"left: 31%\" data-label=\"FHA Limit (31%)\">\r\n <div class=\"progress-marker-label\">FHA (31%)<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"progress-container\">\r\n <div class=\"progress-label\">\r\n <span>Back-End Ratio<\/span>\r\n <span id=\"backEndPercent\">0%<\/span>\r\n <\/div>\r\n <div class=\"progress-bar\">\r\n <div class=\"progress-fill back-end\" id=\"backEndBar\" style=\"width: 0%\"><\/div>\r\n <div class=\"progress-marker\" style=\"left: 36%\" data-label=\"Conventional Limit (36%)\">\r\n <div class=\"progress-marker-label\">Conventional (36%)<\/div>\r\n <\/div>\r\n <div class=\"progress-marker\" style=\"left: 43%\" data-label=\"FHA Limit (43%)\">\r\n <div class=\"progress-marker-label\">FHA (43%)<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"info-section\">\r\n <div class=\"tabs\">\r\n <div class=\"tab active\" data-tab=\"what-is\">What is DTI?<\/div>\r\n <div class=\"tab\" data-tab=\"importance\">Why is it Important?<\/div>\r\n <div class=\"tab\" data-tab=\"lender-standards\">Lender Standards<\/div>\r\n <div class=\"tab\" data-tab=\"improve\">How to Improve<\/div>\r\n <div class=\"tab\" data-tab=\"recommendations\">Personalized Tips<\/div>\r\n <\/div>\r\n \r\n <div class=\"tab-content active\" id=\"what-is\">\r\n <h3><i class=\"fas fa-question-circle\"><\/i> What is a Debt-to-Income Ratio?<\/h3>\r\n <p>Debt-to-income ratio (DTI) is the ratio of total debt payments divided by gross income (before tax) expressed as a percentage, usually on either a monthly or annual basis.<\/p>\r\n <p>As a quick example, if someone's monthly income is $1,000 and they spend $480 on debt each month, their DTI ratio is 48%. If they had no debt, their ratio is 0%.<\/p>\r\n <p>There are two main types of DTI ratios:<\/p>\r\n <ul style=\"margin-left: 20px; margin-top: 10px;\">\r\n <li><span class=\"highlight\">Front-End Ratio:<\/span> Also called mortgage-to-income ratio, includes housing costs like rent\/mortgage, insurance, property taxes, and HOA fees.<\/li>\r\n <li><span class=\"highlight\">Back-End Ratio:<\/span> The more comprehensive ratio that includes all debts (housing, credit cards, loans, etc.).<\/li>\r\n <\/ul>\r\n <\/div>\r\n \r\n <div class=\"tab-content\" id=\"importance\">\r\n <h3><i class=\"fas fa-exclamation-triangle\"><\/i> Why is DTI Important?<\/h3>\r\n <p>DTI is a critical indicator of a person's or family's debt level. Lenders use this figure to assess the risk of lending to them.<\/p>\r\n <p>Credit card issuers, loan companies, and mortgage lenders all use DTI to evaluate their risk when extending credit. A person with a high ratio is seen by lenders as someone that might not be able to repay what they owe.<\/p>\r\n <p>Different lenders have different standards for what an acceptable DTI is. Theoretically, the lower the ratio, the better.<\/p>\r\n <p>DTI ratios are also useful for evaluating personal financial health. In the United States:<\/p>\r\n <ul style=\"margin-left: 20px; margin-top: 10px;\">\r\n <li>A DTI of <span class=\"highlight\">1\/3 (33%) or less<\/span> is considered manageable<\/li>\r\n <li>A DTI of <span class=\"highlight\">1\/2 (50%) or more<\/span> is generally considered too high<\/li>\r\n <\/ul>\r\n <\/div>\r\n \r\n <div class=\"tab-content\" id=\"lender-standards\">\r\n <h3><i class=\"fas fa-university\"><\/i> Lender DTI Standards<\/h3>\r\n <p>Different types of lenders have different maximum DTI ratios for loan approval:<\/p>\r\n <table class=\"comparison-table\">\r\n <thead>\r\n <tr>\r\n <th>Loan Type<\/th>\r\n <th>Front-End Limit<\/th>\r\n <th>Back-End Limit<\/th>\r\n <th>Typical Use<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td>Conventional Mortgage<\/td>\r\n <td class=\"good\">28%<\/td>\r\n <td class=\"good\">36%<\/td>\r\n <td>Standard home loans<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>FHA Loan<\/td>\r\n <td class=\"fair\">31%<\/td>\r\n <td class=\"fair\">43%<\/td>\r\n <td>Government-backed mortgages<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>VA Loan<\/td>\r\n <td class=\"fair\">41%<\/td>\r\n <td class=\"fair\">41%<\/td>\r\n <td>Veterans\/military<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Credit Cards<\/td>\r\n <td>N\/A<\/td>\r\n <td class=\"poor\">45-50%<\/td>\r\n <td>Unsecured credit<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <p style=\"margin-top: 15px;\">Note: These are general guidelines. Individual lenders may have more restrictive standards based on credit score, down payment, and other factors.<\/p>\r\n <\/div>\r\n \r\n <div class=\"tab-content\" id=\"improve\">\r\n <h3><i class=\"fas fa-chart-line\"><\/i> How to Improve Your DTI Ratio<\/h3>\r\n <ul class=\"tips-list\">\r\n <li><i class=\"fas fa-money-check-alt\"><\/i> <strong>Increase Income:<\/strong> Work overtime, take on a second job, ask for a raise, or generate money from a hobby\/side business.<\/li>\r\n <li><i class=\"fas fa-piggy-bank\"><\/i> <strong>Reduce Expenses:<\/strong> Create and stick to a budget to identify areas where you can cut spending.<\/li>\r\n <li><i class=\"fas fa-credit-card\"><\/i> <strong>Lower Debt Costs:<\/strong> Refinance high-interest debts, consolidate loans, or negotiate lower interest rates with creditors.<\/li>\r\n <li><i class=\"fas fa-ban\"><\/i> <strong>Avoid New Debt:<\/strong> Stop taking on new debt while you work to pay down existing balances.<\/li>\r\n <li><i class=\"fas fa-calendar-alt\"><\/i> <strong>Make Extra Payments:<\/strong> Apply any extra money toward your highest interest debt first (debt avalanche method).<\/li>\r\n <\/ul>\r\n <\/div>\r\n \r\n <div class=\"tab-content\" id=\"recommendations\">\r\n <h3><i class=\"fas fa-lightbulb\"><\/i> Personalized Recommendations<\/h3>\r\n <p id=\"recommendation-text\">Calculate your DTI to see personalized recommendations based on your financial situation.<\/p>\r\n <div id=\"recommendations-list\" style=\"margin-top: 20px;\"><\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <footer>\r\n <p>Advanced DTI Ratio Calculator \u00a9 2023 | Financial Health Analyzer<\/p>\r\n <div class=\"financial-links\">\r\n <a href=\"#\">Budget Calculator<\/a>\r\n <a href=\"#\">House Affordability Calculator<\/a>\r\n <a href=\"#\">Debt Consolidation Calculator<\/a>\r\n <a href=\"#\">Credit Card Payoff Calculator<\/a>\r\n <a href=\"#\">Mortgage Calculator<\/a>\r\n <a href=\"#\">Loan Comparison Tool<\/a>\r\n <\/div>\r\n <p style=\"margin-top: 20px;\">Disclaimer: This calculator provides estimates for educational purposes only. Consult with a financial advisor for personalized advice.<\/p>\r\n <\/footer>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n \/\/ Initialize\r\n calculateDTI();\r\n \r\n \/\/ Event Listeners\r\n document.getElementById('calculateBtn').addEventListener('click', calculateDTI);\r\n document.getElementById('resetBtn').addEventListener('click', resetValues);\r\n \r\n \/\/ Period selector buttons\r\n document.querySelectorAll('.period-btn').forEach(btn => {\r\n btn.addEventListener('click', function() {\r\n const container = this.closest('.period-selector');\r\n container.querySelectorAll('.period-btn').forEach(b => b.classList.remove('active'));\r\n this.classList.add('active');\r\n calculateDTI();\r\n });\r\n });\r\n \r\n \/\/ Tab switching\r\n document.querySelectorAll('.tab').forEach(tab => {\r\n tab.addEventListener('click', function() {\r\n const tabId = this.getAttribute('data-tab');\r\n \r\n \/\/ Update active tab\r\n document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));\r\n this.classList.add('active');\r\n \r\n \/\/ Show active content\r\n document.querySelectorAll('.tab-content').forEach(content => {\r\n content.classList.remove('active');\r\n });\r\n document.getElementById(tabId).classList.add('active');\r\n });\r\n });\r\n \r\n \/\/ Auto-calculate on input change\r\n document.querySelectorAll('input').forEach(input => {\r\n input.addEventListener('input', calculateDTI);\r\n });\r\n \r\n \/\/ Functions\r\n function calculateDTI() {\r\n \/\/ Get all income values (convert to monthly)\r\n const salary = parseFloat(document.getElementById('salary').value) || 0;\r\n const salaryPeriod = document.querySelector('#salary').closest('.input-container').querySelector('.period-btn.active').textContent;\r\n const salaryMonthly = salaryPeriod === 'Year' ? salary \/ 12 : salary;\r\n \r\n const pension = parseFloat(document.getElementById('pension').value) || 0;\r\n const pensionPeriod = document.querySelector('#pension').closest('.input-container').querySelector('.period-btn.active').textContent;\r\n const pensionMonthly = pensionPeriod === 'Year' ? pension \/ 12 : pension;\r\n \r\n const investment = parseFloat(document.getElementById('investment').value) || 0;\r\n const investmentPeriod = document.querySelector('#investment').closest('.input-container').querySelector('.period-btn.active').textContent;\r\n const investmentMonthly = investmentPeriod === 'Year' ? investment \/ 12 : investment;\r\n \r\n const otherIncome = parseFloat(document.getElementById('other-income').value) || 0;\r\n const otherIncomePeriod = document.querySelector('#other-income').closest('.input-container').querySelector('.period-btn.active').textContent;\r\n const otherIncomeMonthly = otherIncomePeriod === 'Year' ? otherIncome \/ 12 : otherIncome;\r\n \r\n \/\/ Total monthly income\r\n const totalMonthlyIncome = salaryMonthly + pensionMonthly + investmentMonthly + otherIncomeMonthly;\r\n \r\n \/\/ Get all debt\/expense values (convert to monthly)\r\n const rent = parseFloat(document.getElementById('rent').value) || 0;\r\n const rentPeriod = document.querySelector('#rent').closest('.input-container').querySelector('.period-btn.active').textContent;\r\n const rentMonthly = rentPeriod === 'Year' ? rent \/ 12 : rent;\r\n \r\n const propertyTax = parseFloat(document.getElementById('property-tax').value) || 0;\r\n const propertyTaxPeriod = document.querySelector('#property-tax').closest('.input-container').querySelector('.period-btn.active').textContent;\r\n const propertyTaxMonthly = propertyTaxPeriod === 'Year' ? propertyTax \/ 12 : propertyTax;\r\n \r\n const hoa = parseFloat(document.getElementById('hoa').value) || 0;\r\n const hoaPeriod = document.querySelector('#hoa').closest('.input-container').querySelector('.period-btn.active').textContent;\r\n const hoaMonthly = hoaPeriod === 'Year' ? hoa \/ 12 : hoa;\r\n \r\n const insurance = parseFloat(document.getElementById('insurance').value) || 0;\r\n const insurancePeriod = document.querySelector('#insurance').closest('.input-container').querySelector('.period-btn.active').textContent;\r\n const insuranceMonthly = insurancePeriod === 'Year' ? insurance \/ 12 : insurance;\r\n \r\n const creditCards = parseFloat(document.getElementById('credit-cards').value) || 0;\r\n const creditCardsPeriod = document.querySelector('#credit-cards').closest('.input-container').querySelector('.period-btn.active').textContent;\r\n const creditCardsMonthly = creditCardsPeriod === 'Year' ? creditCards \/ 12 : creditCards;\r\n \r\n const autoLoan = parseFloat(document.getElementById('auto-loan').value) || 0;\r\n const autoLoanPeriod = document.querySelector('#auto-loan').closest('.input-container').querySelector('.period-btn.active').textContent;\r\n const autoLoanMonthly = autoLoanPeriod === 'Year' ? autoLoan \/ 12 : autoLoan;\r\n \r\n const studentLoan = parseFloat(document.getElementById('student-loan').value) || 0;\r\n const studentLoanPeriod = document.querySelector('#student-loan').closest('.input-container').querySelector('.period-btn.active').textContent;\r\n const studentLoanMonthly = studentLoanPeriod === 'Year' ? studentLoan \/ 12 : studentLoan;\r\n \r\n const otherDebts = parseFloat(document.getElementById('other-debts').value) || 0;\r\n const otherDebtsPeriod = document.querySelector('#other-debts').closest('.input-container').querySelector('.period-btn.active').textContent;\r\n const otherDebtsMonthly = otherDebtsPeriod === 'Year' ? otherDebts \/ 12 : otherDebts;\r\n \r\n \/\/ Calculate housing costs (front-end debts)\r\n const totalHousingMonthly = rentMonthly + propertyTaxMonthly + hoaMonthly + insuranceMonthly;\r\n \r\n \/\/ Calculate total debts (back-end debts)\r\n const totalDebtsMonthly = totalHousingMonthly + creditCardsMonthly + autoLoanMonthly + studentLoanMonthly + otherDebtsMonthly;\r\n \r\n \/\/ Calculate ratios\r\n const frontEndRatio = totalMonthlyIncome > 0 ? (totalHousingMonthly \/ totalMonthlyIncome) * 100 : 0;\r\n const backEndRatio = totalMonthlyIncome > 0 ? (totalDebtsMonthly \/ totalMonthlyIncome) * 100 : 0;\r\n \r\n \/\/ Calculate cash flow\r\n const monthlyCashFlow = totalMonthlyIncome - totalDebtsMonthly;\r\n \r\n \/\/ Determine health score\r\n let healthScore, healthStatus, healthClass;\r\n \r\n if (backEndRatio <= 20) {\r\n healthScore = \"Excellent\";\r\n healthStatus = \"Low debt burden\";\r\n healthClass = \"status-good\";\r\n } else if (backEndRatio <= 33) {\r\n healthScore = \"Good\";\r\n healthStatus = \"Manageable debt\";\r\n healthClass = \"status-good\";\r\n } else if (backEndRatio <= 43) {\r\n healthScore = \"Fair\";\r\n healthStatus = \"Moderate debt burden\";\r\n healthClass = \"status-warning\";\r\n } else if (backEndRatio <= 50) {\r\n healthScore = \"Poor\";\r\n healthStatus = \"High debt burden\";\r\n healthClass = \"status-warning\";\r\n } else {\r\n healthScore = \"Critical\";\r\n healthStatus = \"Very high debt burden\";\r\n healthClass = \"status-danger\";\r\n }\r\n \r\n \/\/ Determine front-end status\r\n let frontEndStatus, frontEndClass;\r\n \r\n if (frontEndRatio <= 28) {\r\n frontEndStatus = \"Within conventional limits\";\r\n frontEndClass = \"status-good\";\r\n } else if (frontEndRatio <= 31) {\r\n frontEndStatus = \"Within FHA limits\";\r\n frontEndClass = \"status-warning\";\r\n } else if (frontEndRatio <= 41) {\r\n frontEndStatus = \"Within VA limits\";\r\n frontEndClass = \"status-warning\";\r\n } else {\r\n frontEndStatus = \"Above standard limits\";\r\n frontEndClass = \"status-danger\";\r\n }\r\n \r\n \/\/ Determine back-end status\r\n let backEndStatus, backEndClass;\r\n \r\n if (backEndRatio <= 36) {\r\n backEndStatus = \"Within conventional limits\";\r\n backEndClass = \"status-good\";\r\n } else if (backEndRatio <= 43) {\r\n backEndStatus = \"Within FHA limits\";\r\n backEndClass = \"status-warning\";\r\n } else if (backEndRatio <= 50) {\r\n backEndStatus = \"High but may qualify\";\r\n backEndClass = \"status-warning\";\r\n } else {\r\n backEndStatus = \"Above typical limits\";\r\n backEndClass = \"status-danger\";\r\n }\r\n \r\n \/\/ Determine cash flow status\r\n let cashFlowStatus, cashFlowClass;\r\n \r\n if (monthlyCashFlow >= totalMonthlyIncome * 0.3) {\r\n cashFlowStatus = \"Strong surplus\";\r\n cashFlowClass = \"status-good\";\r\n } else if (monthlyCashFlow >= 0) {\r\n cashFlowStatus = \"Positive cash flow\";\r\n cashFlowClass = \"status-good\";\r\n } else if (monthlyCashFlow >= -500) {\r\n cashFlowStatus = \"Minor deficit\";\r\n cashFlowClass = \"status-warning\";\r\n } else {\r\n cashFlowStatus = \"Significant deficit\";\r\n cashFlowClass = \"status-danger\";\r\n }\r\n \r\n \/\/ Update UI with results\r\n document.getElementById('frontEndRatio').textContent = frontEndRatio.toFixed(1) + '%';\r\n document.getElementById('frontEndStatus').textContent = frontEndStatus;\r\n document.getElementById('frontEndStatus').className = `result-status ${frontEndClass}`;\r\n \r\n document.getElementById('backEndRatio').textContent = backEndRatio.toFixed(1) + '%';\r\n document.getElementById('backEndStatus').textContent = backEndStatus;\r\n document.getElementById('backEndStatus').className = `result-status ${backEndClass}`;\r\n \r\n document.getElementById('healthScore').textContent = healthScore;\r\n document.getElementById('healthStatus').textContent = healthStatus;\r\n document.getElementById('healthStatus').className = `result-status ${healthClass}`;\r\n \r\n const cashFlowFormatted = monthlyCashFlow >= 0 ? `$${monthlyCashFlow.toFixed(2)}` : `-$${Math.abs(monthlyCashFlow).toFixed(2)}`;\r\n document.getElementById('cashFlow').textContent = cashFlowFormatted;\r\n document.getElementById('cashFlowStatus').textContent = cashFlowStatus;\r\n document.getElementById('cashFlowStatus').className = `result-status ${cashFlowClass}`;\r\n \r\n \/\/ Update progress bars\r\n const frontEndBarWidth = Math.min(frontEndRatio, 100);\r\n const backEndBarWidth = Math.min(backEndRatio, 100);\r\n \r\n document.getElementById('frontEndBar').style.width = frontEndBarWidth + '%';\r\n document.getElementById('frontEndPercent').textContent = frontEndRatio.toFixed(1) + '%';\r\n \r\n document.getElementById('backEndBar').style.width = backEndBarWidth + '%';\r\n document.getElementById('backEndPercent').textContent = backEndRatio.toFixed(1) + '%';\r\n \r\n \/\/ Generate personalized recommendations\r\n generateRecommendations(frontEndRatio, backEndRatio, monthlyCashFlow, totalMonthlyIncome);\r\n }\r\n \r\n function generateRecommendations(frontEndRatio, backEndRatio, cashFlow, income) {\r\n let recommendations = [];\r\n const recommendationText = document.getElementById('recommendation-text');\r\n const recommendationsList = document.getElementById('recommendations-list');\r\n \r\n recommendationText.textContent = `Based on your DTI ratios of ${frontEndRatio.toFixed(1)}% (front-end) and ${backEndRatio.toFixed(1)}% (back-end), here are personalized recommendations:`;\r\n \r\n recommendationsList.innerHTML = '';\r\n \r\n if (backEndRatio > 43) {\r\n recommendations.push({\r\n icon: 'fa-exclamation-triangle',\r\n title: 'Reduce Debt Immediately',\r\n text: 'Your back-end DTI is above typical mortgage qualification limits. Focus on paying down high-interest debt first.'\r\n });\r\n }\r\n \r\n if (frontEndRatio > 28) {\r\n recommendations.push({\r\n icon: 'fa-home',\r\n title: 'Consider Lower Housing Costs',\r\n text: 'Your housing costs are above conventional limits. If possible, look for ways to reduce your housing expenses.'\r\n });\r\n }\r\n \r\n if (cashFlow < 0) {\r\n recommendations.push({\r\n icon: 'fa-balance-scale',\r\n title: 'Address Negative Cash Flow',\r\n text: `You're spending $${Math.abs(cashFlow).toFixed(2)} more than you earn each month. This is unsustainable long-term.`\r\n });\r\n }\r\n \r\n if (backEndRatio <= 33 && cashFlow > income * 0.2) {\r\n recommendations.push({\r\n icon: 'fa-piggy-bank',\r\n title: 'Build Emergency Fund',\r\n text: 'Your financial position is strong. Consider building a 3-6 month emergency fund with your surplus cash flow.'\r\n });\r\n }\r\n \r\n if (backEndRatio > 20 && backEndRatio <= 43) {\r\n recommendations.push({\r\n icon: 'fa-chart-line',\r\n title: 'Consider Debt Consolidation',\r\n text: 'If you have multiple high-interest debts, consolidating them into a lower-rate loan could save you money.'\r\n });\r\n }\r\n \r\n if (recommendations.length === 0) {\r\n recommendations.push({\r\n icon: 'fa-check-circle',\r\n title: 'Excellent Financial Health',\r\n text: 'Your DTI ratios are in healthy ranges. Continue managing your finances responsibly.'\r\n });\r\n }\r\n \r\n \/\/ Add 1-2 general recommendations\r\n if (recommendations.length < 3) {\r\n recommendations.push({\r\n icon: 'fa-budget',\r\n title: 'Create a Detailed Budget',\r\n text: 'Track all income and expenses to identify areas for potential savings.'\r\n });\r\n \r\n if (backEndRatio > 20) {\r\n recommendations.push({\r\n icon: 'fa-credit-card',\r\n title: 'Avoid New Debt',\r\n text: 'Focus on paying down existing debt before taking on any new financial obligations.'\r\n });\r\n }\r\n }\r\n \r\n \/\/ Display recommendations\r\n recommendations.forEach(rec => {\r\n const recElement = document.createElement('div');\r\n recElement.className = 'tip-item';\r\n recElement.style.cssText = 'padding: 15px; margin-bottom: 15px; background: #f8f9fa; border-radius: 10px; border-left: 4px solid #4361ee;';\r\n recElement.innerHTML = `\r\n <div style=\"display: flex; align-items: flex-start; gap: 10px;\">\r\n <i class=\"fas ${rec.icon}\" style=\"color: #4361ee; font-size: 1.2rem; margin-top: 3px;\"><\/i>\r\n <div>\r\n <h4 style=\"margin-bottom: 5px; color: #212529;\">${rec.title}<\/h4>\r\n <p style=\"color: #495057; margin: 0;\">${rec.text}<\/p>\r\n <\/div>\r\n <\/div>\r\n `;\r\n recommendationsList.appendChild(recElement);\r\n });\r\n }\r\n \r\n function resetValues() {\r\n \/\/ Reset all inputs to their default values\r\n document.getElementById('salary').value = 60000;\r\n document.getElementById('pension').value = 0;\r\n document.getElementById('investment').value = 0;\r\n document.getElementById('other-income').value = 0;\r\n document.getElementById('rent').value = 1200;\r\n document.getElementById('property-tax').value = 0;\r\n document.getElementById('hoa').value = 0;\r\n document.getElementById('insurance').value = 0;\r\n document.getElementById('credit-cards').value = 200;\r\n document.getElementById('auto-loan').value = 250;\r\n document.getElementById('student-loan').value = 0;\r\n document.getElementById('other-debts').value = 0;\r\n \r\n \/\/ Reset period selectors to default (Year for incomes, Month for debts)\r\n document.querySelectorAll('.input-container.income .period-selector .period-btn').forEach(btn => {\r\n btn.classList.remove('active');\r\n if (btn.textContent === 'Year') btn.classList.add('active');\r\n });\r\n \r\n document.querySelectorAll('.input-container.debt .period-selector .period-btn').forEach(btn => {\r\n btn.classList.remove('active');\r\n if (btn.textContent === 'Month') btn.classList.add('active');\r\n });\r\n \r\n \/\/ Recalculate\r\n calculateDTI();\r\n \r\n \/\/ Show confirmation\r\n alert('All values have been reset to their defaults.');\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\n\n\n\n<h1 class=\"wp-block-heading\">Advanced Debt-to-Income (DTI) Ratio Calculator<\/h1>\n\n\n\n<p><strong>Your Comprehensive Financial Health Diagnostic Tool<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<p>The Advanced DTI Ratio Calculator is a sophisticated, all-in-one financial assessment platform that goes far beyond basic debt calculations. This professional-grade tool provides deep insights into your financial standing, helping you understand your debt burden, qualify for loans, and improve your overall financial health.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Key Features<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udd0d <strong>Dual Ratio Analysis<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Front-End Ratio<\/strong>: Measures housing expenses (rent\/mortgage, insurance, taxes, HOA) against income<\/li>\n\n\n\n<li><strong>Back-End Ratio<\/strong>: Comprehensive analysis including all debts (credit cards, loans, housing costs)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udcca <strong>Interactive Financial Dashboard<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Real-time visual progress bars with lender limit markers<\/li>\n\n\n\n<li>Color-coded financial health assessment (Excellent \u2192 Critical)<\/li>\n\n\n\n<li>Monthly cash flow calculation with surplus\/deficit indicators<\/li>\n\n\n\n<li>Responsive design that updates instantly as you input data<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83c\udfaf <strong>Personalized Financial Insights<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Smart Recommendations<\/strong>: Customized advice based on your specific DTI situation<\/li>\n\n\n\n<li><strong>Lender Qualification Guide<\/strong>: Shows how you compare against Conventional, FHA, and VA loan standards<\/li>\n\n\n\n<li><strong>Financial Health Score<\/strong>: Simple letter-grade assessment of your debt burden<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udcc8 <strong>Advanced Functionality<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Flexible input system (toggle between monthly\/annual entries)<\/li>\n\n\n\n<li>Comprehensive income tracking (salary, investments, pensions, other sources)<\/li>\n\n\n\n<li>Detailed expense categorization (housing, loans, credit cards, insurance)<\/li>\n\n\n\n<li>Side-by-side comparison with industry lending standards<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83e\udde0 <strong>Educational Resources<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tab-based information system explaining DTI fundamentals<\/li>\n\n\n\n<li>Lender requirement comparisons in easy-to-read tables<\/li>\n\n\n\n<li>Actionable strategies for improving your DTI ratio<\/li>\n\n\n\n<li>Budgeting and debt reduction techniques<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Who Should Use This Calculator?<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83c\udfe0 <strong>Home Buyers & Renters<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Determine how much house you can realistically afford<\/li>\n\n\n\n<li>Understand mortgage qualification requirements<\/li>\n\n\n\n<li>Plan for homeownership expenses<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udcb3 <strong>Debt Management<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Assess your current debt burden<\/li>\n\n\n\n<li>Identify problematic debt levels<\/li>\n\n\n\n<li>Create a plan to reduce debt<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udccb <strong>Financial Planning<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Evaluate overall financial health<\/li>\n\n\n\n<li>Plan for major purchases<\/li>\n\n\n\n<li>Prepare for loan applications<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udd04 <strong>Refinancing Candidates<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Check if you qualify for better rates<\/li>\n\n\n\n<li>Assess debt consolidation opportunities<\/li>\n\n\n\n<li>Understand lender risk assessment<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Technical Capabilities<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udcf1 <strong>User Experience<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Modern, intuitive interface with visual feedback<\/li>\n\n\n\n<li>Mobile-responsive design<\/li>\n\n\n\n<li>One-click calculations<\/li>\n\n\n\n<li>Easy reset functionality<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udd22 <strong>Calculation Accuracy<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Precision to 0.1% for DTI ratios<\/li>\n\n\n\n<li>Automatic period conversions (monthly\u2194annual)<\/li>\n\n\n\n<li>Real-time updates without page refresh<\/li>\n\n\n\n<li>Error-free financial computations<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udccb <strong>Comprehensive Reporting<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Clear visual indicators of financial status<\/li>\n\n\n\n<li>Comparison against multiple lending standards<\/li>\n\n\n\n<li>Personalized improvement recommendations<\/li>\n\n\n\n<li>Educational context for all results<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Why Choose This Calculator?<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83c\udf1f <strong>Beyond Basic Calculations<\/strong><\/h3>\n\n\n\n<p>Unlike simple DTI calculators, this advanced tool provides:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Context<\/strong>: How your numbers compare to real lender requirements<\/li>\n\n\n\n<li><strong>Guidance<\/strong>: Specific steps to improve your financial position<\/li>\n\n\n\n<li><strong>Clarity<\/strong>: Visual representations of complex financial concepts<\/li>\n\n\n\n<li><strong>Planning<\/strong>: Tools to forecast and improve your financial future<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udee1\ufe0f <strong>Financial Empowerment<\/strong><\/h3>\n\n\n\n<p>This calculator transforms raw numbers into actionable intelligence, helping you:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Make informed borrowing decisions<\/li>\n\n\n\n<li>Negotiate better loan terms<\/li>\n\n\n\n<li>Build stronger credit profiles<\/li>\n\n\n\n<li>Achieve long-term financial stability<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Perfect For:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First-time home buyers navigating mortgage requirements<\/li>\n\n\n\n<li>Individuals considering debt consolidation<\/li>\n\n\n\n<li>Families planning major financial decisions<\/li>\n\n\n\n<li>Anyone wanting to improve their creditworthiness<\/li>\n\n\n\n<li>Financial advisors helping clients understand debt ratios<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>Transform your financial understanding with a calculator that doesn’t just crunch numbers\u2014it provides clarity, context, and a path forward.<\/strong><\/p>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>\ud83c\udfaf How to Use the Advanced DTI Ratio Calculator: Simple Step-by-Step Guide<\/strong><\/h1>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcf1 Getting Started<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. LOOK AT THE LAYOUT<\/strong><\/h3>\n\n\n\n<p>The calculator has <strong>two main sections<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>LEFT SIDEBAR<\/strong> (Green & Orange areas) \u2192 Where you INPUT your numbers<\/li>\n\n\n\n<li><strong>MAIN DASHBOARD<\/strong> (Right side) \u2192 Where you SEE your results<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcdd STEP 1: Enter Your INCOME (Green Section)<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>What to Fill In:<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Find the “Salary & Earned Income” box<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Type your yearly salary (example: <code>60000<\/code> for $60,000\/year)<\/li>\n\n\n\n<li><strong>Leave it on “Year”<\/strong> (the blue button)<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Find “Investment Income” box<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Type income from investments, rentals, dividends<\/li>\n\n\n\n<li><strong>Example<\/strong>: <code>5000<\/code> if you earn $5,000\/year from investments<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Find “Other Income” box<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Type side hustle income, bonuses, gifts<\/li>\n\n\n\n<li><strong>Example<\/strong>: <code>2400<\/code> for $200\/month freelance work<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>TIP<\/strong>: Most people only need to fill in the Salary box if that’s their main income!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcb3 STEP 2: Enter Your MONTHLY DEBTS (Orange Section)<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>What to Fill In:<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Find “Housing Payment” box<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Type your rent or mortgage payment<\/li>\n\n\n\n<li><strong>Example<\/strong>: <code>1200<\/code> for $1,200\/month rent<\/li>\n\n\n\n<li><strong>Make sure it says “Month”<\/strong> (the blue button)<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Find “Auto Loan” box<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Type your car payment<\/li>\n\n\n\n<li><strong>Example<\/strong>: <code>350<\/code> for $350\/month car payment<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Find “Credit Cards” box<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Type TOTAL minimum payments for ALL credit cards<\/li>\n\n\n\n<li><strong>Example<\/strong>: <code>250<\/code> if you pay $250\/month across all cards<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Find “Other Debts” box<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Type student loans, personal loans, medical payments<\/li>\n\n\n\n<li><strong>Example<\/strong>: <code>400<\/code> for $400\/month student loan<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>TIP<\/strong>: Add up ALL your monthly debt payments – even small ones count!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u26a1 STEP 3: See Your Results INSTANTLY!<\/strong><\/h2>\n\n\n\n<p><strong>The calculator updates AUTOMATICALLY as you type!<\/strong> No need to click anything.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Look at the RIGHT SIDE for your results:<\/strong><\/h3>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcca UNDERSTANDING YOUR RESULTS<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\ud83d\udd22 The 4 MAIN NUMBERS to Check:<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Front-End Ratio<\/strong> (Purple Card)<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>What it means<\/strong>: Housing costs \u00f7 Your income<\/li>\n\n\n\n<li><strong>Good if<\/strong>: Below 28%<\/li>\n\n\n\n<li><strong>Color<\/strong>: Green = Good, Yellow = Okay, Red = Too High<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Back-End Ratio<\/strong> (Pink Card)<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>What it means<\/strong>: ALL debts \u00f7 Your income<\/li>\n\n\n\n<li><strong>Good if<\/strong>: Below 36%<\/li>\n\n\n\n<li><strong>Color<\/strong>: Green = Good, Yellow = Okay, Red = Too High<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Financial Health<\/strong> (Blue Card)<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>What it means<\/strong>: Overall financial grade<\/li>\n\n\n\n<li><strong>Good if<\/strong>: B+ or higher<\/li>\n\n\n\n<li><strong>Example<\/strong>: A = Excellent, C = Needs Work<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Monthly Cash Flow<\/strong> (Orange Card)<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>What it means<\/strong>: Money left after all bills<\/li>\n\n\n\n<li><strong>Good if<\/strong>: Positive number (not negative)<\/li>\n\n\n\n<li><strong>Example<\/strong>: $1,200 = You have $1,200 left each month<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcc8 The VISUAL CHARTS<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Chart 1: Income vs Debt Doughnut<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Green part<\/strong>: Your income<\/li>\n\n\n\n<li><strong>Red part<\/strong>: Your debt payments<\/li>\n\n\n\n<li><strong>What to look for<\/strong>: More green = Better!<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Chart 2: Debt Breakdown Bars<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Shows which debts are biggest<\/li>\n\n\n\n<li><strong>Taller bars<\/strong> = bigger monthly payments<\/li>\n\n\n\n<li>Helps you see where to focus on paying down debt<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udccf The PROGRESS BARS<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Two Progress Bars Below Charts:<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Top Bar<\/strong>: Front-End Ratio progress<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Green markers<\/strong> show lender limits<\/li>\n\n\n\n<li>Your bar should stay LEFT of the markers<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Bottom Bar<\/strong>: Back-End Ratio progress<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Same principle<\/strong> – stay left of markers<\/li>\n\n\n\n<li>More markers = different lender standards<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>QUICK CHECK<\/strong>: If your color bar passes the markers, you need to improve your ratios.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udca1 USING THE TABS FOR HELP<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Click These Tabs at the Bottom:<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\ud83d\udccb Overview Tab<\/strong> \u2192 Basic DTI explanation<\/li>\n\n\n\n<li><strong>\ud83c\udfe6 Lender Standards Tab<\/strong> \u2192 What different lenders require<\/li>\n\n\n\n<li><strong>\ud83d\ude80 Improvement Strategies Tab<\/strong> \u2192 <strong>PERSONALIZED TIPS FOR YOU!<\/strong><\/li>\n\n\n\n<li><strong>\ud83d\udd0d Detailed Analysis Tab<\/strong> \u2192 Professional analysis of YOUR numbers<\/li>\n<\/ol>\n\n\n\n<p>\u2705 <strong>PRO TIP<\/strong>: The “Improvement Strategies” tab gives you SPECIFIC advice based on YOUR numbers!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udd04 IMPORTANT BUTTONS TO KNOW<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\ud83d\udd18 Calculate Button<\/strong> (Purple)<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click if you want to manually recalculate<\/li>\n\n\n\n<li><strong>But usually not needed<\/strong> – it calculates automatically!<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\ud83d\udd18 Reset Button<\/strong> (Gray)<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click to clear ALL numbers and start over<\/li>\n\n\n\n<li>Goes back to default example numbers<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\ud83d\udd04 Year\/Month Toggle Buttons<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Income boxes<\/strong>: Usually keep on “Year”<\/li>\n\n\n\n<li><strong>Debt boxes<\/strong>: Usually keep on “Month”<\/li>\n\n\n\n<li><strong>The calculator converts automatically<\/strong> – don’t worry about the math!<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83c\udfaf PRACTICAL EXAMPLES<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Example 1: Renter with Car Payment<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Salary<\/strong>: Type <code>55000<\/code> (for $55,000\/year job)<\/li>\n\n\n\n<li><strong>Housing<\/strong>: Type <code>1400<\/code> (apartment rent)<\/li>\n\n\n\n<li><strong>Auto Loan<\/strong>: Type <code>320<\/code> (car payment)<\/li>\n\n\n\n<li><strong>Credit Cards<\/strong>: Type <code>180<\/code> (minimum payments)<\/li>\n\n\n\n<li><strong>INSTANTLY SEE<\/strong>: If you can afford that new car you want!<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Example 2: Homeowner Planning Refinance<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Salary<\/strong>: Type <code>85000<\/code><\/li>\n\n\n\n<li><strong>Housing<\/strong>: Type <code>2100<\/code> (mortgage + taxes + insurance)<\/li>\n\n\n\n<li><strong>Other Debts<\/strong>: Type total of ALL loans<\/li>\n\n\n\n<li><strong>INSTANTLY SEE<\/strong>: If you qualify for better mortgage rates!<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udea8 COMMON MISTAKES TO AVOID<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u274c Don’t:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Mix up yearly and monthly numbers (use the toggle buttons!)<\/li>\n\n\n\n<li>Forget small debts (they ALL count!)<\/li>\n\n\n\n<li>Use take-home pay (use GROSS income – before taxes!)<\/li>\n\n\n\n<li>Ignore the color warnings (red means pay attention!)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u2705 Do:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use your actual paycheck gross amount<\/li>\n\n\n\n<li>Include ALL monthly debt payments<\/li>\n\n\n\n<li>Check the Improvement Strategies tab<\/li>\n\n\n\n<li>Try different “what-if” scenarios<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udd0d QUICK TROUBLESHOOTING<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Problem: Numbers seem wrong<\/strong><\/h3>\n\n\n\n<p><strong>Solution<\/strong>: Check if “Year\/Month” toggles are set correctly for each box!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Problem: Charts not updating<\/strong><\/h3>\n\n\n\n<p><strong>Solution<\/strong>: Click the purple “Calculate” button once<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Problem: Want to start over<\/strong><\/h3>\n\n\n\n<p><strong>Solution<\/strong>: Click the gray “Reset” button<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Problem: Don’t understand a term<\/strong><\/h3>\n\n\n\n<p><strong>Solution<\/strong>: Click the “Overview” tab for explanations<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcf1 USING ON MOBILE PHONE<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Everything works the same!<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Sidebar scrolls<\/strong> on smaller screens<\/li>\n\n\n\n<li><strong>Cards stack vertically<\/strong> for easy reading<\/li>\n\n\n\n<li><strong>Charts resize automatically<\/strong><\/li>\n\n\n\n<li><strong>Tabs work with touch<\/strong><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83c\udfaf WHEN TO USE THIS CALCULATOR<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Perfect for:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2705 <strong>Before applying for a loan<\/strong> (know if you’ll qualify)<\/li>\n\n\n\n<li>\u2705 <strong>Planning a big purchase<\/strong> (car, house, etc.)<\/li>\n\n\n\n<li>\u2705 <strong>Monthly budget check-ins<\/strong><\/li>\n\n\n\n<li>\u2705 <strong>Debt payoff planning<\/strong><\/li>\n\n\n\n<li>\u2705 <strong>Salary negotiation preparation<\/strong><\/li>\n\n\n\n<li>\u2705 <strong>Teaching financial literacy<\/strong><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udc8e QUICK SUMMARY<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3 EASY STEPS:<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Type<\/strong> your income in the GREEN boxes (usually yearly)<\/li>\n\n\n\n<li><strong>Type<\/strong> your monthly debts in the ORANGE boxes (monthly)<\/li>\n\n\n\n<li><strong>LOOK<\/strong> at the right side – your results appear instantly!<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3 THINGS TO CHECK:<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Are both ratios UNDER 36%?<\/li>\n\n\n\n<li>Is your Financial Health B+ or better?<\/li>\n\n\n\n<li>Is your Cash Flow POSITIVE?<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>If NO to any above:<\/strong><\/h3>\n\n\n\n<p>Click the <strong>“Improvement Strategies” tab<\/strong> for personalized advice!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83c\udf1f FINAL TIP<\/strong><\/h2>\n\n\n\n<p><strong>The calculator is FREE to use as many times as you want!<\/strong><\/p>\n\n\n\n<p>Try different scenarios:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>“What if I get a 10% raise?”<\/li>\n\n\n\n<li>“What if I pay off my credit card?”<\/li>\n\n\n\n<li>“What mortgage can I afford?”<\/li>\n<\/ul>\n\n\n\n<p><strong>Bookmark it for regular financial check-ups!<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>Ultimate DTI Financial Health Analyzer: Complete User Guide<\/strong><\/h1>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83c\udfc6 What Is This Calculator?<\/strong><\/h2>\n\n\n\n<p>The <strong>Ultimate DTI Financial Health Analyzer<\/strong> is a professional-grade financial dashboard that transforms complex debt and income analysis into beautiful, actionable insights. This isn’t just a basic calculator\u2014it’s a comprehensive financial wellness platform that combines real-time calculations, interactive visualizations, personalized recommendations, and educational content into one stunning interface.<\/p>\n\n\n\n<p>Think of it as having a <strong>personal financial advisor, data analyst, and loan officer<\/strong> all working together in a single, intuitive dashboard.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83c\udfaf Key Features That Make This Different<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Professional Financial Dashboard<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Beautiful Gradients<\/strong>: Modern color scheme with professional financial aesthetics<\/li>\n\n\n\n<li><strong>Interactive Cards<\/strong>: Hover effects, animations, and dynamic updates<\/li>\n\n\n\n<li><strong>Real-Time Visualization<\/strong>: Watch charts update as you type<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Dual-Chart Analytics System<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Income vs Debt Doughnut Chart<\/strong>: Visual proportion of income to debt<\/li>\n\n\n\n<li><strong>Debt Composition Bar Chart<\/strong>: Breakdown of where your money goes<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Smart Financial Scoring<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Letter Grade Assessment<\/strong>: Get an A+ through D financial health score<\/li>\n\n\n\n<li><strong>Color-Coded Status Indicators<\/strong>: Immediate visual feedback on your standing<\/li>\n\n\n\n<li><strong>Progress Trackers<\/strong>: Animated bars showing lender qualification levels<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4. Personalized Intelligence<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Custom Recommendations<\/strong>: Advice tailored to YOUR specific numbers<\/li>\n\n\n\n<li><strong>Improvement Strategies<\/strong>: Actionable steps to lower your DTI<\/li>\n\n\n\n<li><strong>Lender Comparisons<\/strong>: See how you stack up against different loan programs<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\ude80 How to Use the Calculator: Step-by-Step<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 1: Set Up Your Income (Left Sidebar – Green Section)<\/strong><\/h3>\n\n\n\n<p><strong>\ud83d\udccd Location<\/strong>: Look for the sidebar on the left with the “DTI Analyzer Pro” logo<\/p>\n\n\n\n<p><strong>\ud83d\udcdd What to Input:<\/strong><\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Salary & Earned Income<\/strong>: Your primary employment income\n<ul class=\"wp-block-list\">\n<li>Default: $60,000 annually<\/li>\n\n\n\n<li>Use the\u00a0<strong>Year\/Month toggle<\/strong>\u00a0to match how you track this<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Investment Income<\/strong>: Dividends, interest, rental income\n<ul class=\"wp-block-list\">\n<li>Use the toggle to select your tracking period<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Other Income<\/strong>: Side hustles, bonuses, gifts\n<ul class=\"wp-block-list\">\n<li>Toggle between annual\/monthly as needed<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p><strong>\ud83d\udca1 Pro Tip<\/strong>: Most users find it easiest to input annual salary and monthly debts, but the calculator handles any combination automatically!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2: Enter Your Monthly Debts (Left Sidebar – Orange Section)<\/strong><\/h3>\n\n\n\n<p><strong>\ud83d\udd0d Important<\/strong>: Lenders consider ALL recurring debts. Be thorough!<\/p>\n\n\n\n<p><strong>\ud83d\udcdd Required Debt Categories:<\/strong><\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Housing Payment<\/strong>: Rent, mortgage, plus any housing-related costs\n<ul class=\"wp-block-list\">\n<li>Default: $1,200 monthly<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Auto Loan<\/strong>: Car payment amount\n<ul class=\"wp-block-list\">\n<li>Default: $250 monthly<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Credit Cards<\/strong>: Minimum monthly payments across all cards\n<ul class=\"wp-block-list\">\n<li>Default: $200 monthly<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Other Debts<\/strong>: Student loans, personal loans, medical debt\n<ul class=\"wp-block-list\">\n<li>Default: $0 monthly<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p><strong>\ud83c\udfaf Key Feature<\/strong>: Each debt category has its own <strong>Year\/Month toggle<\/strong>\u2014use what’s most convenient!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 3: Click “Calculate” or Just Wait!<\/strong><\/h3>\n\n\n\n<p><strong>\u26a1 Two Ways to Calculate:<\/strong><\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Click the Purple “Calculate” Button<\/strong>\u00a0in the action buttons<\/li>\n\n\n\n<li><strong>Just Keep Typing<\/strong>\u2014the calculator updates automatically in real-time!<\/li>\n<\/ol>\n\n\n\n<p><strong>\u2705 What Happens Instantly:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>All results update immediately<\/li>\n\n\n\n<li>Charts animate to new values<\/li>\n\n\n\n<li>Progress bars fill with smooth animations<\/li>\n\n\n\n<li>Status indicators change color based on your standing<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcca Understanding Your Results Dashboard<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Top-Right Stats Bar<\/strong><\/h3>\n\n\n\n<p><strong>\ud83d\udccd Location<\/strong>: Upper right corner of main dashboard<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\ud83d\udcc8 Income<\/strong>: Your total monthly income (auto-converted)<\/li>\n\n\n\n<li><strong>\ud83d\udcc9 Debt<\/strong>: Your total monthly debt obligations<\/li>\n\n\n\n<li><strong>\ud83d\udca1 Purpose<\/strong>: Quick snapshot of your financial picture<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>The Four Main Result Cards<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>1. Front-End Ratio Card (Purple Gradient)<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>What it measures<\/strong>: Housing costs \u00f7 Gross monthly income<\/li>\n\n\n\n<li><strong>Healthy range<\/strong>: \u226428% for conventional loans<\/li>\n\n\n\n<li><strong>Color indicator<\/strong>: Green (Good), Yellow (Manageable), Red (High)<\/li>\n\n\n\n<li><strong>Icon<\/strong>: \ud83c\udfe0 House symbol<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>2. Back-End Ratio Card (Pink Gradient)<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>What it measures<\/strong>: All debts \u00f7 Gross monthly income<\/li>\n\n\n\n<li><strong>Healthy range<\/strong>: \u226436% for conventional loans<\/li>\n\n\n\n<li><strong>Color indicator<\/strong>: Green\/Yellow\/Red based on lender standards<\/li>\n\n\n\n<li><strong>Icon<\/strong>: \ud83d\udcca Chart symbol<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>3. Financial Health Card (Blue Gradient)<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>What it measures<\/strong>: Overall financial wellness score<\/li>\n\n\n\n<li><strong>Scale<\/strong>: A+ (Excellent) to D (Needs Improvement)<\/li>\n\n\n\n<li><strong>Based on<\/strong>: DTI ratios + cash flow + debt composition<\/li>\n\n\n\n<li><strong>Icon<\/strong>: \u2764\ufe0f Heartbeat symbol<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>4. Monthly Cash Flow Card (Orange Gradient)<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>What it measures<\/strong>: Income minus all expenses<\/li>\n\n\n\n<li><strong>Shows<\/strong>: Actual dollars remaining each month<\/li>\n\n\n\n<li><strong>Status<\/strong>: Strong, Positive, or Negative<\/li>\n\n\n\n<li><strong>Icon<\/strong>: \ud83d\udcb0 Wallet symbol<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Interactive Charts Section<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Chart 1: Income vs Debt Doughnut<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Visual<\/strong>: Shows proportion of income going to debt<\/li>\n\n\n\n<li><strong>Colors<\/strong>: Green for income, Red for debt<\/li>\n\n\n\n<li><strong>Interactive<\/strong>: Hover for exact percentages<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Chart 2: Debt Composition Bar Chart<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Visual<\/strong>: Breakdown of each debt category<\/li>\n\n\n\n<li><strong>Colors<\/strong>: Different colors for each debt type<\/li>\n\n\n\n<li><strong>Purpose<\/strong>: Identifies which debts dominate your payments<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Progress Visualization Section<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Front-End Progress Bar<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Shows<\/strong>: Your housing cost percentage<\/li>\n\n\n\n<li><strong>Marker lines<\/strong>: Lender limits (28%, 31%, 41%)<\/li>\n\n\n\n<li><strong>Animation<\/strong>: Smooth fill to your current percentage<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Back-End Progress Bar<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Shows<\/strong>: Your total debt percentage<\/li>\n\n\n\n<li><strong>Marker lines<\/strong>: Lender limits (36%, 43%, 50%)<\/li>\n\n\n\n<li><strong>Animation<\/strong>: Color-coded fill with lender comparisons<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcda Using the Information Tabs<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tab 1: Overview<\/strong><\/h3>\n\n\n\n<p><strong>What you’ll learn<\/strong>: DTI basics and why it matters<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Perfect for financial beginners<\/li>\n\n\n\n<li>Clear explanations of front-end vs back-end ratios<\/li>\n\n\n\n<li>Why lenders care about your DTI<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tab 2: Lender Standards<\/strong><\/h3>\n\n\n\n<p><strong>What you’ll find<\/strong>: Comparison of different loan requirements<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Conventional loans: 28%\/36%<\/li>\n\n\n\n<li>FHA loans: 31%\/43%<\/li>\n\n\n\n<li>VA loans: 41%\/41%<\/li>\n\n\n\n<li>Quick reference for mortgage planning<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tab 3: Improvement Strategies<\/strong><\/h3>\n\n\n\n<p><strong>What you get<\/strong>: Personalized recommendations based on YOUR numbers<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Dynamic content<\/strong>: Changes based on your input<\/li>\n\n\n\n<li><strong>Actionable steps<\/strong>: Specific things you can do today<\/li>\n\n\n\n<li><strong>Priority order<\/strong>: Most important improvements first<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tab 4: Detailed Analysis<\/strong><\/h3>\n\n\n\n<p><strong>What’s included<\/strong>: Professional analysis of your situation<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Written explanation of your specific numbers<\/li>\n\n\n\n<li>Context for your financial standing<\/li>\n\n\n\n<li>Areas needing attention highlighted<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83c\udfaf Advanced Features & Pro Tips<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Scenario Planning Made Easy<\/strong><\/h3>\n\n\n\n<p><strong>Want to test “what-if” situations?<\/strong><\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Planning a car purchase?<\/strong>\u00a0Increase the auto loan amount<\/li>\n\n\n\n<li><strong>Considering a raise?<\/strong>\u00a0Adjust your salary input<\/li>\n\n\n\n<li><strong>Looking at new apartments?<\/strong>\u00a0Change the housing payment<\/li>\n\n\n\n<li><strong>\ud83d\udcca Watch everything update in real-time!<\/strong><\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Period Flexibility<\/strong><\/h3>\n\n\n\n<p><strong>Mix annual and monthly inputs freely:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Income in annual amounts<\/li>\n\n\n\n<li>Debts in monthly amounts<\/li>\n\n\n\n<li><strong>The calculator automatically converts everything<\/strong><\/li>\n\n\n\n<li>No manual math required!<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Reset Functionality<\/strong><\/h3>\n\n\n\n<p><strong>Made too many changes?<\/strong><\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Click the\u00a0<strong>“Reset” button<\/strong>\u00a0(gray button next to Calculate)<\/li>\n\n\n\n<li>All values return to defaults<\/li>\n\n\n\n<li>Visual notification confirms reset<\/li>\n\n\n\n<li>Perfect for starting fresh or demonstrating to others<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Mobile-Friendly Design<\/strong><\/h3>\n\n\n\n<p><strong>Use on any device:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Desktop<\/strong>: Full dashboard experience<\/li>\n\n\n\n<li><strong>Tablet<\/strong>: Optimized layout<\/li>\n\n\n\n<li><strong>Phone<\/strong>: Streamlined mobile view<\/li>\n\n\n\n<li><strong>All features work everywhere<\/strong><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udd0d Interpreting Your Results: What They Really Mean<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>If Your Front-End Ratio is…<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u226428%<\/strong>: \u2705 Excellent! You’ll qualify for most mortgages<\/li>\n\n\n\n<li><strong>29-31%<\/strong>: \u26a0\ufe0f Good – May qualify for FHA loans<\/li>\n\n\n\n<li><strong>32-41%<\/strong>: \u26a0\ufe0f Manageable – VA loan territory<\/li>\n\n\n\n<li><strong>>41%<\/strong>: \u274c High – Consider reducing housing costs<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>If Your Back-End Ratio is…<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u226420%<\/strong>: \ud83c\udfc6 Excellent! Very strong financial position<\/li>\n\n\n\n<li><strong>21-36%<\/strong>: \u2705 Good – Conventional loan eligible<\/li>\n\n\n\n<li><strong>37-43%<\/strong>: \u26a0\ufe0f Manageable – FHA loan territory<\/li>\n\n\n\n<li><strong>44-50%<\/strong>: \u26a0\ufe0f High – Some lenders may still work with you<\/li>\n\n\n\n<li><strong>>50%<\/strong>: \u274c Critical – Focus on debt reduction<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>If Your Financial Health is…<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>A or A+<\/strong>: \ud83c\udf89 Excellent financial management<\/li>\n\n\n\n<li><strong>B or B+<\/strong>: \ud83d\udc4d Good standing with room for improvement<\/li>\n\n\n\n<li><strong>C or C+<\/strong>: \u26a0\ufe0f Needs attention in specific areas<\/li>\n\n\n\n<li><strong>D or D+<\/strong>: \ud83d\udd34 Immediate action recommended<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>If Your Cash Flow is…<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Positive $1,000+<\/strong>: \ud83d\udcaa Strong financial flexibility<\/li>\n\n\n\n<li><strong>Positive $0-999<\/strong>: \ud83d\udc4d Managing but limited savings capacity<\/li>\n\n\n\n<li><strong>Negative<\/strong>: \ud83d\udea8 Immediate budget review needed<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udca1 Practical Applications<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Before Major Financial Decisions:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Mortgage Applications<\/strong>: Know your exact standing before applying<\/li>\n\n\n\n<li><strong>Car Purchases<\/strong>: See how a new payment affects your overall debt<\/li>\n\n\n\n<li><strong>Career Changes<\/strong>: Understand income changes’ impact<\/li>\n\n\n\n<li><strong>Debt Consolidation<\/strong>: Evaluate if refinancing helps your ratios<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Regular Financial Check-ups:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Monthly Reviews<\/strong>: Track improvement over time<\/li>\n\n\n\n<li><strong>Budget Planning<\/strong>: Identify which debts to prioritize<\/li>\n\n\n\n<li><strong>Goal Setting<\/strong>: Establish target DTI ratios<\/li>\n\n\n\n<li><strong>Progress Tracking<\/strong>: Visualize your financial journey<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Professional Use Cases:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Financial Advisors<\/strong>: Client presentations and planning<\/li>\n\n\n\n<li><strong>Loan Officers<\/strong>: Quick pre-qualification assessments<\/li>\n\n\n\n<li><strong>Educators<\/strong>: Teaching financial literacy concepts<\/li>\n\n\n\n<li><strong>Real Estate Agents<\/strong>: Helping clients understand affordability<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udea8 Important Notes & Best Practices<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Accuracy Matters:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Use exact numbers<\/strong>, not estimates<\/li>\n\n\n\n<li><strong>Include ALL recurring debts<\/strong>, even small ones<\/li>\n\n\n\n<li><strong>Update regularly<\/strong>\u00a0when your situation changes<\/li>\n\n\n\n<li><strong>Be honest with yourself<\/strong>\u00a0for the most useful results<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>This Is a Tool, Not a Final Judgment:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Individual factors<\/strong>\u00a0(credit score, down payment) also matter<\/li>\n\n\n\n<li><strong>Consult professionals<\/strong>\u00a0for major financial decisions<\/li>\n\n\n\n<li><strong>Use as a starting point<\/strong>\u00a0for deeper financial planning<\/li>\n\n\n\n<li><strong>Your situation can change<\/strong>\u2014these numbers aren’t permanent<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Privacy & Security:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>All calculations happen in your browser<\/strong><\/li>\n\n\n\n<li><strong>No data is sent to any server<\/strong><\/li>\n\n\n\n<li><strong>Your financial information stays private<\/strong><\/li>\n\n\n\n<li><strong>Bookmark for future use<\/strong><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83c\udf1f Why This Is the Best DTI Calculator Available<\/strong><\/h2>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Comprehensive<\/strong>: Goes far beyond simple percentage calculations<\/li>\n\n\n\n<li><strong>Visual<\/strong>: Transforms numbers into understandable visuals<\/li>\n\n\n\n<li><strong>Educational<\/strong>: Teaches you while calculating<\/li>\n\n\n\n<li><strong>Personalized<\/strong>: Recommendations specific to your situation<\/li>\n\n\n\n<li><strong>Professional<\/strong>: Design and features rival paid financial software<\/li>\n\n\n\n<li><strong>Accessible<\/strong>: Free, no login required, works on all devices<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83c\udfac Quick Start Summary<\/strong><\/h2>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Input<\/strong>\u00a0your income in the left sidebar (green section)<\/li>\n\n\n\n<li><strong>Enter<\/strong>\u00a0your monthly debts (orange section)<\/li>\n\n\n\n<li><strong>Watch<\/strong>\u00a0the dashboard update in real-time<\/li>\n\n\n\n<li><strong>Review<\/strong>\u00a0your four key metrics and charts<\/li>\n\n\n\n<li><strong>Check<\/strong>\u00a0the tabs for personalized advice<\/li>\n\n\n\n<li><strong>Experiment<\/strong>\u00a0with different scenarios<\/li>\n\n\n\n<li><strong>Use<\/strong>\u00a0the insights to improve your financial health<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcde Need Help or Have Questions?<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Common Issues & Solutions:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Charts not updating?<\/strong>\u00a0Try clicking “Calculate”<\/li>\n\n\n\n<li><strong>Numbers seem wrong?<\/strong>\u00a0Check your period toggles (Year\/Month)<\/li>\n\n\n\n<li><strong>Want to start over?<\/strong>\u00a0Click the “Reset” button<\/li>\n\n\n\n<li><strong>Seeing negative cash flow?<\/strong>\u00a0Focus on the Improvement Strategies tab<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Getting the Most Value:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Bookmark<\/strong>\u00a0the calculator for regular check-ins<\/li>\n\n\n\n<li><strong>Share<\/strong>\u00a0with family for joint financial planning<\/li>\n\n\n\n<li><strong>Use<\/strong>\u00a0before meetings with financial advisors<\/li>\n\n\n\n<li><strong>Print<\/strong>\u00a0results for loan applications<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>Start your journey to better financial health today! Just input your numbers and let the Ultimate DTI Financial Health Analyzer provide the clarity, insights, and direction you need to make smarter financial decisions.<\/strong><\/p>\n\n\n\n<p>Advanced DTI Ratio Calculator Please explain how to use this calculator.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>\ud83c\udfaf How to Use the Advanced DTI Ratio Calculator: Simple Step-by-Step Guide<\/strong><\/h1>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcf1 Getting Started<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. LOOK AT THE LAYOUT<\/strong><\/h3>\n\n\n\n<p>The calculator has <strong>two main sections<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>LEFT SIDEBAR<\/strong>\u00a0(Green & Orange areas) \u2192 Where you INPUT your numbers<\/li>\n\n\n\n<li><strong>MAIN DASHBOARD<\/strong>\u00a0(Right side) \u2192 Where you SEE your results<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcdd STEP 1: Enter Your INCOME (Green Section)<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>What to Fill In:<\/strong><\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Find the “Salary & Earned Income” box<\/strong>\n<ul class=\"wp-block-list\">\n<li>Type your yearly salary (example:\u00a0<code>60000<\/code>\u00a0for $60,000\/year)<\/li>\n\n\n\n<li><strong>Leave it on “Year”<\/strong>\u00a0(the blue button)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Find “Investment Income” box<\/strong>\n<ul class=\"wp-block-list\">\n<li>Type income from investments, rentals, dividends<\/li>\n\n\n\n<li><strong>Example<\/strong>:\u00a0<code>5000<\/code>\u00a0if you earn $5,000\/year from investments<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Find “Other Income” box<\/strong>\n<ul class=\"wp-block-list\">\n<li>Type side hustle income, bonuses, gifts<\/li>\n\n\n\n<li><strong>Example<\/strong>:\u00a0<code>2400<\/code>\u00a0for $200\/month freelance work<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>\u2705 <strong>TIP<\/strong>: Most people only need to fill in the Salary box if that’s their main income!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcb3 STEP 2: Enter Your MONTHLY DEBTS (Orange Section)<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>What to Fill In:<\/strong><\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Find “Housing Payment” box<\/strong>\n<ul class=\"wp-block-list\">\n<li>Type your rent or mortgage payment<\/li>\n\n\n\n<li><strong>Example<\/strong>:\u00a0<code>1200<\/code>\u00a0for $1,200\/month rent<\/li>\n\n\n\n<li><strong>Make sure it says “Month”<\/strong>\u00a0(the blue button)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Find “Auto Loan” box<\/strong>\n<ul class=\"wp-block-list\">\n<li>Type your car payment<\/li>\n\n\n\n<li><strong>Example<\/strong>:\u00a0<code>350<\/code>\u00a0for $350\/month car payment<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Find “Credit Cards” box<\/strong>\n<ul class=\"wp-block-list\">\n<li>Type TOTAL minimum payments for ALL credit cards<\/li>\n\n\n\n<li><strong>Example<\/strong>:\u00a0<code>250<\/code>\u00a0if you pay $250\/month across all cards<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Find “Other Debts” box<\/strong>\n<ul class=\"wp-block-list\">\n<li>Type student loans, personal loans, medical payments<\/li>\n\n\n\n<li><strong>Example<\/strong>:\u00a0<code>400<\/code>\u00a0for $400\/month student loan<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>\u2705 <strong>TIP<\/strong>: Add up ALL your monthly debt payments – even small ones count!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u26a1 STEP 3: See Your Results INSTANTLY!<\/strong><\/h2>\n\n\n\n<p><strong>The calculator updates AUTOMATICALLY as you type!<\/strong> No need to click anything.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Look at the RIGHT SIDE for your results:<\/strong><\/h3>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcca UNDERSTANDING YOUR RESULTS<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\ud83d\udd22 The 4 MAIN NUMBERS to Check:<\/strong><\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Front-End Ratio<\/strong>\u00a0(Purple Card)\n<ul class=\"wp-block-list\">\n<li><strong>What it means<\/strong>: Housing costs \u00f7 Your income<\/li>\n\n\n\n<li><strong>Good if<\/strong>: Below 28%<\/li>\n\n\n\n<li><strong>Color<\/strong>: Green = Good, Yellow = Okay, Red = Too High<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Back-End Ratio<\/strong>\u00a0(Pink Card)\n<ul class=\"wp-block-list\">\n<li><strong>What it means<\/strong>: ALL debts \u00f7 Your income<\/li>\n\n\n\n<li><strong>Good if<\/strong>: Below 36%<\/li>\n\n\n\n<li><strong>Color<\/strong>: Green = Good, Yellow = Okay, Red = Too High<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Financial Health<\/strong>\u00a0(Blue Card)\n<ul class=\"wp-block-list\">\n<li><strong>What it means<\/strong>: Overall financial grade<\/li>\n\n\n\n<li><strong>Good if<\/strong>: B+ or higher<\/li>\n\n\n\n<li><strong>Example<\/strong>: A = Excellent, C = Needs Work<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Monthly Cash Flow<\/strong>\u00a0(Orange Card)\n<ul class=\"wp-block-list\">\n<li><strong>What it means<\/strong>: Money left after all bills<\/li>\n\n\n\n<li><strong>Good if<\/strong>: Positive number (not negative)<\/li>\n\n\n\n<li><strong>Example<\/strong>: $1,200 = You have $1,200 left each month<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcc8 The VISUAL CHARTS<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Chart 1: Income vs Debt Doughnut<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Green part<\/strong>: Your income<\/li>\n\n\n\n<li><strong>Red part<\/strong>: Your debt payments<\/li>\n\n\n\n<li><strong>What to look for<\/strong>: More green = Better!<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Chart 2: Debt Breakdown Bars<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Shows which debts are biggest<\/li>\n\n\n\n<li><strong>Taller bars<\/strong>\u00a0= bigger monthly payments<\/li>\n\n\n\n<li>Helps you see where to focus on paying down debt<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udccf The PROGRESS BARS<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Two Progress Bars Below Charts:<\/strong><\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Top Bar<\/strong>: Front-End Ratio progress\n<ul class=\"wp-block-list\">\n<li><strong>Green markers<\/strong>\u00a0show lender limits<\/li>\n\n\n\n<li>Your bar should stay LEFT of the markers<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Bottom Bar<\/strong>: Back-End Ratio progress\n<ul class=\"wp-block-list\">\n<li><strong>Same principle<\/strong>\u00a0– stay left of markers<\/li>\n\n\n\n<li>More markers = different lender standards<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>\u2705 <strong>QUICK CHECK<\/strong>: If your color bar passes the markers, you need to improve your ratios.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udca1 USING THE TABS FOR HELP<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Click These Tabs at the Bottom:<\/strong><\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>\ud83d\udccb Overview Tab<\/strong>\u00a0\u2192 Basic DTI explanation<\/li>\n\n\n\n<li><strong>\ud83c\udfe6 Lender Standards Tab<\/strong>\u00a0\u2192 What different lenders require<\/li>\n\n\n\n<li><strong>\ud83d\ude80 Improvement Strategies Tab<\/strong>\u00a0\u2192\u00a0<strong>PERSONALIZED TIPS FOR YOU!<\/strong><\/li>\n\n\n\n<li><strong>\ud83d\udd0d Detailed Analysis Tab<\/strong>\u00a0\u2192 Professional analysis of YOUR numbers<\/li>\n<\/ol>\n\n\n\n<p>\u2705 <strong>PRO TIP<\/strong>: The “Improvement Strategies” tab gives you SPECIFIC advice based on YOUR numbers!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udd04 IMPORTANT BUTTONS TO KNOW<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\ud83d\udd18 Calculate Button<\/strong> (Purple)<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click if you want to manually recalculate<\/li>\n\n\n\n<li><strong>But usually not needed<\/strong>\u00a0– it calculates automatically!<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\ud83d\udd18 Reset Button<\/strong> (Gray)<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click to clear ALL numbers and start over<\/li>\n\n\n\n<li>Goes back to default example numbers<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\ud83d\udd04 Year\/Month Toggle Buttons<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Income boxes<\/strong>: Usually keep on “Year”<\/li>\n\n\n\n<li><strong>Debt boxes<\/strong>: Usually keep on “Month”<\/li>\n\n\n\n<li><strong>The calculator converts automatically<\/strong>\u00a0– don’t worry about the math!<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83c\udfaf PRACTICAL EXAMPLES<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Example 1: Renter with Car Payment<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Salary<\/strong>: Type\u00a0<code>55000<\/code>\u00a0(for $55,000\/year job)<\/li>\n\n\n\n<li><strong>Housing<\/strong>: Type\u00a0<code>1400<\/code>\u00a0(apartment rent)<\/li>\n\n\n\n<li><strong>Auto Loan<\/strong>: Type\u00a0<code>320<\/code>\u00a0(car payment)<\/li>\n\n\n\n<li><strong>Credit Cards<\/strong>: Type\u00a0<code>180<\/code>\u00a0(minimum payments)<\/li>\n\n\n\n<li><strong>INSTANTLY SEE<\/strong>: If you can afford that new car you want!<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Example 2: Homeowner Planning Refinance<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Salary<\/strong>: Type\u00a0<code>85000<\/code><\/li>\n\n\n\n<li><strong>Housing<\/strong>: Type\u00a0<code>2100<\/code>\u00a0(mortgage + taxes + insurance)<\/li>\n\n\n\n<li><strong>Other Debts<\/strong>: Type total of ALL loans<\/li>\n\n\n\n<li><strong>INSTANTLY SEE<\/strong>: If you qualify for better mortgage rates!<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udea8 COMMON MISTAKES TO AVOID<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u274c Don’t:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Mix up yearly and monthly numbers (use the toggle buttons!)<\/li>\n\n\n\n<li>Forget small debts (they ALL count!)<\/li>\n\n\n\n<li>Use take-home pay (use GROSS income – before taxes!)<\/li>\n\n\n\n<li>Ignore the color warnings (red means pay attention!)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u2705 Do:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use your actual paycheck gross amount<\/li>\n\n\n\n<li>Include ALL monthly debt payments<\/li>\n\n\n\n<li>Check the Improvement Strategies tab<\/li>\n\n\n\n<li>Try different “what-if” scenarios<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udd0d QUICK TROUBLESHOOTING<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Problem: Numbers seem wrong<\/strong><\/h3>\n\n\n\n<p><strong>Solution<\/strong>: Check if “Year\/Month” toggles are set correctly for each box!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Problem: Charts not updating<\/strong><\/h3>\n\n\n\n<p><strong>Solution<\/strong>: Click the purple “Calculate” button once<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Problem: Want to start over<\/strong><\/h3>\n\n\n\n<p><strong>Solution<\/strong>: Click the gray “Reset” button<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Problem: Don’t understand a term<\/strong><\/h3>\n\n\n\n<p><strong>Solution<\/strong>: Click the “Overview” tab for explanations<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcf1 USING ON MOBILE PHONE<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Everything works the same!<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Sidebar scrolls<\/strong>\u00a0on smaller screens<\/li>\n\n\n\n<li><strong>Cards stack vertically<\/strong>\u00a0for easy reading<\/li>\n\n\n\n<li><strong>Charts resize automatically<\/strong><\/li>\n\n\n\n<li><strong>Tabs work with touch<\/strong><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83c\udfaf WHEN TO USE THIS CALCULATOR<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Perfect for:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2705\u00a0<strong>Before applying for a loan<\/strong>\u00a0(know if you’ll qualify)<\/li>\n\n\n\n<li>\u2705\u00a0<strong>Planning a big purchase<\/strong>\u00a0(car, house, etc.)<\/li>\n\n\n\n<li>\u2705\u00a0<strong>Monthly budget check-ins<\/strong><\/li>\n\n\n\n<li>\u2705\u00a0<strong>Debt payoff planning<\/strong><\/li>\n\n\n\n<li>\u2705\u00a0<strong>Salary negotiation preparation<\/strong><\/li>\n\n\n\n<li>\u2705\u00a0<strong>Teaching financial literacy<\/strong><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udc8e QUICK SUMMARY<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3 EASY STEPS:<\/strong><\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Type<\/strong>\u00a0your income in the GREEN boxes (usually yearly)<\/li>\n\n\n\n<li><strong>Type<\/strong>\u00a0your monthly debts in the ORANGE boxes (monthly)<\/li>\n\n\n\n<li><strong>LOOK<\/strong>\u00a0at the right side – your results appear instantly!<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3 THINGS TO CHECK:<\/strong><\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Advanced Debt-to-Income (DTI) Ratio Calculator Your Comprehensive Financial Health Diagnostic Tool Overview The Advanced DTI Ratio Calculator is a sophisticated, all-in-one financial assessment platform that goes far beyond basic debt calculations. This professional-grade tool provides deep insights into your financial standing, helping you understand your debt burden, qualify for loans, and improve your overall financial […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"disabled","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":"","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-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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"categories":[25],"tags":[43],"class_list":["post-3048","page","type-page","status-publish","hentry","category-financial","tag-dticalculator-financialhealthcheck-debttoincomeratiocalculator-personalfinanceanalyzer-advanceddticalculator"],"_links":{"self":[{"href":"https:\/\/tools.mobozostore.shop\/2879-2\/wp-json\/wp\/v2\/pages\/3048","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tools.mobozostore.shop\/2879-2\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tools.mobozostore.shop\/2879-2\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tools.mobozostore.shop\/2879-2\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tools.mobozostore.shop\/2879-2\/wp-json\/wp\/v2\/comments?post=3048"}],"version-history":[{"count":5,"href":"https:\/\/tools.mobozostore.shop\/2879-2\/wp-json\/wp\/v2\/pages\/3048\/revisions"}],"predecessor-version":[{"id":3161,"href":"https:\/\/tools.mobozostore.shop\/2879-2\/wp-json\/wp\/v2\/pages\/3048\/revisions\/3161"}],"wp:attachment":[{"href":"https:\/\/tools.mobozostore.shop\/2879-2\/wp-json\/wp\/v2\/media?parent=3048"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tools.mobozostore.shop\/2879-2\/wp-json\/wp\/v2\/categories?post=3048"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tools.mobozostore.shop\/2879-2\/wp-json\/wp\/v2\/tags?post=3048"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3048,"date":"2025-12-11T23:07:35","date_gmt":"2025-12-11T23:07:35","guid":{"rendered":"https:\/\/tools.mobozostore.shop\/2879-2\/?page_id=3048"},"modified":"2026-02-11T19:31:06","modified_gmt":"2026-02-11T19:31:06","slug":"advanced-dti-ratio-calculator","status":"publish","type":"page","link":"https:\/\/tools.mobozostore.shop\/2879-2\/advanced-dti-ratio-calculator\/","title":{"rendered":"Advanced DTI Ratio Calculator"},"content":{"rendered":"\r\n\r\n\r\n \r\n \r\n Advanced DTI Ratio Calculator | Financial Health Analyzer<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n }\r\n\r\n :root {\r\n --primary: #4361ee;\r\n --secondary: #3a0ca3;\r\n --accent: #f72585;\r\n --success: #4cc9f0;\r\n --warning: #f8961e;\r\n --danger: #f94144;\r\n --light: #f8f9fa;\r\n --dark: #212529;\r\n --gray: #6c757d;\r\n --light-gray: #e9ecef;\r\n --income-color: #2a9d8f;\r\n --debt-color: #e76f51;\r\n --front-end-color: #7209b7;\r\n --back-end-color: #3a86ff;\r\n }\r\n\r\n body {\r\n background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\r\n color: var(--dark);\r\n line-height: 1.6;\r\n padding: 20px;\r\n min-height: 100vh;\r\n }\r\n\r\n .container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n\r\n header {\r\n text-align: center;\r\n margin-bottom: 30px;\r\n padding: 20px;\r\n background: linear-gradient(to right, var(--primary), var(--secondary));\r\n color: white;\r\n border-radius: 15px;\r\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n h1 {\r\n font-size: 2.8rem;\r\n margin-bottom: 10px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 15px;\r\n }\r\n\r\n h1 i {\r\n color: var(--accent);\r\n }\r\n\r\n .tagline {\r\n font-size: 1.2rem;\r\n opacity: 0.9;\r\n max-width: 800px;\r\n margin: 0 auto;\r\n }\r\n\r\n .main-content {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 30px;\r\n margin-bottom: 40px;\r\n }\r\n\r\n @media (max-width: 1100px) {\r\n .main-content {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n\r\n .calculator-section {\r\n background: white;\r\n border-radius: 15px;\r\n padding: 25px;\r\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);\r\n }\r\n\r\n .section-title {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 1.6rem;\r\n color: var(--secondary);\r\n margin-bottom: 25px;\r\n padding-bottom: 15px;\r\n border-bottom: 2px solid var(--light-gray);\r\n }\r\n\r\n .section-title i {\r\n color: var(--primary);\r\n }\r\n\r\n .input-group {\r\n margin-bottom: 25px;\r\n }\r\n\r\n .input-label {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 8px;\r\n font-weight: 600;\r\n }\r\n\r\n .input-label span:first-child {\r\n color: var(--dark);\r\n }\r\n\r\n .input-label span:last-child {\r\n font-weight: normal;\r\n color: var(--gray);\r\n font-size: 0.9rem;\r\n }\r\n\r\n .input-container {\r\n display: flex;\r\n align-items: center;\r\n border: 2px solid var(--light-gray);\r\n border-radius: 10px;\r\n overflow: hidden;\r\n transition: all 0.3s;\r\n }\r\n\r\n .input-container:focus-within {\r\n border-color: var(--primary);\r\n box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);\r\n }\r\n\r\n .input-container.income {\r\n border-left: 5px solid var(--income-color);\r\n }\r\n\r\n .input-container.debt {\r\n border-left: 5px solid var(--debt-color);\r\n }\r\n\r\n .input-container input {\r\n flex: 1;\r\n border: none;\r\n padding: 15px;\r\n font-size: 1.1rem;\r\n outline: none;\r\n }\r\n\r\n .period-selector {\r\n display: flex;\r\n background: var(--light-gray);\r\n border-radius: 5px;\r\n overflow: hidden;\r\n margin-left: 10px;\r\n margin-right: 10px;\r\n }\r\n\r\n .period-selector button {\r\n padding: 8px 15px;\r\n border: none;\r\n background: transparent;\r\n cursor: pointer;\r\n font-weight: 600;\r\n transition: all 0.3s;\r\n }\r\n\r\n .period-selector button.active {\r\n background: var(--primary);\r\n color: white;\r\n }\r\n\r\n .period-selector button:hover:not(.active) {\r\n background: rgba(67, 97, 238, 0.1);\r\n }\r\n\r\n .results-section {\r\n background: white;\r\n border-radius: 15px;\r\n padding: 25px;\r\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);\r\n }\r\n\r\n .results-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .calculate-btn {\r\n background: linear-gradient(to right, var(--primary), var(--secondary));\r\n color: white;\r\n border: none;\r\n padding: 15px 35px;\r\n font-size: 1.2rem;\r\n font-weight: 600;\r\n border-radius: 10px;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n transition: all 0.3s;\r\n box-shadow: 0 5px 15px rgba(67, 97, 238, 0.4);\r\n }\r\n\r\n .calculate-btn:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 8px 20px rgba(67, 97, 238, 0.5);\r\n }\r\n\r\n .calculate-btn:active {\r\n transform: translateY(0);\r\n }\r\n\r\n .result-cards {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 20px;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .result-card {\r\n background: var(--light);\r\n border-radius: 12px;\r\n padding: 20px;\r\n text-align: center;\r\n border-top: 5px solid;\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\r\n transition: transform 0.3s;\r\n }\r\n\r\n .result-card:hover {\r\n transform: translateY(-5px);\r\n }\r\n\r\n .result-card.front-end {\r\n border-color: var(--front-end-color);\r\n }\r\n\r\n .result-card.back-end {\r\n border-color: var(--back-end-color);\r\n }\r\n\r\n .result-card.health {\r\n border-color: var(--success);\r\n }\r\n\r\n .result-card.total {\r\n border-color: var(--accent);\r\n }\r\n\r\n .result-value {\r\n font-size: 2.5rem;\r\n font-weight: 700;\r\n margin: 10px 0;\r\n }\r\n\r\n .result-label {\r\n color: var(--gray);\r\n font-size: 1rem;\r\n font-weight: 600;\r\n }\r\n\r\n .result-status {\r\n display: inline-block;\r\n padding: 5px 15px;\r\n border-radius: 20px;\r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n margin-top: 10px;\r\n }\r\n\r\n .status-good {\r\n background: rgba(76, 201, 240, 0.2);\r\n color: #0a9396;\r\n }\r\n\r\n .status-warning {\r\n background: rgba(248, 150, 30, 0.2);\r\n color: #ca6702;\r\n }\r\n\r\n .status-danger {\r\n background: rgba(249, 65, 68, 0.2);\r\n color: #ae2012;\r\n }\r\n\r\n .visualization {\r\n margin-top: 30px;\r\n }\r\n\r\n .progress-container {\r\n margin-bottom: 25px;\r\n }\r\n\r\n .progress-label {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .progress-bar {\r\n height: 25px;\r\n background: var(--light-gray);\r\n border-radius: 12px;\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n\r\n .progress-fill {\r\n height: 100%;\r\n border-radius: 12px;\r\n transition: width 1s ease-out;\r\n }\r\n\r\n .progress-fill.front-end {\r\n background: linear-gradient(to right, var(--front-end-color), #9d4edd);\r\n }\r\n\r\n .progress-fill.back-end {\r\n background: linear-gradient(to right, var(--back-end-color), #4895ef);\r\n }\r\n\r\n .progress-marker {\r\n position: absolute;\r\n height: 100%;\r\n width: 2px;\r\n background: rgba(0, 0, 0, 0.5);\r\n top: 0;\r\n }\r\n\r\n .progress-marker-label {\r\n position: absolute;\r\n top: -25px;\r\n transform: translateX(-50%);\r\n font-size: 0.8rem;\r\n color: var(--gray);\r\n white-space: nowrap;\r\n }\r\n\r\n .info-section {\r\n background: white;\r\n border-radius: 15px;\r\n padding: 25px;\r\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);\r\n margin-top: 30px;\r\n }\r\n\r\n .tabs {\r\n display: flex;\r\n border-bottom: 2px solid var(--light-gray);\r\n margin-bottom: 25px;\r\n overflow-x: auto;\r\n }\r\n\r\n .tab {\r\n padding: 15px 25px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n border-bottom: 3px solid transparent;\r\n transition: all 0.3s;\r\n white-space: nowrap;\r\n }\r\n\r\n .tab:hover {\r\n color: var(--primary);\r\n }\r\n\r\n .tab.active {\r\n color: var(--primary);\r\n border-bottom: 3px solid var(--primary);\r\n }\r\n\r\n .tab-content {\r\n display: none;\r\n }\r\n\r\n .tab-content.active {\r\n display: block;\r\n animation: fadeIn 0.5s;\r\n }\r\n\r\n @keyframes fadeIn {\r\n from { opacity: 0; }\r\n to { opacity: 1; }\r\n }\r\n\r\n .comparison-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n margin-top: 20px;\r\n }\r\n\r\n .comparison-table th, .comparison-table td {\r\n padding: 15px;\r\n text-align: left;\r\n border-bottom: 1px solid var(--light-gray);\r\n }\r\n\r\n .comparison-table th {\r\n background: var(--light);\r\n color: var(--secondary);\r\n font-weight: 600;\r\n }\r\n\r\n .comparison-table tr:hover {\r\n background: rgba(67, 97, 238, 0.05);\r\n }\r\n\r\n .comparison-table .good {\r\n color: #2a9d8f;\r\n font-weight: 600;\r\n }\r\n\r\n .comparison-table .fair {\r\n color: #f8961e;\r\n font-weight: 600;\r\n }\r\n\r\n .comparison-table .poor {\r\n color: #e76f51;\r\n font-weight: 600;\r\n }\r\n\r\n .tips-list {\r\n list-style-type: none;\r\n }\r\n\r\n .tips-list li {\r\n padding: 15px;\r\n margin-bottom: 15px;\r\n background: var(--light);\r\n border-radius: 10px;\r\n border-left: 4px solid var(--primary);\r\n }\r\n\r\n .tips-list li i {\r\n color: var(--primary);\r\n margin-right: 10px;\r\n }\r\n\r\n footer {\r\n text-align: center;\r\n margin-top: 50px;\r\n padding: 20px;\r\n color: var(--gray);\r\n font-size: 0.9rem;\r\n border-top: 1px solid var(--light-gray);\r\n }\r\n\r\n .financial-links {\r\n display: flex;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n gap: 20px;\r\n margin-top: 20px;\r\n }\r\n\r\n .financial-links a {\r\n color: var(--primary);\r\n text-decoration: none;\r\n font-weight: 600;\r\n padding: 8px 15px;\r\n border-radius: 5px;\r\n transition: all 0.3s;\r\n }\r\n\r\n .financial-links a:hover {\r\n background: rgba(67, 97, 238, 0.1);\r\n }\r\n\r\n .highlight {\r\n background: rgba(67, 97, 238, 0.1);\r\n padding: 3px 8px;\r\n border-radius: 5px;\r\n font-weight: 600;\r\n }\r\n\r\n .reset-btn {\r\n background: var(--light-gray);\r\n color: var(--dark);\r\n border: none;\r\n padding: 10px 20px;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n font-weight: 600;\r\n margin-top: 15px;\r\n transition: all 0.3s;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n\r\n .reset-btn:hover {\r\n background: #dee2e6;\r\n }\r\n\r\n .calculator-actions {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n h1 {\r\n font-size: 2rem;\r\n }\r\n \r\n .main-content {\r\n gap: 20px;\r\n }\r\n \r\n .calculator-section, .results-section {\r\n padding: 20px;\r\n }\r\n \r\n .result-cards {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .result-value {\r\n font-size: 2rem;\r\n }\r\n \r\n .tabs {\r\n flex-wrap: nowrap;\r\n overflow-x: auto;\r\n }\r\n \r\n .tab {\r\n padding: 12px 18px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <header>\r\n <h1><i class=\"fas fa-calculator\"><\/i> Advanced DTI Ratio Calculator<\/h1>\r\n <p class=\"tagline\">Calculate your debt-to-income ratio, analyze your financial health, and get personalized recommendations to improve your financial standing.<\/p>\r\n <\/header>\r\n\r\n <div class=\"main-content\">\r\n <div class=\"calculator-section\">\r\n <h2 class=\"section-title\"><i class=\"fas fa-money-bill-wave\"><\/i> Incomes (Before Tax)<\/h2>\r\n \r\n <div class=\"input-group\">\r\n <div class=\"input-label\">\r\n <span>Salary & Earned Income<\/span>\r\n <span>Annual \/ Monthly<\/span>\r\n <\/div>\r\n <div class=\"input-container income\">\r\n <input type=\"number\" id=\"salary\" value=\"60000\" min=\"0\" step=\"1000\">\r\n <div class=\"period-selector\">\r\n <button class=\"period-btn active\" data-period=\"year\">Year<\/button>\r\n <button class=\"period-btn\" data-period=\"month\">Month<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <div class=\"input-label\">\r\n <span>Pension & Social Security<\/span>\r\n <span>Annual \/ Monthly<\/span>\r\n <\/div>\r\n <div class=\"input-container income\">\r\n <input type=\"number\" id=\"pension\" value=\"0\" min=\"0\" step=\"100\">\r\n <div class=\"period-selector\">\r\n <button class=\"period-btn active\" data-period=\"year\">Year<\/button>\r\n <button class=\"period-btn\" data-period=\"month\">Month<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <div class=\"input-label\">\r\n <span>Investment & Savings Income<\/span>\r\n <span>Interest, capital gain, dividend, rental income...<\/span>\r\n <\/div>\r\n <div class=\"input-container income\">\r\n <input type=\"number\" id=\"investment\" value=\"0\" min=\"0\" step=\"100\">\r\n <div class=\"period-selector\">\r\n <button class=\"period-btn active\" data-period=\"year\">Year<\/button>\r\n <button class=\"period-btn\" data-period=\"month\">Month<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <div class=\"input-label\">\r\n <span>Other Income<\/span>\r\n <span>Gift, alimony, child support...<\/span>\r\n <\/div>\r\n <div class=\"input-container income\">\r\n <input type=\"number\" id=\"other-income\" value=\"0\" min=\"0\" step=\"100\">\r\n <div class=\"period-selector\">\r\n <button class=\"period-btn active\" data-period=\"year\">Year<\/button>\r\n <button class=\"period-btn\" data-period=\"month\">Month<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <h2 class=\"section-title\" style=\"margin-top: 40px;\"><i class=\"fas fa-credit-card\"><\/i> Debts \/ Expenses<\/h2>\r\n \r\n <div class=\"input-group\">\r\n <div class=\"input-label\">\r\n <span>Rental Cost \/ Mortgage<\/span>\r\n <span>Monthly \/ Annual<\/span>\r\n <\/div>\r\n <div class=\"input-container debt\">\r\n <input type=\"number\" id=\"rent\" value=\"1200\" min=\"0\" step=\"100\">\r\n <div class=\"period-selector\">\r\n <button class=\"period-btn active\" data-period=\"month\">Month<\/button>\r\n <button class=\"period-btn\" data-period=\"year\">Year<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <div class=\"input-label\">\r\n <span>Property Tax<\/span>\r\n <span>Annual \/ Monthly<\/span>\r\n <\/div>\r\n <div class=\"input-container debt\">\r\n <input type=\"number\" id=\"property-tax\" value=\"0\" min=\"0\" step=\"100\">\r\n <div class=\"period-selector\">\r\n <button class=\"period-btn active\" data-period=\"year\">Year<\/button>\r\n <button class=\"period-btn\" data-period=\"month\">Month<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <div class=\"input-label\">\r\n <span>HOA Fees<\/span>\r\n <span>Monthly \/ Annual<\/span>\r\n <\/div>\r\n <div class=\"input-container debt\">\r\n <input type=\"number\" id=\"hoa\" value=\"0\" min=\"0\" step=\"50\">\r\n <div class=\"period-selector\">\r\n <button class=\"period-btn active\" data-period=\"month\">Month<\/button>\r\n <button class=\"period-btn\" data-period=\"year\">Year<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <div class=\"input-label\">\r\n <span>Homeowner Insurance<\/span>\r\n <span>Annual \/ Monthly<\/span>\r\n <\/div>\r\n <div class=\"input-container debt\">\r\n <input type=\"number\" id=\"insurance\" value=\"0\" min=\"0\" step=\"100\">\r\n <div class=\"period-selector\">\r\n <button class=\"period-btn active\" data-period=\"year\">Year<\/button>\r\n <button class=\"period-btn\" data-period=\"month\">Month<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <div class=\"input-label\">\r\n <span>Credit Cards<\/span>\r\n <span>Monthly \/ Annual<\/span>\r\n <\/div>\r\n <div class=\"input-container debt\">\r\n <input type=\"number\" id=\"credit-cards\" value=\"200\" min=\"0\" step=\"50\">\r\n <div class=\"period-selector\">\r\n <button class=\"period-btn active\" data-period=\"month\">Month<\/button>\r\n <button class=\"period-btn\" data-period=\"year\">Year<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <div class=\"input-label\">\r\n <span>Auto Loan<\/span>\r\n <span>Monthly \/ Annual<\/span>\r\n <\/div>\r\n <div class=\"input-container debt\">\r\n <input type=\"number\" id=\"auto-loan\" value=\"250\" min=\"0\" step=\"50\">\r\n <div class=\"period-selector\">\r\n <button class=\"period-btn active\" data-period=\"month\">Month<\/button>\r\n <button class=\"period-btn\" data-period=\"year\">Year<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <div class=\"input-label\">\r\n <span>Student Loan<\/span>\r\n <span>Monthly \/ Annual<\/span>\r\n <\/div>\r\n <div class=\"input-container debt\">\r\n <input type=\"number\" id=\"student-loan\" value=\"0\" min=\"0\" step=\"50\">\r\n <div class=\"period-selector\">\r\n <button class=\"period-btn active\" data-period=\"month\">Month<\/button>\r\n <button class=\"period-btn\" data-period=\"year\">Year<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"input-group\">\r\n <div class=\"input-label\">\r\n <span>Other Loans & Liabilities<\/span>\r\n <span>Personal loan, child support, alimony, etc.<\/span>\r\n <\/div>\r\n <div class=\"input-container debt\">\r\n <input type=\"number\" id=\"other-debts\" value=\"0\" min=\"0\" step=\"50\">\r\n <div class=\"period-selector\">\r\n <button class=\"period-btn active\" data-period=\"month\">Month<\/button>\r\n <button class=\"period-btn\" data-period=\"year\">Year<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"calculator-actions\">\r\n <button class=\"reset-btn\" id=\"resetBtn\">\r\n <i class=\"fas fa-redo\"><\/i> Reset All Values\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"results-section\">\r\n <div class=\"results-header\">\r\n <h2 class=\"section-title\"><i class=\"fas fa-chart-line\"><\/i> Results<\/h2>\r\n <button class=\"calculate-btn\" id=\"calculateBtn\">\r\n <i class=\"fas fa-calculator\"><\/i> Calculate DTI\r\n <\/button>\r\n <\/div>\r\n \r\n <div class=\"result-cards\">\r\n <div class=\"result-card front-end\">\r\n <div class=\"result-label\">Front-End Ratio<\/div>\r\n <div class=\"result-value\" id=\"frontEndRatio\">--%<\/div>\r\n <div class=\"result-status\" id=\"frontEndStatus\">Calculate to see status<\/div>\r\n <p style=\"margin-top: 10px; font-size: 0.9rem;\">Housing costs vs income<\/p>\r\n <\/div>\r\n \r\n <div class=\"result-card back-end\">\r\n <div class=\"result-label\">Back-End Ratio<\/div>\r\n <div class=\"result-value\" id=\"backEndRatio\">--%<\/div>\r\n <div class=\"result-status\" id=\"backEndStatus\">Calculate to see status<\/div>\r\n <p style=\"margin-top: 10px; font-size: 0.9rem;\">All debts vs income<\/p>\r\n <\/div>\r\n \r\n <div class=\"result-card health\">\r\n <div class=\"result-label\">Financial Health<\/div>\r\n <div class=\"result-value\" id=\"healthScore\">--<\/div>\r\n <div class=\"result-status\" id=\"healthStatus\">Calculate to see status<\/div>\r\n <p style=\"margin-top: 10px; font-size: 0.9rem;\">Based on your DTI<\/p>\r\n <\/div>\r\n \r\n <div class=\"result-card total\">\r\n <div class=\"result-label\">Monthly Cash Flow<\/div>\r\n <div class=\"result-value\" id=\"cashFlow\">$--<\/div>\r\n <div class=\"result-status\" id=\"cashFlowStatus\">Calculate to see status<\/div>\r\n <p style=\"margin-top: 10px; font-size: 0.9rem;\">Income minus debts<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"visualization\">\r\n <h3 style=\"margin-bottom: 20px; color: var(--secondary);\">DTI Ratio Visualization<\/h3>\r\n \r\n <div class=\"progress-container\">\r\n <div class=\"progress-label\">\r\n <span>Front-End Ratio<\/span>\r\n <span id=\"frontEndPercent\">0%<\/span>\r\n <\/div>\r\n <div class=\"progress-bar\">\r\n <div class=\"progress-fill front-end\" id=\"frontEndBar\" style=\"width: 0%\"><\/div>\r\n <div class=\"progress-marker\" style=\"left: 28%\" data-label=\"Conventional Limit (28%)\">\r\n <div class=\"progress-marker-label\">Conventional (28%)<\/div>\r\n <\/div>\r\n <div class=\"progress-marker\" style=\"left: 31%\" data-label=\"FHA Limit (31%)\">\r\n <div class=\"progress-marker-label\">FHA (31%)<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"progress-container\">\r\n <div class=\"progress-label\">\r\n <span>Back-End Ratio<\/span>\r\n <span id=\"backEndPercent\">0%<\/span>\r\n <\/div>\r\n <div class=\"progress-bar\">\r\n <div class=\"progress-fill back-end\" id=\"backEndBar\" style=\"width: 0%\"><\/div>\r\n <div class=\"progress-marker\" style=\"left: 36%\" data-label=\"Conventional Limit (36%)\">\r\n <div class=\"progress-marker-label\">Conventional (36%)<\/div>\r\n <\/div>\r\n <div class=\"progress-marker\" style=\"left: 43%\" data-label=\"FHA Limit (43%)\">\r\n <div class=\"progress-marker-label\">FHA (43%)<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"info-section\">\r\n <div class=\"tabs\">\r\n <div class=\"tab active\" data-tab=\"what-is\">What is DTI?<\/div>\r\n <div class=\"tab\" data-tab=\"importance\">Why is it Important?<\/div>\r\n <div class=\"tab\" data-tab=\"lender-standards\">Lender Standards<\/div>\r\n <div class=\"tab\" data-tab=\"improve\">How to Improve<\/div>\r\n <div class=\"tab\" data-tab=\"recommendations\">Personalized Tips<\/div>\r\n <\/div>\r\n \r\n <div class=\"tab-content active\" id=\"what-is\">\r\n <h3><i class=\"fas fa-question-circle\"><\/i> What is a Debt-to-Income Ratio?<\/h3>\r\n <p>Debt-to-income ratio (DTI) is the ratio of total debt payments divided by gross income (before tax) expressed as a percentage, usually on either a monthly or annual basis.<\/p>\r\n <p>As a quick example, if someone's monthly income is $1,000 and they spend $480 on debt each month, their DTI ratio is 48%. If they had no debt, their ratio is 0%.<\/p>\r\n <p>There are two main types of DTI ratios:<\/p>\r\n <ul style=\"margin-left: 20px; margin-top: 10px;\">\r\n <li><span class=\"highlight\">Front-End Ratio:<\/span> Also called mortgage-to-income ratio, includes housing costs like rent\/mortgage, insurance, property taxes, and HOA fees.<\/li>\r\n <li><span class=\"highlight\">Back-End Ratio:<\/span> The more comprehensive ratio that includes all debts (housing, credit cards, loans, etc.).<\/li>\r\n <\/ul>\r\n <\/div>\r\n \r\n <div class=\"tab-content\" id=\"importance\">\r\n <h3><i class=\"fas fa-exclamation-triangle\"><\/i> Why is DTI Important?<\/h3>\r\n <p>DTI is a critical indicator of a person's or family's debt level. Lenders use this figure to assess the risk of lending to them.<\/p>\r\n <p>Credit card issuers, loan companies, and mortgage lenders all use DTI to evaluate their risk when extending credit. A person with a high ratio is seen by lenders as someone that might not be able to repay what they owe.<\/p>\r\n <p>Different lenders have different standards for what an acceptable DTI is. Theoretically, the lower the ratio, the better.<\/p>\r\n <p>DTI ratios are also useful for evaluating personal financial health. In the United States:<\/p>\r\n <ul style=\"margin-left: 20px; margin-top: 10px;\">\r\n <li>A DTI of <span class=\"highlight\">1\/3 (33%) or less<\/span> is considered manageable<\/li>\r\n <li>A DTI of <span class=\"highlight\">1\/2 (50%) or more<\/span> is generally considered too high<\/li>\r\n <\/ul>\r\n <\/div>\r\n \r\n <div class=\"tab-content\" id=\"lender-standards\">\r\n <h3><i class=\"fas fa-university\"><\/i> Lender DTI Standards<\/h3>\r\n <p>Different types of lenders have different maximum DTI ratios for loan approval:<\/p>\r\n <table class=\"comparison-table\">\r\n <thead>\r\n <tr>\r\n <th>Loan Type<\/th>\r\n <th>Front-End Limit<\/th>\r\n <th>Back-End Limit<\/th>\r\n <th>Typical Use<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td>Conventional Mortgage<\/td>\r\n <td class=\"good\">28%<\/td>\r\n <td class=\"good\">36%<\/td>\r\n <td>Standard home loans<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>FHA Loan<\/td>\r\n <td class=\"fair\">31%<\/td>\r\n <td class=\"fair\">43%<\/td>\r\n <td>Government-backed mortgages<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>VA Loan<\/td>\r\n <td class=\"fair\">41%<\/td>\r\n <td class=\"fair\">41%<\/td>\r\n <td>Veterans\/military<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Credit Cards<\/td>\r\n <td>N\/A<\/td>\r\n <td class=\"poor\">45-50%<\/td>\r\n <td>Unsecured credit<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <p style=\"margin-top: 15px;\">Note: These are general guidelines. Individual lenders may have more restrictive standards based on credit score, down payment, and other factors.<\/p>\r\n <\/div>\r\n \r\n <div class=\"tab-content\" id=\"improve\">\r\n <h3><i class=\"fas fa-chart-line\"><\/i> How to Improve Your DTI Ratio<\/h3>\r\n <ul class=\"tips-list\">\r\n <li><i class=\"fas fa-money-check-alt\"><\/i> <strong>Increase Income:<\/strong> Work overtime, take on a second job, ask for a raise, or generate money from a hobby\/side business.<\/li>\r\n <li><i class=\"fas fa-piggy-bank\"><\/i> <strong>Reduce Expenses:<\/strong> Create and stick to a budget to identify areas where you can cut spending.<\/li>\r\n <li><i class=\"fas fa-credit-card\"><\/i> <strong>Lower Debt Costs:<\/strong> Refinance high-interest debts, consolidate loans, or negotiate lower interest rates with creditors.<\/li>\r\n <li><i class=\"fas fa-ban\"><\/i> <strong>Avoid New Debt:<\/strong> Stop taking on new debt while you work to pay down existing balances.<\/li>\r\n <li><i class=\"fas fa-calendar-alt\"><\/i> <strong>Make Extra Payments:<\/strong> Apply any extra money toward your highest interest debt first (debt avalanche method).<\/li>\r\n <\/ul>\r\n <\/div>\r\n \r\n <div class=\"tab-content\" id=\"recommendations\">\r\n <h3><i class=\"fas fa-lightbulb\"><\/i> Personalized Recommendations<\/h3>\r\n <p id=\"recommendation-text\">Calculate your DTI to see personalized recommendations based on your financial situation.<\/p>\r\n <div id=\"recommendations-list\" style=\"margin-top: 20px;\"><\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <footer>\r\n <p>Advanced DTI Ratio Calculator \u00a9 2023 | Financial Health Analyzer<\/p>\r\n <div class=\"financial-links\">\r\n <a href=\"#\">Budget Calculator<\/a>\r\n <a href=\"#\">House Affordability Calculator<\/a>\r\n <a href=\"#\">Debt Consolidation Calculator<\/a>\r\n <a href=\"#\">Credit Card Payoff Calculator<\/a>\r\n <a href=\"#\">Mortgage Calculator<\/a>\r\n <a href=\"#\">Loan Comparison Tool<\/a>\r\n <\/div>\r\n <p style=\"margin-top: 20px;\">Disclaimer: This calculator provides estimates for educational purposes only. Consult with a financial advisor for personalized advice.<\/p>\r\n <\/footer>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n \/\/ Initialize\r\n calculateDTI();\r\n \r\n \/\/ Event Listeners\r\n document.getElementById('calculateBtn').addEventListener('click', calculateDTI);\r\n document.getElementById('resetBtn').addEventListener('click', resetValues);\r\n \r\n \/\/ Period selector buttons\r\n document.querySelectorAll('.period-btn').forEach(btn => {\r\n btn.addEventListener('click', function() {\r\n const container = this.closest('.period-selector');\r\n container.querySelectorAll('.period-btn').forEach(b => b.classList.remove('active'));\r\n this.classList.add('active');\r\n calculateDTI();\r\n });\r\n });\r\n \r\n \/\/ Tab switching\r\n document.querySelectorAll('.tab').forEach(tab => {\r\n tab.addEventListener('click', function() {\r\n const tabId = this.getAttribute('data-tab');\r\n \r\n \/\/ Update active tab\r\n document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));\r\n this.classList.add('active');\r\n \r\n \/\/ Show active content\r\n document.querySelectorAll('.tab-content').forEach(content => {\r\n content.classList.remove('active');\r\n });\r\n document.getElementById(tabId).classList.add('active');\r\n });\r\n });\r\n \r\n \/\/ Auto-calculate on input change\r\n document.querySelectorAll('input').forEach(input => {\r\n input.addEventListener('input', calculateDTI);\r\n });\r\n \r\n \/\/ Functions\r\n function calculateDTI() {\r\n \/\/ Get all income values (convert to monthly)\r\n const salary = parseFloat(document.getElementById('salary').value) || 0;\r\n const salaryPeriod = document.querySelector('#salary').closest('.input-container').querySelector('.period-btn.active').textContent;\r\n const salaryMonthly = salaryPeriod === 'Year' ? salary \/ 12 : salary;\r\n \r\n const pension = parseFloat(document.getElementById('pension').value) || 0;\r\n const pensionPeriod = document.querySelector('#pension').closest('.input-container').querySelector('.period-btn.active').textContent;\r\n const pensionMonthly = pensionPeriod === 'Year' ? pension \/ 12 : pension;\r\n \r\n const investment = parseFloat(document.getElementById('investment').value) || 0;\r\n const investmentPeriod = document.querySelector('#investment').closest('.input-container').querySelector('.period-btn.active').textContent;\r\n const investmentMonthly = investmentPeriod === 'Year' ? investment \/ 12 : investment;\r\n \r\n const otherIncome = parseFloat(document.getElementById('other-income').value) || 0;\r\n const otherIncomePeriod = document.querySelector('#other-income').closest('.input-container').querySelector('.period-btn.active').textContent;\r\n const otherIncomeMonthly = otherIncomePeriod === 'Year' ? otherIncome \/ 12 : otherIncome;\r\n \r\n \/\/ Total monthly income\r\n const totalMonthlyIncome = salaryMonthly + pensionMonthly + investmentMonthly + otherIncomeMonthly;\r\n \r\n \/\/ Get all debt\/expense values (convert to monthly)\r\n const rent = parseFloat(document.getElementById('rent').value) || 0;\r\n const rentPeriod = document.querySelector('#rent').closest('.input-container').querySelector('.period-btn.active').textContent;\r\n const rentMonthly = rentPeriod === 'Year' ? rent \/ 12 : rent;\r\n \r\n const propertyTax = parseFloat(document.getElementById('property-tax').value) || 0;\r\n const propertyTaxPeriod = document.querySelector('#property-tax').closest('.input-container').querySelector('.period-btn.active').textContent;\r\n const propertyTaxMonthly = propertyTaxPeriod === 'Year' ? propertyTax \/ 12 : propertyTax;\r\n \r\n const hoa = parseFloat(document.getElementById('hoa').value) || 0;\r\n const hoaPeriod = document.querySelector('#hoa').closest('.input-container').querySelector('.period-btn.active').textContent;\r\n const hoaMonthly = hoaPeriod === 'Year' ? hoa \/ 12 : hoa;\r\n \r\n const insurance = parseFloat(document.getElementById('insurance').value) || 0;\r\n const insurancePeriod = document.querySelector('#insurance').closest('.input-container').querySelector('.period-btn.active').textContent;\r\n const insuranceMonthly = insurancePeriod === 'Year' ? insurance \/ 12 : insurance;\r\n \r\n const creditCards = parseFloat(document.getElementById('credit-cards').value) || 0;\r\n const creditCardsPeriod = document.querySelector('#credit-cards').closest('.input-container').querySelector('.period-btn.active').textContent;\r\n const creditCardsMonthly = creditCardsPeriod === 'Year' ? creditCards \/ 12 : creditCards;\r\n \r\n const autoLoan = parseFloat(document.getElementById('auto-loan').value) || 0;\r\n const autoLoanPeriod = document.querySelector('#auto-loan').closest('.input-container').querySelector('.period-btn.active').textContent;\r\n const autoLoanMonthly = autoLoanPeriod === 'Year' ? autoLoan \/ 12 : autoLoan;\r\n \r\n const studentLoan = parseFloat(document.getElementById('student-loan').value) || 0;\r\n const studentLoanPeriod = document.querySelector('#student-loan').closest('.input-container').querySelector('.period-btn.active').textContent;\r\n const studentLoanMonthly = studentLoanPeriod === 'Year' ? studentLoan \/ 12 : studentLoan;\r\n \r\n const otherDebts = parseFloat(document.getElementById('other-debts').value) || 0;\r\n const otherDebtsPeriod = document.querySelector('#other-debts').closest('.input-container').querySelector('.period-btn.active').textContent;\r\n const otherDebtsMonthly = otherDebtsPeriod === 'Year' ? otherDebts \/ 12 : otherDebts;\r\n \r\n \/\/ Calculate housing costs (front-end debts)\r\n const totalHousingMonthly = rentMonthly + propertyTaxMonthly + hoaMonthly + insuranceMonthly;\r\n \r\n \/\/ Calculate total debts (back-end debts)\r\n const totalDebtsMonthly = totalHousingMonthly + creditCardsMonthly + autoLoanMonthly + studentLoanMonthly + otherDebtsMonthly;\r\n \r\n \/\/ Calculate ratios\r\n const frontEndRatio = totalMonthlyIncome > 0 ? (totalHousingMonthly \/ totalMonthlyIncome) * 100 : 0;\r\n const backEndRatio = totalMonthlyIncome > 0 ? (totalDebtsMonthly \/ totalMonthlyIncome) * 100 : 0;\r\n \r\n \/\/ Calculate cash flow\r\n const monthlyCashFlow = totalMonthlyIncome - totalDebtsMonthly;\r\n \r\n \/\/ Determine health score\r\n let healthScore, healthStatus, healthClass;\r\n \r\n if (backEndRatio <= 20) {\r\n healthScore = \"Excellent\";\r\n healthStatus = \"Low debt burden\";\r\n healthClass = \"status-good\";\r\n } else if (backEndRatio <= 33) {\r\n healthScore = \"Good\";\r\n healthStatus = \"Manageable debt\";\r\n healthClass = \"status-good\";\r\n } else if (backEndRatio <= 43) {\r\n healthScore = \"Fair\";\r\n healthStatus = \"Moderate debt burden\";\r\n healthClass = \"status-warning\";\r\n } else if (backEndRatio <= 50) {\r\n healthScore = \"Poor\";\r\n healthStatus = \"High debt burden\";\r\n healthClass = \"status-warning\";\r\n } else {\r\n healthScore = \"Critical\";\r\n healthStatus = \"Very high debt burden\";\r\n healthClass = \"status-danger\";\r\n }\r\n \r\n \/\/ Determine front-end status\r\n let frontEndStatus, frontEndClass;\r\n \r\n if (frontEndRatio <= 28) {\r\n frontEndStatus = \"Within conventional limits\";\r\n frontEndClass = \"status-good\";\r\n } else if (frontEndRatio <= 31) {\r\n frontEndStatus = \"Within FHA limits\";\r\n frontEndClass = \"status-warning\";\r\n } else if (frontEndRatio <= 41) {\r\n frontEndStatus = \"Within VA limits\";\r\n frontEndClass = \"status-warning\";\r\n } else {\r\n frontEndStatus = \"Above standard limits\";\r\n frontEndClass = \"status-danger\";\r\n }\r\n \r\n \/\/ Determine back-end status\r\n let backEndStatus, backEndClass;\r\n \r\n if (backEndRatio <= 36) {\r\n backEndStatus = \"Within conventional limits\";\r\n backEndClass = \"status-good\";\r\n } else if (backEndRatio <= 43) {\r\n backEndStatus = \"Within FHA limits\";\r\n backEndClass = \"status-warning\";\r\n } else if (backEndRatio <= 50) {\r\n backEndStatus = \"High but may qualify\";\r\n backEndClass = \"status-warning\";\r\n } else {\r\n backEndStatus = \"Above typical limits\";\r\n backEndClass = \"status-danger\";\r\n }\r\n \r\n \/\/ Determine cash flow status\r\n let cashFlowStatus, cashFlowClass;\r\n \r\n if (monthlyCashFlow >= totalMonthlyIncome * 0.3) {\r\n cashFlowStatus = \"Strong surplus\";\r\n cashFlowClass = \"status-good\";\r\n } else if (monthlyCashFlow >= 0) {\r\n cashFlowStatus = \"Positive cash flow\";\r\n cashFlowClass = \"status-good\";\r\n } else if (monthlyCashFlow >= -500) {\r\n cashFlowStatus = \"Minor deficit\";\r\n cashFlowClass = \"status-warning\";\r\n } else {\r\n cashFlowStatus = \"Significant deficit\";\r\n cashFlowClass = \"status-danger\";\r\n }\r\n \r\n \/\/ Update UI with results\r\n document.getElementById('frontEndRatio').textContent = frontEndRatio.toFixed(1) + '%';\r\n document.getElementById('frontEndStatus').textContent = frontEndStatus;\r\n document.getElementById('frontEndStatus').className = `result-status ${frontEndClass}`;\r\n \r\n document.getElementById('backEndRatio').textContent = backEndRatio.toFixed(1) + '%';\r\n document.getElementById('backEndStatus').textContent = backEndStatus;\r\n document.getElementById('backEndStatus').className = `result-status ${backEndClass}`;\r\n \r\n document.getElementById('healthScore').textContent = healthScore;\r\n document.getElementById('healthStatus').textContent = healthStatus;\r\n document.getElementById('healthStatus').className = `result-status ${healthClass}`;\r\n \r\n const cashFlowFormatted = monthlyCashFlow >= 0 ? `$${monthlyCashFlow.toFixed(2)}` : `-$${Math.abs(monthlyCashFlow).toFixed(2)}`;\r\n document.getElementById('cashFlow').textContent = cashFlowFormatted;\r\n document.getElementById('cashFlowStatus').textContent = cashFlowStatus;\r\n document.getElementById('cashFlowStatus').className = `result-status ${cashFlowClass}`;\r\n \r\n \/\/ Update progress bars\r\n const frontEndBarWidth = Math.min(frontEndRatio, 100);\r\n const backEndBarWidth = Math.min(backEndRatio, 100);\r\n \r\n document.getElementById('frontEndBar').style.width = frontEndBarWidth + '%';\r\n document.getElementById('frontEndPercent').textContent = frontEndRatio.toFixed(1) + '%';\r\n \r\n document.getElementById('backEndBar').style.width = backEndBarWidth + '%';\r\n document.getElementById('backEndPercent').textContent = backEndRatio.toFixed(1) + '%';\r\n \r\n \/\/ Generate personalized recommendations\r\n generateRecommendations(frontEndRatio, backEndRatio, monthlyCashFlow, totalMonthlyIncome);\r\n }\r\n \r\n function generateRecommendations(frontEndRatio, backEndRatio, cashFlow, income) {\r\n let recommendations = [];\r\n const recommendationText = document.getElementById('recommendation-text');\r\n const recommendationsList = document.getElementById('recommendations-list');\r\n \r\n recommendationText.textContent = `Based on your DTI ratios of ${frontEndRatio.toFixed(1)}% (front-end) and ${backEndRatio.toFixed(1)}% (back-end), here are personalized recommendations:`;\r\n \r\n recommendationsList.innerHTML = '';\r\n \r\n if (backEndRatio > 43) {\r\n recommendations.push({\r\n icon: 'fa-exclamation-triangle',\r\n title: 'Reduce Debt Immediately',\r\n text: 'Your back-end DTI is above typical mortgage qualification limits. Focus on paying down high-interest debt first.'\r\n });\r\n }\r\n \r\n if (frontEndRatio > 28) {\r\n recommendations.push({\r\n icon: 'fa-home',\r\n title: 'Consider Lower Housing Costs',\r\n text: 'Your housing costs are above conventional limits. If possible, look for ways to reduce your housing expenses.'\r\n });\r\n }\r\n \r\n if (cashFlow < 0) {\r\n recommendations.push({\r\n icon: 'fa-balance-scale',\r\n title: 'Address Negative Cash Flow',\r\n text: `You're spending $${Math.abs(cashFlow).toFixed(2)} more than you earn each month. This is unsustainable long-term.`\r\n });\r\n }\r\n \r\n if (backEndRatio <= 33 && cashFlow > income * 0.2) {\r\n recommendations.push({\r\n icon: 'fa-piggy-bank',\r\n title: 'Build Emergency Fund',\r\n text: 'Your financial position is strong. Consider building a 3-6 month emergency fund with your surplus cash flow.'\r\n });\r\n }\r\n \r\n if (backEndRatio > 20 && backEndRatio <= 43) {\r\n recommendations.push({\r\n icon: 'fa-chart-line',\r\n title: 'Consider Debt Consolidation',\r\n text: 'If you have multiple high-interest debts, consolidating them into a lower-rate loan could save you money.'\r\n });\r\n }\r\n \r\n if (recommendations.length === 0) {\r\n recommendations.push({\r\n icon: 'fa-check-circle',\r\n title: 'Excellent Financial Health',\r\n text: 'Your DTI ratios are in healthy ranges. Continue managing your finances responsibly.'\r\n });\r\n }\r\n \r\n \/\/ Add 1-2 general recommendations\r\n if (recommendations.length < 3) {\r\n recommendations.push({\r\n icon: 'fa-budget',\r\n title: 'Create a Detailed Budget',\r\n text: 'Track all income and expenses to identify areas for potential savings.'\r\n });\r\n \r\n if (backEndRatio > 20) {\r\n recommendations.push({\r\n icon: 'fa-credit-card',\r\n title: 'Avoid New Debt',\r\n text: 'Focus on paying down existing debt before taking on any new financial obligations.'\r\n });\r\n }\r\n }\r\n \r\n \/\/ Display recommendations\r\n recommendations.forEach(rec => {\r\n const recElement = document.createElement('div');\r\n recElement.className = 'tip-item';\r\n recElement.style.cssText = 'padding: 15px; margin-bottom: 15px; background: #f8f9fa; border-radius: 10px; border-left: 4px solid #4361ee;';\r\n recElement.innerHTML = `\r\n <div style=\"display: flex; align-items: flex-start; gap: 10px;\">\r\n <i class=\"fas ${rec.icon}\" style=\"color: #4361ee; font-size: 1.2rem; margin-top: 3px;\"><\/i>\r\n <div>\r\n <h4 style=\"margin-bottom: 5px; color: #212529;\">${rec.title}<\/h4>\r\n <p style=\"color: #495057; margin: 0;\">${rec.text}<\/p>\r\n <\/div>\r\n <\/div>\r\n `;\r\n recommendationsList.appendChild(recElement);\r\n });\r\n }\r\n \r\n function resetValues() {\r\n \/\/ Reset all inputs to their default values\r\n document.getElementById('salary').value = 60000;\r\n document.getElementById('pension').value = 0;\r\n document.getElementById('investment').value = 0;\r\n document.getElementById('other-income').value = 0;\r\n document.getElementById('rent').value = 1200;\r\n document.getElementById('property-tax').value = 0;\r\n document.getElementById('hoa').value = 0;\r\n document.getElementById('insurance').value = 0;\r\n document.getElementById('credit-cards').value = 200;\r\n document.getElementById('auto-loan').value = 250;\r\n document.getElementById('student-loan').value = 0;\r\n document.getElementById('other-debts').value = 0;\r\n \r\n \/\/ Reset period selectors to default (Year for incomes, Month for debts)\r\n document.querySelectorAll('.input-container.income .period-selector .period-btn').forEach(btn => {\r\n btn.classList.remove('active');\r\n if (btn.textContent === 'Year') btn.classList.add('active');\r\n });\r\n \r\n document.querySelectorAll('.input-container.debt .period-selector .period-btn').forEach(btn => {\r\n btn.classList.remove('active');\r\n if (btn.textContent === 'Month') btn.classList.add('active');\r\n });\r\n \r\n \/\/ Recalculate\r\n calculateDTI();\r\n \r\n \/\/ Show confirmation\r\n alert('All values have been reset to their defaults.');\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\n\n\n\n<h1 class=\"wp-block-heading\">Advanced Debt-to-Income (DTI) Ratio Calculator<\/h1>\n\n\n\n<p><strong>Your Comprehensive Financial Health Diagnostic Tool<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<p>The Advanced DTI Ratio Calculator is a sophisticated, all-in-one financial assessment platform that goes far beyond basic debt calculations. This professional-grade tool provides deep insights into your financial standing, helping you understand your debt burden, qualify for loans, and improve your overall financial health.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Key Features<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udd0d <strong>Dual Ratio Analysis<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Front-End Ratio<\/strong>: Measures housing expenses (rent\/mortgage, insurance, taxes, HOA) against income<\/li>\n\n\n\n<li><strong>Back-End Ratio<\/strong>: Comprehensive analysis including all debts (credit cards, loans, housing costs)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udcca <strong>Interactive Financial Dashboard<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Real-time visual progress bars with lender limit markers<\/li>\n\n\n\n<li>Color-coded financial health assessment (Excellent \u2192 Critical)<\/li>\n\n\n\n<li>Monthly cash flow calculation with surplus\/deficit indicators<\/li>\n\n\n\n<li>Responsive design that updates instantly as you input data<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83c\udfaf <strong>Personalized Financial Insights<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Smart Recommendations<\/strong>: Customized advice based on your specific DTI situation<\/li>\n\n\n\n<li><strong>Lender Qualification Guide<\/strong>: Shows how you compare against Conventional, FHA, and VA loan standards<\/li>\n\n\n\n<li><strong>Financial Health Score<\/strong>: Simple letter-grade assessment of your debt burden<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udcc8 <strong>Advanced Functionality<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Flexible input system (toggle between monthly\/annual entries)<\/li>\n\n\n\n<li>Comprehensive income tracking (salary, investments, pensions, other sources)<\/li>\n\n\n\n<li>Detailed expense categorization (housing, loans, credit cards, insurance)<\/li>\n\n\n\n<li>Side-by-side comparison with industry lending standards<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83e\udde0 <strong>Educational Resources<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tab-based information system explaining DTI fundamentals<\/li>\n\n\n\n<li>Lender requirement comparisons in easy-to-read tables<\/li>\n\n\n\n<li>Actionable strategies for improving your DTI ratio<\/li>\n\n\n\n<li>Budgeting and debt reduction techniques<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Who Should Use This Calculator?<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83c\udfe0 <strong>Home Buyers & Renters<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Determine how much house you can realistically afford<\/li>\n\n\n\n<li>Understand mortgage qualification requirements<\/li>\n\n\n\n<li>Plan for homeownership expenses<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udcb3 <strong>Debt Management<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Assess your current debt burden<\/li>\n\n\n\n<li>Identify problematic debt levels<\/li>\n\n\n\n<li>Create a plan to reduce debt<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udccb <strong>Financial Planning<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Evaluate overall financial health<\/li>\n\n\n\n<li>Plan for major purchases<\/li>\n\n\n\n<li>Prepare for loan applications<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udd04 <strong>Refinancing Candidates<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Check if you qualify for better rates<\/li>\n\n\n\n<li>Assess debt consolidation opportunities<\/li>\n\n\n\n<li>Understand lender risk assessment<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Technical Capabilities<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udcf1 <strong>User Experience<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Modern, intuitive interface with visual feedback<\/li>\n\n\n\n<li>Mobile-responsive design<\/li>\n\n\n\n<li>One-click calculations<\/li>\n\n\n\n<li>Easy reset functionality<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udd22 <strong>Calculation Accuracy<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Precision to 0.1% for DTI ratios<\/li>\n\n\n\n<li>Automatic period conversions (monthly\u2194annual)<\/li>\n\n\n\n<li>Real-time updates without page refresh<\/li>\n\n\n\n<li>Error-free financial computations<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udccb <strong>Comprehensive Reporting<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Clear visual indicators of financial status<\/li>\n\n\n\n<li>Comparison against multiple lending standards<\/li>\n\n\n\n<li>Personalized improvement recommendations<\/li>\n\n\n\n<li>Educational context for all results<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Why Choose This Calculator?<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83c\udf1f <strong>Beyond Basic Calculations<\/strong><\/h3>\n\n\n\n<p>Unlike simple DTI calculators, this advanced tool provides:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Context<\/strong>: How your numbers compare to real lender requirements<\/li>\n\n\n\n<li><strong>Guidance<\/strong>: Specific steps to improve your financial position<\/li>\n\n\n\n<li><strong>Clarity<\/strong>: Visual representations of complex financial concepts<\/li>\n\n\n\n<li><strong>Planning<\/strong>: Tools to forecast and improve your financial future<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udee1\ufe0f <strong>Financial Empowerment<\/strong><\/h3>\n\n\n\n<p>This calculator transforms raw numbers into actionable intelligence, helping you:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Make informed borrowing decisions<\/li>\n\n\n\n<li>Negotiate better loan terms<\/li>\n\n\n\n<li>Build stronger credit profiles<\/li>\n\n\n\n<li>Achieve long-term financial stability<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Perfect For:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First-time home buyers navigating mortgage requirements<\/li>\n\n\n\n<li>Individuals considering debt consolidation<\/li>\n\n\n\n<li>Families planning major financial decisions<\/li>\n\n\n\n<li>Anyone wanting to improve their creditworthiness<\/li>\n\n\n\n<li>Financial advisors helping clients understand debt ratios<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>Transform your financial understanding with a calculator that doesn’t just crunch numbers\u2014it provides clarity, context, and a path forward.<\/strong><\/p>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>\ud83c\udfaf How to Use the Advanced DTI Ratio Calculator: Simple Step-by-Step Guide<\/strong><\/h1>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcf1 Getting Started<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. LOOK AT THE LAYOUT<\/strong><\/h3>\n\n\n\n<p>The calculator has <strong>two main sections<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>LEFT SIDEBAR<\/strong> (Green & Orange areas) \u2192 Where you INPUT your numbers<\/li>\n\n\n\n<li><strong>MAIN DASHBOARD<\/strong> (Right side) \u2192 Where you SEE your results<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcdd STEP 1: Enter Your INCOME (Green Section)<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>What to Fill In:<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Find the “Salary & Earned Income” box<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Type your yearly salary (example: <code>60000<\/code> for $60,000\/year)<\/li>\n\n\n\n<li><strong>Leave it on “Year”<\/strong> (the blue button)<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Find “Investment Income” box<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Type income from investments, rentals, dividends<\/li>\n\n\n\n<li><strong>Example<\/strong>: <code>5000<\/code> if you earn $5,000\/year from investments<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Find “Other Income” box<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Type side hustle income, bonuses, gifts<\/li>\n\n\n\n<li><strong>Example<\/strong>: <code>2400<\/code> for $200\/month freelance work<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>TIP<\/strong>: Most people only need to fill in the Salary box if that’s their main income!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcb3 STEP 2: Enter Your MONTHLY DEBTS (Orange Section)<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>What to Fill In:<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Find “Housing Payment” box<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Type your rent or mortgage payment<\/li>\n\n\n\n<li><strong>Example<\/strong>: <code>1200<\/code> for $1,200\/month rent<\/li>\n\n\n\n<li><strong>Make sure it says “Month”<\/strong> (the blue button)<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Find “Auto Loan” box<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Type your car payment<\/li>\n\n\n\n<li><strong>Example<\/strong>: <code>350<\/code> for $350\/month car payment<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Find “Credit Cards” box<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Type TOTAL minimum payments for ALL credit cards<\/li>\n\n\n\n<li><strong>Example<\/strong>: <code>250<\/code> if you pay $250\/month across all cards<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Find “Other Debts” box<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Type student loans, personal loans, medical payments<\/li>\n\n\n\n<li><strong>Example<\/strong>: <code>400<\/code> for $400\/month student loan<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>TIP<\/strong>: Add up ALL your monthly debt payments – even small ones count!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u26a1 STEP 3: See Your Results INSTANTLY!<\/strong><\/h2>\n\n\n\n<p><strong>The calculator updates AUTOMATICALLY as you type!<\/strong> No need to click anything.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Look at the RIGHT SIDE for your results:<\/strong><\/h3>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcca UNDERSTANDING YOUR RESULTS<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\ud83d\udd22 The 4 MAIN NUMBERS to Check:<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Front-End Ratio<\/strong> (Purple Card)<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>What it means<\/strong>: Housing costs \u00f7 Your income<\/li>\n\n\n\n<li><strong>Good if<\/strong>: Below 28%<\/li>\n\n\n\n<li><strong>Color<\/strong>: Green = Good, Yellow = Okay, Red = Too High<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Back-End Ratio<\/strong> (Pink Card)<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>What it means<\/strong>: ALL debts \u00f7 Your income<\/li>\n\n\n\n<li><strong>Good if<\/strong>: Below 36%<\/li>\n\n\n\n<li><strong>Color<\/strong>: Green = Good, Yellow = Okay, Red = Too High<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Financial Health<\/strong> (Blue Card)<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>What it means<\/strong>: Overall financial grade<\/li>\n\n\n\n<li><strong>Good if<\/strong>: B+ or higher<\/li>\n\n\n\n<li><strong>Example<\/strong>: A = Excellent, C = Needs Work<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Monthly Cash Flow<\/strong> (Orange Card)<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>What it means<\/strong>: Money left after all bills<\/li>\n\n\n\n<li><strong>Good if<\/strong>: Positive number (not negative)<\/li>\n\n\n\n<li><strong>Example<\/strong>: $1,200 = You have $1,200 left each month<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcc8 The VISUAL CHARTS<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Chart 1: Income vs Debt Doughnut<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Green part<\/strong>: Your income<\/li>\n\n\n\n<li><strong>Red part<\/strong>: Your debt payments<\/li>\n\n\n\n<li><strong>What to look for<\/strong>: More green = Better!<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Chart 2: Debt Breakdown Bars<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Shows which debts are biggest<\/li>\n\n\n\n<li><strong>Taller bars<\/strong> = bigger monthly payments<\/li>\n\n\n\n<li>Helps you see where to focus on paying down debt<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udccf The PROGRESS BARS<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Two Progress Bars Below Charts:<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Top Bar<\/strong>: Front-End Ratio progress<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Green markers<\/strong> show lender limits<\/li>\n\n\n\n<li>Your bar should stay LEFT of the markers<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Bottom Bar<\/strong>: Back-End Ratio progress<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Same principle<\/strong> – stay left of markers<\/li>\n\n\n\n<li>More markers = different lender standards<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>QUICK CHECK<\/strong>: If your color bar passes the markers, you need to improve your ratios.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udca1 USING THE TABS FOR HELP<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Click These Tabs at the Bottom:<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\ud83d\udccb Overview Tab<\/strong> \u2192 Basic DTI explanation<\/li>\n\n\n\n<li><strong>\ud83c\udfe6 Lender Standards Tab<\/strong> \u2192 What different lenders require<\/li>\n\n\n\n<li><strong>\ud83d\ude80 Improvement Strategies Tab<\/strong> \u2192 <strong>PERSONALIZED TIPS FOR YOU!<\/strong><\/li>\n\n\n\n<li><strong>\ud83d\udd0d Detailed Analysis Tab<\/strong> \u2192 Professional analysis of YOUR numbers<\/li>\n<\/ol>\n\n\n\n<p>\u2705 <strong>PRO TIP<\/strong>: The “Improvement Strategies” tab gives you SPECIFIC advice based on YOUR numbers!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udd04 IMPORTANT BUTTONS TO KNOW<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\ud83d\udd18 Calculate Button<\/strong> (Purple)<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click if you want to manually recalculate<\/li>\n\n\n\n<li><strong>But usually not needed<\/strong> – it calculates automatically!<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\ud83d\udd18 Reset Button<\/strong> (Gray)<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click to clear ALL numbers and start over<\/li>\n\n\n\n<li>Goes back to default example numbers<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\ud83d\udd04 Year\/Month Toggle Buttons<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Income boxes<\/strong>: Usually keep on “Year”<\/li>\n\n\n\n<li><strong>Debt boxes<\/strong>: Usually keep on “Month”<\/li>\n\n\n\n<li><strong>The calculator converts automatically<\/strong> – don’t worry about the math!<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83c\udfaf PRACTICAL EXAMPLES<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Example 1: Renter with Car Payment<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Salary<\/strong>: Type <code>55000<\/code> (for $55,000\/year job)<\/li>\n\n\n\n<li><strong>Housing<\/strong>: Type <code>1400<\/code> (apartment rent)<\/li>\n\n\n\n<li><strong>Auto Loan<\/strong>: Type <code>320<\/code> (car payment)<\/li>\n\n\n\n<li><strong>Credit Cards<\/strong>: Type <code>180<\/code> (minimum payments)<\/li>\n\n\n\n<li><strong>INSTANTLY SEE<\/strong>: If you can afford that new car you want!<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Example 2: Homeowner Planning Refinance<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Salary<\/strong>: Type <code>85000<\/code><\/li>\n\n\n\n<li><strong>Housing<\/strong>: Type <code>2100<\/code> (mortgage + taxes + insurance)<\/li>\n\n\n\n<li><strong>Other Debts<\/strong>: Type total of ALL loans<\/li>\n\n\n\n<li><strong>INSTANTLY SEE<\/strong>: If you qualify for better mortgage rates!<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udea8 COMMON MISTAKES TO AVOID<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u274c Don’t:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Mix up yearly and monthly numbers (use the toggle buttons!)<\/li>\n\n\n\n<li>Forget small debts (they ALL count!)<\/li>\n\n\n\n<li>Use take-home pay (use GROSS income – before taxes!)<\/li>\n\n\n\n<li>Ignore the color warnings (red means pay attention!)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u2705 Do:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use your actual paycheck gross amount<\/li>\n\n\n\n<li>Include ALL monthly debt payments<\/li>\n\n\n\n<li>Check the Improvement Strategies tab<\/li>\n\n\n\n<li>Try different “what-if” scenarios<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udd0d QUICK TROUBLESHOOTING<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Problem: Numbers seem wrong<\/strong><\/h3>\n\n\n\n<p><strong>Solution<\/strong>: Check if “Year\/Month” toggles are set correctly for each box!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Problem: Charts not updating<\/strong><\/h3>\n\n\n\n<p><strong>Solution<\/strong>: Click the purple “Calculate” button once<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Problem: Want to start over<\/strong><\/h3>\n\n\n\n<p><strong>Solution<\/strong>: Click the gray “Reset” button<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Problem: Don’t understand a term<\/strong><\/h3>\n\n\n\n<p><strong>Solution<\/strong>: Click the “Overview” tab for explanations<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcf1 USING ON MOBILE PHONE<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Everything works the same!<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Sidebar scrolls<\/strong> on smaller screens<\/li>\n\n\n\n<li><strong>Cards stack vertically<\/strong> for easy reading<\/li>\n\n\n\n<li><strong>Charts resize automatically<\/strong><\/li>\n\n\n\n<li><strong>Tabs work with touch<\/strong><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83c\udfaf WHEN TO USE THIS CALCULATOR<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Perfect for:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2705 <strong>Before applying for a loan<\/strong> (know if you’ll qualify)<\/li>\n\n\n\n<li>\u2705 <strong>Planning a big purchase<\/strong> (car, house, etc.)<\/li>\n\n\n\n<li>\u2705 <strong>Monthly budget check-ins<\/strong><\/li>\n\n\n\n<li>\u2705 <strong>Debt payoff planning<\/strong><\/li>\n\n\n\n<li>\u2705 <strong>Salary negotiation preparation<\/strong><\/li>\n\n\n\n<li>\u2705 <strong>Teaching financial literacy<\/strong><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udc8e QUICK SUMMARY<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3 EASY STEPS:<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Type<\/strong> your income in the GREEN boxes (usually yearly)<\/li>\n\n\n\n<li><strong>Type<\/strong> your monthly debts in the ORANGE boxes (monthly)<\/li>\n\n\n\n<li><strong>LOOK<\/strong> at the right side – your results appear instantly!<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3 THINGS TO CHECK:<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Are both ratios UNDER 36%?<\/li>\n\n\n\n<li>Is your Financial Health B+ or better?<\/li>\n\n\n\n<li>Is your Cash Flow POSITIVE?<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>If NO to any above:<\/strong><\/h3>\n\n\n\n<p>Click the <strong>“Improvement Strategies” tab<\/strong> for personalized advice!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83c\udf1f FINAL TIP<\/strong><\/h2>\n\n\n\n<p><strong>The calculator is FREE to use as many times as you want!<\/strong><\/p>\n\n\n\n<p>Try different scenarios:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>“What if I get a 10% raise?”<\/li>\n\n\n\n<li>“What if I pay off my credit card?”<\/li>\n\n\n\n<li>“What mortgage can I afford?”<\/li>\n<\/ul>\n\n\n\n<p><strong>Bookmark it for regular financial check-ups!<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>Ultimate DTI Financial Health Analyzer: Complete User Guide<\/strong><\/h1>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83c\udfc6 What Is This Calculator?<\/strong><\/h2>\n\n\n\n<p>The <strong>Ultimate DTI Financial Health Analyzer<\/strong> is a professional-grade financial dashboard that transforms complex debt and income analysis into beautiful, actionable insights. This isn’t just a basic calculator\u2014it’s a comprehensive financial wellness platform that combines real-time calculations, interactive visualizations, personalized recommendations, and educational content into one stunning interface.<\/p>\n\n\n\n<p>Think of it as having a <strong>personal financial advisor, data analyst, and loan officer<\/strong> all working together in a single, intuitive dashboard.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83c\udfaf Key Features That Make This Different<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Professional Financial Dashboard<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Beautiful Gradients<\/strong>: Modern color scheme with professional financial aesthetics<\/li>\n\n\n\n<li><strong>Interactive Cards<\/strong>: Hover effects, animations, and dynamic updates<\/li>\n\n\n\n<li><strong>Real-Time Visualization<\/strong>: Watch charts update as you type<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Dual-Chart Analytics System<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Income vs Debt Doughnut Chart<\/strong>: Visual proportion of income to debt<\/li>\n\n\n\n<li><strong>Debt Composition Bar Chart<\/strong>: Breakdown of where your money goes<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Smart Financial Scoring<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Letter Grade Assessment<\/strong>: Get an A+ through D financial health score<\/li>\n\n\n\n<li><strong>Color-Coded Status Indicators<\/strong>: Immediate visual feedback on your standing<\/li>\n\n\n\n<li><strong>Progress Trackers<\/strong>: Animated bars showing lender qualification levels<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4. Personalized Intelligence<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Custom Recommendations<\/strong>: Advice tailored to YOUR specific numbers<\/li>\n\n\n\n<li><strong>Improvement Strategies<\/strong>: Actionable steps to lower your DTI<\/li>\n\n\n\n<li><strong>Lender Comparisons<\/strong>: See how you stack up against different loan programs<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\ude80 How to Use the Calculator: Step-by-Step<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 1: Set Up Your Income (Left Sidebar – Green Section)<\/strong><\/h3>\n\n\n\n<p><strong>\ud83d\udccd Location<\/strong>: Look for the sidebar on the left with the “DTI Analyzer Pro” logo<\/p>\n\n\n\n<p><strong>\ud83d\udcdd What to Input:<\/strong><\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Salary & Earned Income<\/strong>: Your primary employment income\n<ul class=\"wp-block-list\">\n<li>Default: $60,000 annually<\/li>\n\n\n\n<li>Use the\u00a0<strong>Year\/Month toggle<\/strong>\u00a0to match how you track this<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Investment Income<\/strong>: Dividends, interest, rental income\n<ul class=\"wp-block-list\">\n<li>Use the toggle to select your tracking period<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Other Income<\/strong>: Side hustles, bonuses, gifts\n<ul class=\"wp-block-list\">\n<li>Toggle between annual\/monthly as needed<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p><strong>\ud83d\udca1 Pro Tip<\/strong>: Most users find it easiest to input annual salary and monthly debts, but the calculator handles any combination automatically!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2: Enter Your Monthly Debts (Left Sidebar – Orange Section)<\/strong><\/h3>\n\n\n\n<p><strong>\ud83d\udd0d Important<\/strong>: Lenders consider ALL recurring debts. Be thorough!<\/p>\n\n\n\n<p><strong>\ud83d\udcdd Required Debt Categories:<\/strong><\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Housing Payment<\/strong>: Rent, mortgage, plus any housing-related costs\n<ul class=\"wp-block-list\">\n<li>Default: $1,200 monthly<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Auto Loan<\/strong>: Car payment amount\n<ul class=\"wp-block-list\">\n<li>Default: $250 monthly<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Credit Cards<\/strong>: Minimum monthly payments across all cards\n<ul class=\"wp-block-list\">\n<li>Default: $200 monthly<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Other Debts<\/strong>: Student loans, personal loans, medical debt\n<ul class=\"wp-block-list\">\n<li>Default: $0 monthly<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p><strong>\ud83c\udfaf Key Feature<\/strong>: Each debt category has its own <strong>Year\/Month toggle<\/strong>\u2014use what’s most convenient!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 3: Click “Calculate” or Just Wait!<\/strong><\/h3>\n\n\n\n<p><strong>\u26a1 Two Ways to Calculate:<\/strong><\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Click the Purple “Calculate” Button<\/strong>\u00a0in the action buttons<\/li>\n\n\n\n<li><strong>Just Keep Typing<\/strong>\u2014the calculator updates automatically in real-time!<\/li>\n<\/ol>\n\n\n\n<p><strong>\u2705 What Happens Instantly:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>All results update immediately<\/li>\n\n\n\n<li>Charts animate to new values<\/li>\n\n\n\n<li>Progress bars fill with smooth animations<\/li>\n\n\n\n<li>Status indicators change color based on your standing<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcca Understanding Your Results Dashboard<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Top-Right Stats Bar<\/strong><\/h3>\n\n\n\n<p><strong>\ud83d\udccd Location<\/strong>: Upper right corner of main dashboard<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\ud83d\udcc8 Income<\/strong>: Your total monthly income (auto-converted)<\/li>\n\n\n\n<li><strong>\ud83d\udcc9 Debt<\/strong>: Your total monthly debt obligations<\/li>\n\n\n\n<li><strong>\ud83d\udca1 Purpose<\/strong>: Quick snapshot of your financial picture<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>The Four Main Result Cards<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>1. Front-End Ratio Card (Purple Gradient)<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>What it measures<\/strong>: Housing costs \u00f7 Gross monthly income<\/li>\n\n\n\n<li><strong>Healthy range<\/strong>: \u226428% for conventional loans<\/li>\n\n\n\n<li><strong>Color indicator<\/strong>: Green (Good), Yellow (Manageable), Red (High)<\/li>\n\n\n\n<li><strong>Icon<\/strong>: \ud83c\udfe0 House symbol<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>2. Back-End Ratio Card (Pink Gradient)<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>What it measures<\/strong>: All debts \u00f7 Gross monthly income<\/li>\n\n\n\n<li><strong>Healthy range<\/strong>: \u226436% for conventional loans<\/li>\n\n\n\n<li><strong>Color indicator<\/strong>: Green\/Yellow\/Red based on lender standards<\/li>\n\n\n\n<li><strong>Icon<\/strong>: \ud83d\udcca Chart symbol<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>3. Financial Health Card (Blue Gradient)<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>What it measures<\/strong>: Overall financial wellness score<\/li>\n\n\n\n<li><strong>Scale<\/strong>: A+ (Excellent) to D (Needs Improvement)<\/li>\n\n\n\n<li><strong>Based on<\/strong>: DTI ratios + cash flow + debt composition<\/li>\n\n\n\n<li><strong>Icon<\/strong>: \u2764\ufe0f Heartbeat symbol<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>4. Monthly Cash Flow Card (Orange Gradient)<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>What it measures<\/strong>: Income minus all expenses<\/li>\n\n\n\n<li><strong>Shows<\/strong>: Actual dollars remaining each month<\/li>\n\n\n\n<li><strong>Status<\/strong>: Strong, Positive, or Negative<\/li>\n\n\n\n<li><strong>Icon<\/strong>: \ud83d\udcb0 Wallet symbol<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Interactive Charts Section<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Chart 1: Income vs Debt Doughnut<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Visual<\/strong>: Shows proportion of income going to debt<\/li>\n\n\n\n<li><strong>Colors<\/strong>: Green for income, Red for debt<\/li>\n\n\n\n<li><strong>Interactive<\/strong>: Hover for exact percentages<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Chart 2: Debt Composition Bar Chart<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Visual<\/strong>: Breakdown of each debt category<\/li>\n\n\n\n<li><strong>Colors<\/strong>: Different colors for each debt type<\/li>\n\n\n\n<li><strong>Purpose<\/strong>: Identifies which debts dominate your payments<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Progress Visualization Section<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Front-End Progress Bar<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Shows<\/strong>: Your housing cost percentage<\/li>\n\n\n\n<li><strong>Marker lines<\/strong>: Lender limits (28%, 31%, 41%)<\/li>\n\n\n\n<li><strong>Animation<\/strong>: Smooth fill to your current percentage<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Back-End Progress Bar<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Shows<\/strong>: Your total debt percentage<\/li>\n\n\n\n<li><strong>Marker lines<\/strong>: Lender limits (36%, 43%, 50%)<\/li>\n\n\n\n<li><strong>Animation<\/strong>: Color-coded fill with lender comparisons<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcda Using the Information Tabs<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tab 1: Overview<\/strong><\/h3>\n\n\n\n<p><strong>What you’ll learn<\/strong>: DTI basics and why it matters<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Perfect for financial beginners<\/li>\n\n\n\n<li>Clear explanations of front-end vs back-end ratios<\/li>\n\n\n\n<li>Why lenders care about your DTI<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tab 2: Lender Standards<\/strong><\/h3>\n\n\n\n<p><strong>What you’ll find<\/strong>: Comparison of different loan requirements<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Conventional loans: 28%\/36%<\/li>\n\n\n\n<li>FHA loans: 31%\/43%<\/li>\n\n\n\n<li>VA loans: 41%\/41%<\/li>\n\n\n\n<li>Quick reference for mortgage planning<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tab 3: Improvement Strategies<\/strong><\/h3>\n\n\n\n<p><strong>What you get<\/strong>: Personalized recommendations based on YOUR numbers<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Dynamic content<\/strong>: Changes based on your input<\/li>\n\n\n\n<li><strong>Actionable steps<\/strong>: Specific things you can do today<\/li>\n\n\n\n<li><strong>Priority order<\/strong>: Most important improvements first<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tab 4: Detailed Analysis<\/strong><\/h3>\n\n\n\n<p><strong>What’s included<\/strong>: Professional analysis of your situation<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Written explanation of your specific numbers<\/li>\n\n\n\n<li>Context for your financial standing<\/li>\n\n\n\n<li>Areas needing attention highlighted<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83c\udfaf Advanced Features & Pro Tips<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Scenario Planning Made Easy<\/strong><\/h3>\n\n\n\n<p><strong>Want to test “what-if” situations?<\/strong><\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Planning a car purchase?<\/strong>\u00a0Increase the auto loan amount<\/li>\n\n\n\n<li><strong>Considering a raise?<\/strong>\u00a0Adjust your salary input<\/li>\n\n\n\n<li><strong>Looking at new apartments?<\/strong>\u00a0Change the housing payment<\/li>\n\n\n\n<li><strong>\ud83d\udcca Watch everything update in real-time!<\/strong><\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Period Flexibility<\/strong><\/h3>\n\n\n\n<p><strong>Mix annual and monthly inputs freely:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Income in annual amounts<\/li>\n\n\n\n<li>Debts in monthly amounts<\/li>\n\n\n\n<li><strong>The calculator automatically converts everything<\/strong><\/li>\n\n\n\n<li>No manual math required!<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Reset Functionality<\/strong><\/h3>\n\n\n\n<p><strong>Made too many changes?<\/strong><\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Click the\u00a0<strong>“Reset” button<\/strong>\u00a0(gray button next to Calculate)<\/li>\n\n\n\n<li>All values return to defaults<\/li>\n\n\n\n<li>Visual notification confirms reset<\/li>\n\n\n\n<li>Perfect for starting fresh or demonstrating to others<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Mobile-Friendly Design<\/strong><\/h3>\n\n\n\n<p><strong>Use on any device:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Desktop<\/strong>: Full dashboard experience<\/li>\n\n\n\n<li><strong>Tablet<\/strong>: Optimized layout<\/li>\n\n\n\n<li><strong>Phone<\/strong>: Streamlined mobile view<\/li>\n\n\n\n<li><strong>All features work everywhere<\/strong><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udd0d Interpreting Your Results: What They Really Mean<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>If Your Front-End Ratio is…<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u226428%<\/strong>: \u2705 Excellent! You’ll qualify for most mortgages<\/li>\n\n\n\n<li><strong>29-31%<\/strong>: \u26a0\ufe0f Good – May qualify for FHA loans<\/li>\n\n\n\n<li><strong>32-41%<\/strong>: \u26a0\ufe0f Manageable – VA loan territory<\/li>\n\n\n\n<li><strong>>41%<\/strong>: \u274c High – Consider reducing housing costs<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>If Your Back-End Ratio is…<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u226420%<\/strong>: \ud83c\udfc6 Excellent! Very strong financial position<\/li>\n\n\n\n<li><strong>21-36%<\/strong>: \u2705 Good – Conventional loan eligible<\/li>\n\n\n\n<li><strong>37-43%<\/strong>: \u26a0\ufe0f Manageable – FHA loan territory<\/li>\n\n\n\n<li><strong>44-50%<\/strong>: \u26a0\ufe0f High – Some lenders may still work with you<\/li>\n\n\n\n<li><strong>>50%<\/strong>: \u274c Critical – Focus on debt reduction<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>If Your Financial Health is…<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>A or A+<\/strong>: \ud83c\udf89 Excellent financial management<\/li>\n\n\n\n<li><strong>B or B+<\/strong>: \ud83d\udc4d Good standing with room for improvement<\/li>\n\n\n\n<li><strong>C or C+<\/strong>: \u26a0\ufe0f Needs attention in specific areas<\/li>\n\n\n\n<li><strong>D or D+<\/strong>: \ud83d\udd34 Immediate action recommended<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>If Your Cash Flow is…<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Positive $1,000+<\/strong>: \ud83d\udcaa Strong financial flexibility<\/li>\n\n\n\n<li><strong>Positive $0-999<\/strong>: \ud83d\udc4d Managing but limited savings capacity<\/li>\n\n\n\n<li><strong>Negative<\/strong>: \ud83d\udea8 Immediate budget review needed<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udca1 Practical Applications<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Before Major Financial Decisions:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Mortgage Applications<\/strong>: Know your exact standing before applying<\/li>\n\n\n\n<li><strong>Car Purchases<\/strong>: See how a new payment affects your overall debt<\/li>\n\n\n\n<li><strong>Career Changes<\/strong>: Understand income changes’ impact<\/li>\n\n\n\n<li><strong>Debt Consolidation<\/strong>: Evaluate if refinancing helps your ratios<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Regular Financial Check-ups:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Monthly Reviews<\/strong>: Track improvement over time<\/li>\n\n\n\n<li><strong>Budget Planning<\/strong>: Identify which debts to prioritize<\/li>\n\n\n\n<li><strong>Goal Setting<\/strong>: Establish target DTI ratios<\/li>\n\n\n\n<li><strong>Progress Tracking<\/strong>: Visualize your financial journey<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Professional Use Cases:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Financial Advisors<\/strong>: Client presentations and planning<\/li>\n\n\n\n<li><strong>Loan Officers<\/strong>: Quick pre-qualification assessments<\/li>\n\n\n\n<li><strong>Educators<\/strong>: Teaching financial literacy concepts<\/li>\n\n\n\n<li><strong>Real Estate Agents<\/strong>: Helping clients understand affordability<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udea8 Important Notes & Best Practices<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Accuracy Matters:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Use exact numbers<\/strong>, not estimates<\/li>\n\n\n\n<li><strong>Include ALL recurring debts<\/strong>, even small ones<\/li>\n\n\n\n<li><strong>Update regularly<\/strong>\u00a0when your situation changes<\/li>\n\n\n\n<li><strong>Be honest with yourself<\/strong>\u00a0for the most useful results<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>This Is a Tool, Not a Final Judgment:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Individual factors<\/strong>\u00a0(credit score, down payment) also matter<\/li>\n\n\n\n<li><strong>Consult professionals<\/strong>\u00a0for major financial decisions<\/li>\n\n\n\n<li><strong>Use as a starting point<\/strong>\u00a0for deeper financial planning<\/li>\n\n\n\n<li><strong>Your situation can change<\/strong>\u2014these numbers aren’t permanent<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Privacy & Security:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>All calculations happen in your browser<\/strong><\/li>\n\n\n\n<li><strong>No data is sent to any server<\/strong><\/li>\n\n\n\n<li><strong>Your financial information stays private<\/strong><\/li>\n\n\n\n<li><strong>Bookmark for future use<\/strong><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83c\udf1f Why This Is the Best DTI Calculator Available<\/strong><\/h2>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Comprehensive<\/strong>: Goes far beyond simple percentage calculations<\/li>\n\n\n\n<li><strong>Visual<\/strong>: Transforms numbers into understandable visuals<\/li>\n\n\n\n<li><strong>Educational<\/strong>: Teaches you while calculating<\/li>\n\n\n\n<li><strong>Personalized<\/strong>: Recommendations specific to your situation<\/li>\n\n\n\n<li><strong>Professional<\/strong>: Design and features rival paid financial software<\/li>\n\n\n\n<li><strong>Accessible<\/strong>: Free, no login required, works on all devices<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83c\udfac Quick Start Summary<\/strong><\/h2>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Input<\/strong>\u00a0your income in the left sidebar (green section)<\/li>\n\n\n\n<li><strong>Enter<\/strong>\u00a0your monthly debts (orange section)<\/li>\n\n\n\n<li><strong>Watch<\/strong>\u00a0the dashboard update in real-time<\/li>\n\n\n\n<li><strong>Review<\/strong>\u00a0your four key metrics and charts<\/li>\n\n\n\n<li><strong>Check<\/strong>\u00a0the tabs for personalized advice<\/li>\n\n\n\n<li><strong>Experiment<\/strong>\u00a0with different scenarios<\/li>\n\n\n\n<li><strong>Use<\/strong>\u00a0the insights to improve your financial health<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcde Need Help or Have Questions?<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Common Issues & Solutions:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Charts not updating?<\/strong>\u00a0Try clicking “Calculate”<\/li>\n\n\n\n<li><strong>Numbers seem wrong?<\/strong>\u00a0Check your period toggles (Year\/Month)<\/li>\n\n\n\n<li><strong>Want to start over?<\/strong>\u00a0Click the “Reset” button<\/li>\n\n\n\n<li><strong>Seeing negative cash flow?<\/strong>\u00a0Focus on the Improvement Strategies tab<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Getting the Most Value:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Bookmark<\/strong>\u00a0the calculator for regular check-ins<\/li>\n\n\n\n<li><strong>Share<\/strong>\u00a0with family for joint financial planning<\/li>\n\n\n\n<li><strong>Use<\/strong>\u00a0before meetings with financial advisors<\/li>\n\n\n\n<li><strong>Print<\/strong>\u00a0results for loan applications<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>Start your journey to better financial health today! Just input your numbers and let the Ultimate DTI Financial Health Analyzer provide the clarity, insights, and direction you need to make smarter financial decisions.<\/strong><\/p>\n\n\n\n<p>Advanced DTI Ratio Calculator Please explain how to use this calculator.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>\ud83c\udfaf How to Use the Advanced DTI Ratio Calculator: Simple Step-by-Step Guide<\/strong><\/h1>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcf1 Getting Started<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. LOOK AT THE LAYOUT<\/strong><\/h3>\n\n\n\n<p>The calculator has <strong>two main sections<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>LEFT SIDEBAR<\/strong>\u00a0(Green & Orange areas) \u2192 Where you INPUT your numbers<\/li>\n\n\n\n<li><strong>MAIN DASHBOARD<\/strong>\u00a0(Right side) \u2192 Where you SEE your results<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcdd STEP 1: Enter Your INCOME (Green Section)<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>What to Fill In:<\/strong><\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Find the “Salary & Earned Income” box<\/strong>\n<ul class=\"wp-block-list\">\n<li>Type your yearly salary (example:\u00a0<code>60000<\/code>\u00a0for $60,000\/year)<\/li>\n\n\n\n<li><strong>Leave it on “Year”<\/strong>\u00a0(the blue button)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Find “Investment Income” box<\/strong>\n<ul class=\"wp-block-list\">\n<li>Type income from investments, rentals, dividends<\/li>\n\n\n\n<li><strong>Example<\/strong>:\u00a0<code>5000<\/code>\u00a0if you earn $5,000\/year from investments<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Find “Other Income” box<\/strong>\n<ul class=\"wp-block-list\">\n<li>Type side hustle income, bonuses, gifts<\/li>\n\n\n\n<li><strong>Example<\/strong>:\u00a0<code>2400<\/code>\u00a0for $200\/month freelance work<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>\u2705 <strong>TIP<\/strong>: Most people only need to fill in the Salary box if that’s their main income!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcb3 STEP 2: Enter Your MONTHLY DEBTS (Orange Section)<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>What to Fill In:<\/strong><\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Find “Housing Payment” box<\/strong>\n<ul class=\"wp-block-list\">\n<li>Type your rent or mortgage payment<\/li>\n\n\n\n<li><strong>Example<\/strong>:\u00a0<code>1200<\/code>\u00a0for $1,200\/month rent<\/li>\n\n\n\n<li><strong>Make sure it says “Month”<\/strong>\u00a0(the blue button)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Find “Auto Loan” box<\/strong>\n<ul class=\"wp-block-list\">\n<li>Type your car payment<\/li>\n\n\n\n<li><strong>Example<\/strong>:\u00a0<code>350<\/code>\u00a0for $350\/month car payment<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Find “Credit Cards” box<\/strong>\n<ul class=\"wp-block-list\">\n<li>Type TOTAL minimum payments for ALL credit cards<\/li>\n\n\n\n<li><strong>Example<\/strong>:\u00a0<code>250<\/code>\u00a0if you pay $250\/month across all cards<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Find “Other Debts” box<\/strong>\n<ul class=\"wp-block-list\">\n<li>Type student loans, personal loans, medical payments<\/li>\n\n\n\n<li><strong>Example<\/strong>:\u00a0<code>400<\/code>\u00a0for $400\/month student loan<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>\u2705 <strong>TIP<\/strong>: Add up ALL your monthly debt payments – even small ones count!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u26a1 STEP 3: See Your Results INSTANTLY!<\/strong><\/h2>\n\n\n\n<p><strong>The calculator updates AUTOMATICALLY as you type!<\/strong> No need to click anything.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Look at the RIGHT SIDE for your results:<\/strong><\/h3>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcca UNDERSTANDING YOUR RESULTS<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\ud83d\udd22 The 4 MAIN NUMBERS to Check:<\/strong><\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Front-End Ratio<\/strong>\u00a0(Purple Card)\n<ul class=\"wp-block-list\">\n<li><strong>What it means<\/strong>: Housing costs \u00f7 Your income<\/li>\n\n\n\n<li><strong>Good if<\/strong>: Below 28%<\/li>\n\n\n\n<li><strong>Color<\/strong>: Green = Good, Yellow = Okay, Red = Too High<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Back-End Ratio<\/strong>\u00a0(Pink Card)\n<ul class=\"wp-block-list\">\n<li><strong>What it means<\/strong>: ALL debts \u00f7 Your income<\/li>\n\n\n\n<li><strong>Good if<\/strong>: Below 36%<\/li>\n\n\n\n<li><strong>Color<\/strong>: Green = Good, Yellow = Okay, Red = Too High<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Financial Health<\/strong>\u00a0(Blue Card)\n<ul class=\"wp-block-list\">\n<li><strong>What it means<\/strong>: Overall financial grade<\/li>\n\n\n\n<li><strong>Good if<\/strong>: B+ or higher<\/li>\n\n\n\n<li><strong>Example<\/strong>: A = Excellent, C = Needs Work<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Monthly Cash Flow<\/strong>\u00a0(Orange Card)\n<ul class=\"wp-block-list\">\n<li><strong>What it means<\/strong>: Money left after all bills<\/li>\n\n\n\n<li><strong>Good if<\/strong>: Positive number (not negative)<\/li>\n\n\n\n<li><strong>Example<\/strong>: $1,200 = You have $1,200 left each month<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcc8 The VISUAL CHARTS<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Chart 1: Income vs Debt Doughnut<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Green part<\/strong>: Your income<\/li>\n\n\n\n<li><strong>Red part<\/strong>: Your debt payments<\/li>\n\n\n\n<li><strong>What to look for<\/strong>: More green = Better!<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Chart 2: Debt Breakdown Bars<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Shows which debts are biggest<\/li>\n\n\n\n<li><strong>Taller bars<\/strong>\u00a0= bigger monthly payments<\/li>\n\n\n\n<li>Helps you see where to focus on paying down debt<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udccf The PROGRESS BARS<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Two Progress Bars Below Charts:<\/strong><\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Top Bar<\/strong>: Front-End Ratio progress\n<ul class=\"wp-block-list\">\n<li><strong>Green markers<\/strong>\u00a0show lender limits<\/li>\n\n\n\n<li>Your bar should stay LEFT of the markers<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Bottom Bar<\/strong>: Back-End Ratio progress\n<ul class=\"wp-block-list\">\n<li><strong>Same principle<\/strong>\u00a0– stay left of markers<\/li>\n\n\n\n<li>More markers = different lender standards<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>\u2705 <strong>QUICK CHECK<\/strong>: If your color bar passes the markers, you need to improve your ratios.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udca1 USING THE TABS FOR HELP<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Click These Tabs at the Bottom:<\/strong><\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>\ud83d\udccb Overview Tab<\/strong>\u00a0\u2192 Basic DTI explanation<\/li>\n\n\n\n<li><strong>\ud83c\udfe6 Lender Standards Tab<\/strong>\u00a0\u2192 What different lenders require<\/li>\n\n\n\n<li><strong>\ud83d\ude80 Improvement Strategies Tab<\/strong>\u00a0\u2192\u00a0<strong>PERSONALIZED TIPS FOR YOU!<\/strong><\/li>\n\n\n\n<li><strong>\ud83d\udd0d Detailed Analysis Tab<\/strong>\u00a0\u2192 Professional analysis of YOUR numbers<\/li>\n<\/ol>\n\n\n\n<p>\u2705 <strong>PRO TIP<\/strong>: The “Improvement Strategies” tab gives you SPECIFIC advice based on YOUR numbers!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udd04 IMPORTANT BUTTONS TO KNOW<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\ud83d\udd18 Calculate Button<\/strong> (Purple)<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click if you want to manually recalculate<\/li>\n\n\n\n<li><strong>But usually not needed<\/strong>\u00a0– it calculates automatically!<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\ud83d\udd18 Reset Button<\/strong> (Gray)<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click to clear ALL numbers and start over<\/li>\n\n\n\n<li>Goes back to default example numbers<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\ud83d\udd04 Year\/Month Toggle Buttons<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Income boxes<\/strong>: Usually keep on “Year”<\/li>\n\n\n\n<li><strong>Debt boxes<\/strong>: Usually keep on “Month”<\/li>\n\n\n\n<li><strong>The calculator converts automatically<\/strong>\u00a0– don’t worry about the math!<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83c\udfaf PRACTICAL EXAMPLES<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Example 1: Renter with Car Payment<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Salary<\/strong>: Type\u00a0<code>55000<\/code>\u00a0(for $55,000\/year job)<\/li>\n\n\n\n<li><strong>Housing<\/strong>: Type\u00a0<code>1400<\/code>\u00a0(apartment rent)<\/li>\n\n\n\n<li><strong>Auto Loan<\/strong>: Type\u00a0<code>320<\/code>\u00a0(car payment)<\/li>\n\n\n\n<li><strong>Credit Cards<\/strong>: Type\u00a0<code>180<\/code>\u00a0(minimum payments)<\/li>\n\n\n\n<li><strong>INSTANTLY SEE<\/strong>: If you can afford that new car you want!<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Example 2: Homeowner Planning Refinance<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Salary<\/strong>: Type\u00a0<code>85000<\/code><\/li>\n\n\n\n<li><strong>Housing<\/strong>: Type\u00a0<code>2100<\/code>\u00a0(mortgage + taxes + insurance)<\/li>\n\n\n\n<li><strong>Other Debts<\/strong>: Type total of ALL loans<\/li>\n\n\n\n<li><strong>INSTANTLY SEE<\/strong>: If you qualify for better mortgage rates!<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udea8 COMMON MISTAKES TO AVOID<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u274c Don’t:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Mix up yearly and monthly numbers (use the toggle buttons!)<\/li>\n\n\n\n<li>Forget small debts (they ALL count!)<\/li>\n\n\n\n<li>Use take-home pay (use GROSS income – before taxes!)<\/li>\n\n\n\n<li>Ignore the color warnings (red means pay attention!)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u2705 Do:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use your actual paycheck gross amount<\/li>\n\n\n\n<li>Include ALL monthly debt payments<\/li>\n\n\n\n<li>Check the Improvement Strategies tab<\/li>\n\n\n\n<li>Try different “what-if” scenarios<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udd0d QUICK TROUBLESHOOTING<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Problem: Numbers seem wrong<\/strong><\/h3>\n\n\n\n<p><strong>Solution<\/strong>: Check if “Year\/Month” toggles are set correctly for each box!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Problem: Charts not updating<\/strong><\/h3>\n\n\n\n<p><strong>Solution<\/strong>: Click the purple “Calculate” button once<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Problem: Want to start over<\/strong><\/h3>\n\n\n\n<p><strong>Solution<\/strong>: Click the gray “Reset” button<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Problem: Don’t understand a term<\/strong><\/h3>\n\n\n\n<p><strong>Solution<\/strong>: Click the “Overview” tab for explanations<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udcf1 USING ON MOBILE PHONE<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Everything works the same!<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Sidebar scrolls<\/strong>\u00a0on smaller screens<\/li>\n\n\n\n<li><strong>Cards stack vertically<\/strong>\u00a0for easy reading<\/li>\n\n\n\n<li><strong>Charts resize automatically<\/strong><\/li>\n\n\n\n<li><strong>Tabs work with touch<\/strong><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83c\udfaf WHEN TO USE THIS CALCULATOR<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Perfect for:<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2705\u00a0<strong>Before applying for a loan<\/strong>\u00a0(know if you’ll qualify)<\/li>\n\n\n\n<li>\u2705\u00a0<strong>Planning a big purchase<\/strong>\u00a0(car, house, etc.)<\/li>\n\n\n\n<li>\u2705\u00a0<strong>Monthly budget check-ins<\/strong><\/li>\n\n\n\n<li>\u2705\u00a0<strong>Debt payoff planning<\/strong><\/li>\n\n\n\n<li>\u2705\u00a0<strong>Salary negotiation preparation<\/strong><\/li>\n\n\n\n<li>\u2705\u00a0<strong>Teaching financial literacy<\/strong><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\ud83d\udc8e QUICK SUMMARY<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3 EASY STEPS:<\/strong><\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Type<\/strong>\u00a0your income in the GREEN boxes (usually yearly)<\/li>\n\n\n\n<li><strong>Type<\/strong>\u00a0your monthly debts in the ORANGE boxes (monthly)<\/li>\n\n\n\n<li><strong>LOOK<\/strong>\u00a0at the right side – your results appear instantly!<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3 THINGS TO CHECK:<\/strong><\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Advanced Debt-to-Income (DTI) Ratio Calculator Your Comprehensive Financial Health Diagnostic Tool Overview The Advanced DTI Ratio Calculator is a sophisticated, all-in-one financial assessment platform that goes far beyond basic debt calculations. This professional-grade tool provides deep insights into your financial standing, helping you understand your debt burden, qualify for loans, and improve your overall financial […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"disabled","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":"","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-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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"categories":[25],"tags":[43],"class_list":["post-3048","page","type-page","status-publish","hentry","category-financial","tag-dticalculator-financialhealthcheck-debttoincomeratiocalculator-personalfinanceanalyzer-advanceddticalculator"],"_links":{"self":[{"href":"https:\/\/tools.mobozostore.shop\/2879-2\/wp-json\/wp\/v2\/pages\/3048","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tools.mobozostore.shop\/2879-2\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tools.mobozostore.shop\/2879-2\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tools.mobozostore.shop\/2879-2\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tools.mobozostore.shop\/2879-2\/wp-json\/wp\/v2\/comments?post=3048"}],"version-history":[{"count":5,"href":"https:\/\/tools.mobozostore.shop\/2879-2\/wp-json\/wp\/v2\/pages\/3048\/revisions"}],"predecessor-version":[{"id":3161,"href":"https:\/\/tools.mobozostore.shop\/2879-2\/wp-json\/wp\/v2\/pages\/3048\/revisions\/3161"}],"wp:attachment":[{"href":"https:\/\/tools.mobozostore.shop\/2879-2\/wp-json\/wp\/v2\/media?parent=3048"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tools.mobozostore.shop\/2879-2\/wp-json\/wp\/v2\/categories?post=3048"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tools.mobozostore.shop\/2879-2\/wp-json\/wp\/v2\/tags?post=3048"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}