fixing problems with previous card and next card

src/app/app.component.css

@@ -20,4 +20,8 @@ img {
 
 .heading {
     margin-top: 12px;
+}
+
+.alert {
+    margin-top: 24px;    
 }

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

@@ -3,7 +3,7 @@
         <div class="col">
             <div class="card">
                 <div class="card-header">
-                    Card Workout!
+                    Card Workout
                 </div>
                 <div class="card-body">
                     <div class="form-group">
@@ -26,12 +26,16 @@
             <div class="alert alert-success" role="alert">
                 Current Exercise
             </div>
-            <div *ngIf="exercise && reps" class="card sticky-card">
+            <div *ngIf="exercise && reps && !rest" class="card sticky-card">
                 <div class="card-body">
                     <h5 class="card-title">{{exercise}}</h5>
                     <p class="card-text">{{reps}} reps</p>
                 </div>
             </div>
+            <div *ngIf="rest">
+                <h5 class="card-title">Rest</h5>
+                <p class="card-text">2 minutes</p>
+            </div>
         </div>
         <!-- Current card -->
         <div class="col-md-4 col-sm-12 center">

src/app/components/main/main.component.ts

@@ -81,8 +81,7 @@ export class MainComponent implements OnInit {
     }
 
     public displayExercise() {
-        const currentCard = this.workoutDeck[this.currentCardNumber]
+        const currentCard = this.workoutDeck[this.currentCardNumber];
-        console.log(currentCard);
         if (currentCard.value !== 1) {
             this.rest = undefined
             this.reps = Number(currentCard.value)+10;
@@ -118,14 +117,34 @@ export class MainComponent implements OnInit {
     }
 
     public incrementCardCounter() {
-        this.displayExercise();
         this.currentCardNumber += 1;
         this.previousCardNumber += 1;
+        this.displayExercise();
     }
 
     public decrementCardCounter() {
-        this.displayExercise()
         this.currentCardNumber -= 1;
         this.previousCardNumber -= 1;
+        const currentCard = this.workoutDeck[this.currentCardNumber];
+        const nextCard = this.workoutDeck[this.currentCardNumber+1];
+        if (currentCard.suit === 'c') {
+            this.cCounter -= 1;
+        } else if (currentCard.suit === 'd') {
+            this.dCounter -= 1;
+        } else if (currentCard.suit === 'h') {
+            this.hCounter -= 1;
+        } else if (currentCard.suit === 's') {
+            this.sCounter -= 1;
+        }
+        if (nextCard.suit === 'c') {
+            this.cCounter -= 1;
+        } else if (nextCard.suit === 'd') {
+            this.dCounter -= 1;
+        } else if (nextCard.suit === 'h') {
+            this.hCounter -= 1;
+        } else if (nextCard.suit === 's') {
+            this.sCounter -= 1;
+        }
+        this.displayExercise()
     }
 }