From b9740f92390e0ed5b8576d1fb2ee5bc147d6be23 Mon Sep 17 00:00:00 2001
From: Sean McArdle <sean@mcardletech.com>
Date: Thu, 28 May 2020 22:07:40 -0700
Subject: [PATCH] fixed spacing issues and counter check edge case

---
 src/App.vue                |  5 +++--
 src/components/Counter.vue | 17 ++++++++++++-----
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9f1e494..bd48dde 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <header>
+    <header id="header">
       <span>Counter</span>
     </header>
     <main>
@@ -29,6 +29,7 @@ export default {
 
 main {
   text-align: center;
+  height: calc( 100% - 56px );
   /* margin-top: 40px; */
 }
 
@@ -51,7 +52,7 @@ header span {
   padding-top: 16px;
 }
 
-html, body, main, counter {
+html, body, counter {
     margin: 0;
     height: 100%;
 }
diff --git a/src/components/Counter.vue b/src/components/Counter.vue
index e5069ca..f6066f7 100644
--- a/src/components/Counter.vue
+++ b/src/components/Counter.vue
@@ -2,7 +2,7 @@
   <div class="counter">
       <div class="count-top">
         <label class="upper-label" for="limit" @click="reset">Limit</label>
-        <input class="upper-input" name="limit" type="number" v-model="countBound" placeholder="10"/>
+        <input class="upper-input" name="limit" type="number" pattern="[0-9]*" v-model="countBound" placeholder="10"/>
       </div>
       <div @click="bumpCount" :style="countStyle" class="count-bottom">
           <div class="value">{{ countCurrent }}</div>
@@ -35,6 +35,13 @@ export default {
         this.countCurrent = this.countCurrent + 1
       }
 
+      this.checkLimit()
+    },
+    reset () {
+      this.countCurrent = 0
+      this.limitReached = false
+    },
+    checkLimit () {
       this.limitReached = (this.countCurrent >= this.countBound)
 
       if (this.limitReached) {
@@ -43,11 +50,10 @@ export default {
       } else {
         this.countStyle.backgroundColor = '#179e63'
       }
-    },
-    reset () {
-      this.countCurrent = 0
-      this.limitReached = false
     }
+  },
+  watch: {
+    countBound: function () { this.checkLimit() }
   }
 }
 </script>
@@ -77,6 +83,7 @@ export default {
   vertical-align: middle;
   align-self: flex-end;
   margin: auto;
+  padding-right: 10px;
 }
 .upper-input {
   font-size: 1em;