Skip to content
Submitted 3 months ago

Mortgage Repyment calculator using HTML, CSS, and JS

CardboardPL•320
@CardboardPL
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Mortgage repayment calculator
  • HTML
  • CSS
  • JS
2junior

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

  • Iván Fernández López•230
    @IvanFdez01Posted 3 months ago

    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

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