Design comparison
Solution retrospective
Most proud of being able to do the layout without too many hurdles and being creative for certain things such as the radio buttons. Its not perfect but I'm proud. Maybe next time I can learn to do custom buttons or radio buttons.
What challenges did you encounter, and how did you overcome them?Struggled with a lot of items like radio buttons and I had so much code sometimes i did not know what to do. I just slowly read the code and made sure it worked fine.
What specific areas of your project would you like help with?Idk the mortgage formula....So I just made the button toggle. I know how to add in value from the id's of the inputs into a formula and use innerhtml to put it in. But I was confused and didn't know what the mortgage formulas are even though I google. Also there are some things still missing from the desktop version of the code but my code was so messy....I thought I would throw out the more trivial things.
Community feedback
- @krushnasinnarkarPosted 4 months ago
Hi @Hexerse,
Congratulations on successfully completing the challenge!
Your solution looks nice, though there are a couple of things you can improve, which I hope will be helpful:
Mortgage Calculation Information
There are two main types of mortgage calculations based on the type of mortgage: Repayment and Interest Only.
-
Repayment Mortgage For a repayment mortgage, each monthly payment includes both interest and a portion of the principal. The formula to calculate the monthly payment (M) is:
M = P * { [r(1+r)^n] / [(1+r)^n - 1] }
Where:
- ( M ) is the monthly payment.
- ( P ) is the principal loan amount.
- ( r ) is the monthly interest rate (annual interest rate divided by 12).
- ( n ) is the number of payments (loan term in years multiplied by 12).
-
Interest-Only Mortgage For an interest-only mortgage, you only pay the interest on the loan each month. The principal is not reduced. The formula for the monthly interest payment (M) is:
M = P * r
Where:
- ( M ) is the monthly interest payment.
- ( P ) is the principal loan amount.
- ( r ) is the monthly interest rate (annual interest rate divided by 12).
Example
Let's assume the following details for a mortgage:
- Mortgage Amount (P): $200,000
- Mortgage Term: 30 years
- Interest Rate: 5% annual
- Mortgage Type: Repayment
Repayment Mortgage Calculation
-
Convert the annual interest rate to a monthly rate:
r = {5%}/{12} = {0.05}/{12} = 0.004167
-
Calculate the total number of payments:
n = 30 * 12 = 360
-
Plug these values into the formula:
M = 200,000 * [ {0.004167(1+0.004167)^{360}} / {(1+0.004167)^{360} - 1}]
-
Calculate:
M = 200,000 * 0.004167 * 4.4677 / 3.4677 = 200,000 * 0.001282 = 1027.04
So, the monthly payment for a repayment mortgage would be approximately $1,027.04.
Interest-Only Mortgage Calculation
-
Convert the annual interest rate to a monthly rate:
r = {5%} / {12} = {0.05} / {12} = 0.004167
-
Calculate the monthly interest payment:
M = 200,000 \times 0.004167 = 833.33
So, the monthly payment for an interest-only mortgage would be $833.33.
These formulas will help you calculate the mortgage repayments for both types of mortgages.
Design Improvements
-
Border Radius:
- Add a border radius to
.mortgage__calculator
and the bottom-left radius to.results__empty
to improve the design.
.mortgage__calculator { border-radius: 10px; } .results__empty { border-bottom-left-radius: 25%; }
- Add a border radius to
-
Centering the Mortgage Calculator:
- Align the
.mortgage__calculator
to the center by making changes to the body styles. Usealign-items: center
instead ofalign-content
, and change the height to100vh
instead of100%
.
body { display: flex; justify-content: center; align-items: center; height: 100vh; }
- Align the
I hope you find this helpful.
Feel free to reach out if you have more questions or need further assistance.
Happy coding!
Marked as helpful1 -
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord