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 Repayment Calculator

Lejlaā€¢ 130

@LejNur

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 am definitely most proud of form validation (not really a form validation but sending users visible output that the fields are required with a specific class).

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

These are my first steps with React so I encounter a lot of challenges, calculating the repayment, passing the input values, making sure that the value is in currency after it is display as a result etc. But I also learned a lot! Never have I ever heard about Intl.NumberFormat before this challenge for example.. I discovered that this is not the best way to validate the form, but other than useState I have not encounter and learned yet about other hooks that could have, maybe, made my life easier :) I am also aware that the code is not the 'cleanest', but I will try to do better next time!

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

I would like, if someone encounter the same problem, to be able to see formatted currency in the first input (Amount) when a user types in the amount number (as it is shown in design files).. The tricky part is to pass the right value to the calculator otherwise it will not calculate the repayment correctly. Thank you!

Community feedback

Jamil Aliyevā€¢ 150

@LieutenantCobretti1998

Posted

I really like how you made the design similar to the one from the challenge šŸ˜, but I always suggest trying to add something unique to make your solution more individual, especially in your portfolio (though I think you will not add this one, so maybe it is not relevant in this case šŸ˜…). In my opinion, this form could be much better with some sort of animation, like when you hover over the fields they could increase in size, etc. Unfortunately, I can't give any suggestions about the areas of correct currency being displayed, as I didn't do this challenge šŸ˜….

Overall, it was good work, and I like it. Keep going on your React path šŸ‘.

Marked as helpful

0

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