Skip to content
Submitted about 1 month ago

Mortgage repayment calculator - HTML, CSS, and JS

Michael Adebumiti•60
@Mike-Kay
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 challenges did you encounter, and how did you overcome them?

Styling the radio inputs was a bit difficult, as the styles that can be applied to default radio input are limited. I had to learn how to create keyboard accessible custom radio buttons.

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

I tried to search for help on how to format the input values(numbers) to show the commas, but i could not find a perfect solution. I would like to know how i can solve that, and also, is it possible to customize number inputs that allows users to enter values instead of the default one? I would really appreciate corrections and feedbacks on how i can better improve. Thank you

Community feedback

  • Fernando A. Malfavón•370
    @WlfernandoPosted about 1 month ago

    hi! about your question, I introduce the instance Intl.NumberFormat() this one helps to your problem on commas. The second question I don't completly understand, do you refere on the options that apear on the tooltip? if that's the case, you can relate lists to inputs by using tag <datalist />; if it not the case, let me know.

    Marked as helpful
    1
    Michael Adebumiti•60
    @Mike-KayPosted 23 days ago

    Hello Fernando, thank you for your suggestion. I came across the instance Intl.NumberFormat() while i was searching for solutions on the issue but i didn't get it the first time, until i saw your feedback and that gave me an idea to revisit the issue, thanks to that i solved it the second time. I appreciate your feedback, thank you for that.

    1
  • Adriano•38,270
    @AdrianoEscarabotePosted about 1 month ago

    Hi Michael Adebumiti, how are you doing? I really loved the outcome of your project, but I have a few suggestions that I think might be helpful:

    Since this project is only based on a single page component, there is no need for a h1 tag. It's always a good idea to prevent accessibility errors, so I believe it would be beneficial for you to add a "h1" in this component. Don't worry if you forget about "h1," though; it's a good practice for when you are developing larger sites.

    <h1>mortgage calculator</h1>

    The rest is excellent.

    I hope you find it useful. 👍

    Marked as helpful
    1
    Michael Adebumiti•60
    @Mike-KayPosted 23 days ago

    Hello Adriano, i am doing just fine, thank you. I really appreciate your feedback, and i am so encouraged by it. Following your suggestion, i have made the necessary change. Thank you for taking the time out to check my project, once again, i really appreciate that.

    0

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