#dti-calculator-container .calc-wrapper {
display: flex;
flex-wrap: wrap;
gap: 30px;
background: #f9f9f9;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 25px;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
#dti-calculator-container .calc-inputs {
flex: 1;
min-width: 300px;
}
#dti-calculator-container .calc-results {
flex: 1;
min-width: 300px;
background: #fff;
border-radius: 8px;
padding: 20px;
border: 1px solid #eee;
display: flex;
flex-direction: column;
justify-content: center;
}
#dti-calculator-container .input-group {
margin-bottom: 15px;
}
#dti-calculator-container label {
display: block;
font-weight: 600;
margin-bottom: 5px;
font-size: 14px;
color: #444;
}
#dti-calculator-container input[type="number"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
box-sizing: border-box;
}
#dti-calculator-container input[type="number"]:focus {
border-color: #0073aa;
outline: none;
}
#dti-calculator-container button.calc-btn {
background-color: #0073aa;
color: white;
border: none;
padding: 12px 20px;
font-size: 16px;
font-weight: bold;
border-radius: 4px;
cursor: pointer;
width: 100%;
margin-top: 10px;
transition: background-color 0.3s;
}
#dti-calculator-container button.calc-btn:hover {
background-color: #005177;
}
#dti-calculator-container .result-box {
text-align: center;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}
#dti-calculator-container .result-value {
font-size: 42px;
font-weight: 700;
color: #0073aa;
margin: 10px 0;
}
#dti-calculator-container .result-label {
font-size: 14px;
color: #666;
text-transform: uppercase;
letter-spacing: 1px;
}
#dti-calculator-container .status-indicator {
font-weight: bold;
padding: 5px 10px;
border-radius: 4px;
display: inline-block;
}
#dti-calculator-container .breakdown-row {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
font-size: 14px;
}
#dti-calculator-container .dti-content h2 {
color: #2c3e50;
margin-top: 30px;
border-bottom: 2px solid #0073aa;
padding-bottom: 10px;
}
#dti-calculator-container .dti-content h3 {
color: #444;
margin-top: 25px;
}
#dti-calculator-container .dti-content p {
line-height: 1.6;
margin-bottom: 15px;
}
#dti-calculator-container .dti-content ul {
margin-bottom: 15px;
padding-left: 20px;
}
#dti-calculator-container .dti-content li {
margin-bottom: 8px;
line-height: 1.5;
}
function calculateDTI() {
// 1. Get Input Values
var incomeInput = document.getElementById("grossIncome").value;
var housingInput = document.getElementById("rentMortgage").value;
var carInput = document.getElementById("carPayment").value;
var studentInput = document.getElementById("studentLoans").value;
var ccInput = document.getElementById("creditCards").value;
var otherInput = document.getElementById("otherDebt").value;
// 2. Validate and Parse Numbers
var income = parseFloat(incomeInput) || 0;
var housing = parseFloat(housingInput) || 0;
var car = parseFloat(carInput) || 0;
var student = parseFloat(studentInput) || 0;
var cc = parseFloat(ccInput) || 0;
var other = parseFloat(otherInput) || 0;
// Edge case: Avoid division by zero
if (income === 0) {
document.getElementById("dtiResult").innerHTML = "–%";
document.getElementById("frontEndResult").innerHTML = "–%";
document.getElementById("dtiStatus").innerHTML = "Enter Income";
document.getElementById("dtiStatus").style.backgroundColor = "#eee";
document.getElementById("dtiStatus").style.color = "#666";
return;
}
// 3. Perform Calculations
var totalNonHousingDebt = car + student + cc + other;
var totalDebt = housing + totalNonHousingDebt;
// Front-End Ratio: Housing / Income
var frontEndRatio = (housing / income) * 100;
// Back-End Ratio: Total Debt / Income
var backEndRatio = (totalDebt / income) * 100;
// Disposable Income
var disposable = income – totalDebt;
// 4. Update UI Results
// Round to 2 decimals
document.getElementById("dtiResult").innerHTML = backEndRatio.toFixed(2) + "%";
document.getElementById("frontEndResult").innerHTML = frontEndRatio.toFixed(2) + "%";
// Format Currency
var formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
});
document.getElementById("totalDebtResult").innerHTML = formatter.format(totalDebt);
document.getElementById("disposableIncome").innerHTML = formatter.format(disposable);
// 5. Determine Status Logic
var statusBox = document.getElementById("dtiStatus");
var statusText = "";
var statusBg = "";
var statusColor = "#fff";
if (backEndRatio 35 && backEndRatio 43 && backEndRatio <= 50) {
statusText = "High Risk";
statusBg = "#e67e22"; // Darker Orange
} else {
statusText = "Critical";
statusBg = "#c0392b"; // Red
}
statusBox.innerHTML = statusText;
statusBox.style.backgroundColor = statusBg;
statusBox.style.color = statusColor;
}
Monthly Income & Expenses
Back-End DTI Ratio
–%
Enter Details
Front-End Ratio (Housing):
–%
Total Monthly Debt:
$0.00
Disposable Income (Est.):
$0.00
Result Interpretation:
● < 36%: Ideal for most loans.
● 36% – 43%: Acceptable, may limit options.
● > 43%: High risk, difficulty obtaining credit.
● < 36%: Ideal for most loans.
● 36% – 43%: Acceptable, may limit options.
● > 43%: High risk, difficulty obtaining credit.
Understanding Your Debt-to-Income (DTI) Ratio
Your Debt-to-Income (DTI) ratio is one of the most critical metrics lenders use to assess your ability to manage monthly payments and repay debts. Unlike your credit score, which measures your credit history, your DTI measures your current financial capacity.
This calculator helps you determine both your Front-End Ratio (housing costs only) and your Back-End Ratio (total debt load), giving you a clear picture of where you stand before applying for a mortgage, auto loan, or personal credit line.
How to Calculate DTI
The formula for DTI is relatively simple but requires accuracy regarding your monthly obligations:
DTI = (Total Monthly Debt Payments / Gross Monthly Income) x 100
- Gross Monthly Income: Your total income before taxes and deductions. This includes salary, bonuses, alimony received, and pension.
- Total Monthly Debt: This includes rent/mortgage, car loans, student loans, credit card minimums, and other recurring debt obligations. It generally does not include variable living expenses like groceries, utilities, or entertainment.
Front-End vs. Back-End Ratio
Lenders look at two specific types of DTI ratios:
- Front-End Ratio: This calculates the percentage of your income that goes specifically toward housing costs (Rent or Mortgage Principal, Interest, Taxes, and Insurance). lenders typically prefer this to be under 28%.
- Back-End Ratio: This includes housing costs plus all other monthly debt payments. This is the more critical number for loan approval. Most conventional loans require this to be under 36%, though FHA loans may allow up to 43% or even 50% in special circumstances.
What is a Good DTI Ratio?
- 35% or less: Excellent. You likely have money left over after paying bills and are viewed as a safe borrower.
- 36% to 42%: Manageable. Lenders may ask for additional documentation or require a higher credit score to compensate.
- 43% to 49%: Concerning. You may struggle to get approved for a mortgage, or you may be offered higher interest rates.
- 50% or higher: Critical. You are spending half your income on debt. It is highly recommended to reduce debt before applying for new credit.
Tips to Lower Your DTI
If your ratio is higher than desired, consider these strategies: pay off high-interest credit cards to eliminate monthly minimums, refinance high-payment loans to extend the term and lower monthly costs (though this may increase total interest paid), or increase your gross income through side hustles or salary negotiations.