Desktop design

Mobile design

Mortgage repayment calculator

<div _ngcontent-ng-c704733228="" class="title"><h3 _ngcontent-ng-c704733228="" class="heading">Mortgage Calculator</h3><p _ngcontent-ng-c704733228="" class="clear">Clear All</p></div>

<label _ngcontent-ng-c704733228="" for="mortgageAmount">Mortgage Amount</label>

<label _ngcontent-ng-c704733228="" for="mortgageTerm">Mortgage Term</label>

<label _ngcontent-ng-c704733228="" for="mortgageInterest">Interest Rate</label>

<div _ngcontent-ng-c704733228="" class="subtitle"><p _ngcontent-ng-c704733228="">Mortgage Type</p></div>

<span _ngcontent-ng-c704733228="">Repayment</span>

<span _ngcontent-ng-c704733228="">Interest Only</span>

<app-result _ngcontent-ng-c1312819556="" _nghost-ng-c133836955="">

819556=""><div _ngcontent-ng-c1312819556="" class="container"><div _

ontainer"><div _ngcontent-ng-c1312819556="" class="wrapper"><app-c

733228=""><div _ngcontent-ng-c704733228="" class="container"><div _

ontainer"><div _ngcontent-ng-c704733228="" class="title"><h3 _n

s="title"><h3 _ngcontent-ng-c704733228="" class="heading">Mortga

lator</h3><p _ngcontent-ng-c704733228="" class="clear">Clear

</p></div><div _ngcontent-ng-c704733228="" class="mortgage"><form

mortgage"><form _ngcontent-ng-c704733228="" novalidate="" class="ng-untouched ng-pristine ng-invalid"><div _

-invalid"><div _ngcontent-ng-c704733228="" class="form-group"><label

rm-group"><label _ngcontent-ng-c704733228="" for="mortgageAmount">Mortga

nt</label><div _ngcontent-ng-c704733228="" appcustominput="" id="input" class="input-group"><input

ut-group"><input _ngcontent-ng-c704733228="" name="mortgageAmount" formcontrolname="amount" class="ng-untouched ng-pristine ng-invalid"><span

-invalid"><span _ngcontent-ng-c704733228="" class="icon-left-side">€</spa

pan></div><div _ngcontent-ng-c704733228="" class="error-message"><span

-message"><span _ngcontent-ng-c704733228="" hidden="">This f

div></div><div _ngcontent-ng-c704733228="" class="flex-form-group"><div _

rm-group"><div _ngcontent-ng-c704733228="" class="form-group"><label

rm-group"><label _ngcontent-ng-c704733228="" for="mortgageTerm">Mortga

rm</label><div _ngcontent-ng-c704733228="" appcustominput="" id="input" class="input-group"><input

ut-group"><input _ngcontent-ng-c704733228="" type="number" name="mortgageTerm" formcontrolname="term" class="mortgage-term-input ng-untouched ng-pristine ng-invalid"><span

-invalid"><span _ngcontent-ng-c704733228="" class="icon-right-side">years<

div></div><div _ngcontent-ng-c704733228="" class="form-group"><label

rm-group"><label _ngcontent-ng-c704733228="" for="mortgageInterest">Intere

te</label><div _ngcontent-ng-c704733228="" appcustominput="" id="input" class="input-group"><input

ut-group"><input _ngcontent-ng-c704733228="" name="mortgageInterest" formcontrolname="interest" class="ng-untouched ng-pristine ng-invalid"><span

-invalid"><span _ngcontent-ng-c704733228="" class="icon-right-side">%</spa

div></div><div _ngcontent-ng-c704733228="" id="radio" class="form-group-checkbox"><div _

checkbox"><div _ngcontent-ng-c704733228="" class="subtitle"><p _ng

subtitle"><p _ngcontent-ng-c704733228="">Mortga

</p></div><label _ngcontent-ng-c704733228="" for="repayment" appcustomcheckbox="" id="radio-element"><div _

-element"><div _ngcontent-ng-c704733228="" id="radio" class="custom-radio"><input

pan></div><span _ngcontent-ng-c704733228="">Repaym

n></label><label _ngcontent-ng-c704733228="" for="interestOnly" appcustomcheckbox="" id="radio-element"><div _

pan></div><span _ngcontent-ng-c704733228="">Intere

n></label><div _ngcontent-ng-c704733228="" class="error-message"><span

div></div><div _ngcontent-ng-c704733228="" class="btns"><butto

ss="btns"><button _ngcontent-ng-c704733228="" type="submit" class="submit"><img _

="submit"><img _ngcontent-ng-c704733228="" src="./images/icon-calculator.svg"> Calcu

836955=""><div _ngcontent-ng-c133836955="" class="container"><div _

ontainer"><div _ngcontent-ng-c133836955="" class="no-calculation"><div _

culation"><div _ngcontent-ng-c133836955="" class="wrapper"><div _

"wrapper"><div _ngcontent-ng-c133836955="" class="icon"><img _

ss="icon"><img _ngcontent-ng-c133836955="" src="./images/illustration-empty.svg"></div>

vg"></div><div _ngcontent-ng-c133836955="" class="information"><h4 _n

ormation"><h4 _ngcontent-ng-c133836955="" class="subtitle">Result

here</h4><p _ngcontent-ng-c133836955="" class="description"> Compl

Design comparison

Please log in to post a comment

Community feedback

Mortgage Repayment Calculator with Docker Deployment

Design comparison

Please log in to post a comment

Community feedback

Join our Discord community