-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #24 from ofcyln/calculation-logic
Calculation logic
- Loading branch information
Showing
16 changed files
with
1,034 additions
and
295 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,12 @@ | ||
| <main fxLayout="column" | ||
| <main fxFill | ||
| fxLayout="column" | ||
| fxLayoutAlign="start center" | ||
| fxFill> | ||
| <app-header class="w-100"></app-header> | ||
| [ngStyle]="{'overflow': 'hidden', 'height': '100%'}"> | ||
| <app-header class="w-100" | ||
| [ngStyle]="{'z-index': '2', 'box-shadow': '0px 3px 9px -4px #333'}"></app-header> | ||
|
|
||
| <section> | ||
| <section [ngStyle]="{'overflow-y': 'auto', 'height': 'calc(100% - 64px)'}" | ||
| class="w-100"> | ||
| <router-outlet></router-outlet> | ||
| </section> | ||
| </main> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,57 +1,82 @@ | ||
| <article fxLayout="column" | ||
| fxLayoutAlign="center center"> | ||
| <h2 class="margin-top-lg" | ||
| [ngStyle]="{'text-transform': 'uppercase'}" | ||
| [ngClass.lt-md]="'margin-top-sm'">Mortgage Expense Calculator</h2> | ||
| <h2 class="margin-top-md margin-bottom-sm" | ||
| [ngStyle]="{'text-transform': 'uppercase', 'font-size': '29px'}" | ||
| [ngStyle.lt-md]="{'font-size': '22px'}" | ||
| [ngClass.lt-md]="'margin-top-sm margin-bottom-zero'">Mortgage Expense Calculator</h2> | ||
|
|
||
| <div fxLayout="row" | ||
| fxLayoutAlign="center center" | ||
| class="margin-top-md" | ||
| [ngClass]="'margin-top-sm'"> | ||
| <p fxFlex="0 1 80"> | ||
| Buying a property is a big investment in our lives. Most people don't know what amount of money they need for the | ||
| expenses of a mortgage. | ||
| <p fxFlex="0 1 80" | ||
| [ngStyle]="{'line-height': '29px'}" | ||
| [ngStyle.lt-md]="{'font-size': '13px', 'line-height': '27px'}"> | ||
| Buying a property is a big investment in our lives. | ||
| <br> | ||
| 'Mortgage Expense Calculator' is an application to use of calculating estimated mortgage expenses when you buy a | ||
| Most people are not sure what amount of money they need to have upfront for buying a property with a mortgage. | ||
| <br> | ||
| 'Mortgage Expense Calculator' is a web application to use of calculating estimated mortgage expenses when you buy a | ||
| property. | ||
| <br> | ||
| Simply enter the mortgage amount that you are going to get below and click the calculate button to see the | ||
| estimated expenses that you need for buying your property of dreams. | ||
| Simply enter the mortgage amount that you are going to get below and click the calculate button to see the estimated | ||
| expense amount that you need to have for buying your property of dreams. | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="margin-top-md" | ||
| [ngClass.lt-md]="'margin-top-sm'"> | ||
| <mat-form-field> | ||
| <mat-form-field [ngStyle]="{'font-size': '24px'}" | ||
| [ngStyle.lt-md]="{'font-size': '20px'}"> | ||
| <mat-label [style.fontSize.px]="20">Mortgage Amount</mat-label> | ||
|
|
||
| <label> | ||
| <input matInput | ||
| type="number" | ||
| [(ngModel)]="value" | ||
| inputmode="numeric" | ||
| pattern="[0-9]*"> | ||
| </label> | ||
| <span matPrefix>€ </span> | ||
|
|
||
| <input matInput | ||
| type="tel" | ||
| inputmode="number" | ||
| pattern="[0-9]*" | ||
| mask="separator" | ||
| thousandSeparator="," | ||
| [(ngModel)]="value" | ||
| (keydown.enter)="setCalculationState()"> | ||
|
|
||
| <button mat-button | ||
| *ngIf="value" | ||
| <button *ngIf="value" | ||
| mat-button | ||
| matSuffix | ||
| mat-icon-button | ||
| aria-label="Clear" | ||
| (click)="value=''"> | ||
| (click)="value=null"> | ||
| <mat-icon>close</mat-icon> | ||
| </button> | ||
| </mat-form-field> | ||
| </div> | ||
|
|
||
| <div class="margin-top-lg"> | ||
| <button mat-raised-button | ||
| color="primary">CALCULATE</button> | ||
| <div class="margin-top-lg" | ||
| [ngClass.lt-md]="'margin-top-sm'"> | ||
| <button *ngIf="!isCalculate" | ||
| mat-raised-button | ||
| color="primary" | ||
| (click)="setCalculationState()">CALCULATE | ||
| </button> | ||
| </div> | ||
|
|
||
| <app-results fxFill | ||
| <app-results *ngIf="isCalculate" | ||
| fxFill | ||
| fxLayout="row" | ||
| class="margin-top-lg margin-bottom-lg" | ||
| [mortgageValue]="value" | ||
| [calculateState]="isCalculate" | ||
| class="margin-bottom-lg" | ||
| fxLayoutAlign="center center"></app-results> | ||
|
|
||
| <button *ngIf="isCalculate" | ||
| mat-icon-button | ||
| color="primary" | ||
| class="margin-bottom-lg" | ||
| [ngClass.lt-md]="'margin-bottom-md'" | ||
| matTooltip="Clear page" | ||
| [matTooltipPosition]="'right'" | ||
| (click)="refreshPage()"> | ||
| <mat-icon>refresh</mat-icon> | ||
| </button> | ||
| </article> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.