Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mortgage Repyment calculator using HTML, CSS, and JS

@CardboardPL

Desktop design screenshot for the Mortgage repayment calculator coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I'm proud that I managed to complete the project and I will probably make my form handling more dynamic.

What challenges did you encounter, and how did you overcome them?

My main challenge was making the input tags to be formatted and handled correctly by my various functions and I overcame it by switching to input of type text added the necessary functions for formatting and updated my validation functions to accept data attributes for the validation.

What specific areas of your project would you like help with?

Feedback

Community feedback

@IvanFdez01

Posted

About the input tags formatting. It's a delicate job what you've done, but maybe more simplicity would make the code more legible. I develop:

x = yourinput.value;      // comes as a string, e.g. "300,000"
x = x.replace(/,/g, ''); // replaces all (g of global) commas for blank spaces, e.g. "300000"
x = parseFloat(x);      // tries to convert to float
if (isNaN(x)) { 
    dont allow calculate
} else // is number
    allow calculate

A method like that, of course applied to all inputs before you can press the calculate-button, would be more efficient in my opinion. Finally, I did apply the mentioned method in the calc-button.listener, if you need to check.

Great job even so, nice CSS. Cheers @CardboardPL.

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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