Frontend Mentor - Mortgage repayment calculator

Design preview for the Mortgage repayment calculator coding challenge

Frontend Mentor - Mortgage repayment calculator solution

This is a solution to the Mortgage repayment calculator challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Overview

The challenge

Users should be able to:

  • Input mortgage information and see monthly repayment and total repayment amounts after submitting the form
  • See form validation messages if any field is incomplete
  • Complete the form only using their keyboard
  • View the optimal layout for the interface depending on their device's screen size
  • See hover and focus states for all interactive elements on the page

Screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • SASS
  • TypeScript
  • Vite.js
  • Mobile-first workflow

Author