home.html

<ion-content padding>
  <!-- #region value -->
  <div class="contents">
    <ion-row>
      <ion-input type="number" class="value-input" [(ngModel)]="fromValue" placeholder="from" (keyup)="calculateCurrencyOne()"></ion-input>
    </ion-row>

    <ion-row>
      <ion-input type="number" class="value-input" [(ngModel)]="toValue" placeholder="to" (keyup)="calculateCurrencyTwo()"></ion-input>
    </ion-row>
  </div>
  <!-- #endregion -->

  <!-- #region -->
  <ion-row>
    <ion-col class="selectors">
      <select class="select-list" [(ngModel)]="fromCurr" (change)="getCurrencyRate()">
        <option *ngFor="let item of countryCodes" selected value="{{item}}">{{item}}</option>
      </select>
    </ion-col>

    <ion-col>
      <select class="select-list" [(ngModel)]="toCurr" (change)="getCurrencyRate()">
        <option *ngFor="let item of countryCodes" value="{{item}}">{{item}}</option>
      </select>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-card class="card-view">
      <ion-card-header class="card-header">
        <p>{{resultRate}}</p>
      </ion-card-header>
      <ion-card-content class="card-contents">
        <ion-row>
          <p>{{countryNames.get(fromCurr)}}</p>
        </ion-row>
        <ion-row>
          <p>{{countryNames.get(toCurr)}}</p>
        </ion-row>
      </ion-card-content>
    </ion-card>
  </ion-row>
  <!-- #endregion -->

</ion-content>