Mortgage Repayment Calculator - HTML, Tailwindcss y JS

Community feedback

• 

  Jay Khatri•1,050

  @khatri2002Posted 2 days ago

  Hi! The developed solution looks good! I have a few suggestions to make the design more aligned with the given design reference and to enhance the user experience.

  1. Input Element in input-container Div

  Currently, the input element inside the input-container div is not taking up the full height of its parent. This leaves some empty space at the top and bottom of the container where the input element is absent.

  As a result:

  • Clicking on this empty space doesn’t focus the input element.
  • The cursor pointer assigned to the input doesn’t function in these areas.

  This behavior can confuse users, as they expect the entire container to act as the input field.

  Fix:

  • Ensure the input element occupies the full height of the parent container.
  • Remove the property align-items: center from the input-container div. This ensures that the child elements (input field) take up the full height of their container.

  2. Calculate Repayments Button Width

  The Calculate Repayments button currently has a width of 100% on desktop resolutions, which does not match the design reference. Restrict the button's width to match the design reference on desktop resolutions, and only allow 100% width for smaller devices.

  3. Spelling Correction in Radio Input Option

  There is a spelling error in the radio input options. The word "Repayment" is misspelled.

  These are minor details, but addressing them will refine the design and improve the user experience. Great work so far!

  Keep it up, Happy Coding! 🚀

  0