cardWorkoutApp/src/app/components/main/main.component.html

<div class="container">
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-header">
                    Card Workout!
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label for="numCards">Number of cards</label>
                        <input type="number" class="form-control" id="numCards" [(ngModel)]="numCards">
                    </div>
                    <button href="#" class="btn btn-primary" (click)="createCards()">Submit</button>
                    <button style="margin-left: 1em" href="#" class="btn btn-danger"
                        (click)="resetCards()">Reset</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div *ngIf="workoutDeck && showCards" class="container">
    <div class="row">
        <!-- Exercise info -->
        <div class="col-md-4 col-sm-12 center">
            <div class="alert alert-success" role="alert">
                Current Exercise
            </div>
            <div *ngIf="exercise && reps" class="card sticky-card">
                <div class="card-body">
                    <h5 class="card-title">{{exercise}}</h5>
                    <p class="card-text">{{reps}} reps</p>
                </div>
            </div>
        </div>
        <!-- Current card -->
        <div class="col-md-4 col-sm-12 center">
            <div *ngIf="currentCardNumber < workoutDeck.length" class="alert alert-success" role="alert">
                Current Card
            </div>
            <card *ngIf="currentCardNumber < workoutDeck.length" class=""[number]="workoutDeck[currentCardNumber].value"
                [suit]="workoutDeck[currentCardNumber].suit" (click)="incrementCardCounter()"></card>
        </div>
        <!-- Previous card -->
        <div class="col-md-4 col-sm-12 center">
            <div *ngIf="previousCardNumber > -1" class="alert alert-danger" role="alert">
                Previous Card
            </div>
            <card *ngIf="previousCardNumber > -1" class="" [number]="workoutDeck[previousCardNumber].value"
                [suit]="workoutDeck[previousCardNumber].suit" (click)="decrementCardCounter()"></card>
        </div>
    </div>
</div>