What's the math formula that is used to calculate maximum mortgage amount like in this calculator?
Visual Reference: Take a look at these images to see which tool I'm specifically referring to:
Purchase Budget with $0\%$ Interest
Purchase Budget with $1\%$ Interest
Situation: Right now I can calculate everything correctly while the interest rate is set at $0\%$. I'm having difficulty deriving the formula that takes into account the interest rate and how it impacts the Mortgage Amount/Purchase Budget.
The calculator I linked to has the Debt-to-Income Ratio set to $0.36$, so in my example images, a $\$10,000$ yearly income equates to $\$300,000$ in $30$ years, and $36\%$ of that $\$108,000$, which you can see in the first image with $0\%$ interest set.
All the other fields have a linear correlation to how much they affect the Mortgage Amount/Purchase Budget. For example, a $\$1$ monthly debt would result in a $\$360$ reduction of the budget ($\$1 \times 12$ months $\times 30$-year term).
Attempts:I tried seeing if the correlation was with the Mortgage Amortization, but it doesn't appear so from what I've tried.
Context & Motivation: I'm building my own personal finance/budgeting tool so that I can have every financial calculation in one place rather than utilizing various tools spread across various sites. An additional motivation is that the knowledge and understanding I gain from working on this can help someone else too.
Update: I solved this shortly after posting the question and posted my answer below. I see that someone else also provided a solution that can work too, but the one I posted fit better with my personal project.