calculator.component.html

<div class="mt-4">
  <p>Enter two numbers and click a mathematical operation to calculate the result</p>
</div>

<div class="mt-4">
  <div class="input-group">
    <label>
      X:
      <input type="text" [(ngModel)]="XValue">
    </label>
  </div>
  <div class="input-group">
    <label>
      Y:
      <input type="text" [(ngModel)]="YValue">
    </label>
  </div>
</div>

<div class="btn-group mt-4" role="group" aria-label="Math Operations">
  <button class="btn btn-outline-primary" (click)="onAddClick()">Add</button>
  <button class="btn btn-outline-primary" (click)="onSubClick()">Subtract</button>
  <button class="btn btn-outline-primary" (click)="onMultClick()">Multiply</button>
  <button class="btn btn-outline-primary" (click)="onDivClick()">Divide</button>
  <button class="btn btn-outline-primary" (click)="onPowClick()">Exponent</button>
</div>

<div class="mt-4">
  <p class="text-success">{{Results}}</p>
</div>