Submitted 4 days ago

Mortgage_repayment_calculator - next js 14, tsx, shadcn

samsimsan• 30

@samsimsan

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Mortgage repayment calculator

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 most proud of the different ui states of the input boxes. I learnt how to use them based on the user's interaction.

I felt I did a brute method for the state management and form validation. Would like to refine it the next time. I will use Zod for the form validation.

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

Form validation became a bit challenging. I didn't want to show the inputs as numbers as it gives a inc/dec btn at the end. so I kept them as text, so performing math equations were tough, as I had to decide at what point to convert the strings to numbers.

Community feedback

BettoRaite• 80

@BettoRaite

Posted 4 days ago

Things I like:

Nice website responsiveness (mobile, tablet, pc).
Good padding/margin.
Text looks pleasing.

Things I do not like:

No hand pointer on mortgage type options except input itself.
No transition of inputs from base form to focused.
No hand pointer on calc button.
result hint is a bit hard to read. (bigger font-size)

Personal recommendation: Think you can make the challenge harder? Not the type of completed, forgot it. (well you decide, mb, want better challenge.)

Btw, zod is cool. Definitely give it a try. You can start with the official docs.

Please log in to post a comment

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