quotes added!

s10QuoteApp/src/App.vue

@@ -1,9 +1,9 @@
 <template>
     <div class="container">
-        <h1>Quotes</h1>
+        <app-header :quoteCount="quotes.length" :maxQuotes="maxQuotes"></app-header>
         <app-new-quote  @newQuote="newQuote"></app-new-quote>
         <hr>
-        <app-quote-grid :quotes="quotes"></app-quote-grid>
+        <app-quote-grid :quotes="quotes" @quoteDelete="deleteQuote"></app-quote-grid>
         <div class="row">
             <div class="col-sm-12 text-center">
                 <div class="alert alert-info">click a quote to delete it.</div>
@@ -15,22 +15,30 @@
 <script>
     import QuoteGrid from './components/QuoteGrid.vue'
     import NewQuote from './components/NewQuote.vue'
+    import Header from './components/Header.vue'
+
     export default {
         data(){
             return {
                 maxQuotes: 10,
                 quotes: ["Just a quote to see something"],
-
             };
         },
         components: {
             appQuoteGrid: QuoteGrid,
+            appHeader: Header,
             appNewQuote: NewQuote,
         },
         methods: {
             newQuote(quote) {
+                if (this.quotes.length >= this.maxQuotes){
+                    return alert('Please delete quotes first');
+                }
                 this.quotes.push(quote)
             },
+            deleteQuote(index){
+                this.quotes.splice(index, 1)
+            }
         },
     }
 </script>

s10QuoteApp/src/components/Header.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="row">
+        <div class="col-sm-12">
+        <h1>Quotes</h1>
+            <div class="progress">
+                <div class="progress-bar" role="progressbar" aria-valuenow="100"
+                     aria-valuemin="0" aria-valuemax="100" :style="{width: (quoteCount / maxQuotes) * 100 + '%'}">
+                    {{quoteCount}} / {{maxQuotes}}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: ['quoteCount', 'maxQuotes'],
+    }
+</script>
+
+<style scoped>
+
+</style>

s10QuoteApp/src/components/NewQuote.vue

@@ -21,11 +21,13 @@
         },
         methods: {
             createNew(){
+                if (this.quote.length){
                     this.$emit('newQuote', this.quote);
                     this.quote = '';
                 }
             }
         }
+    }
 </script>
 
 <style scoped>

s10QuoteApp/src/components/QuoteGrid.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="row">
-        <app-quote v-for='quote in quotes'>
+        <app-quote v-for='(quote, index) in quotes' @click.native="deleteQuote(index)">
             {{quote}}
         </app-quote>
     </div>
@@ -13,6 +13,11 @@
         props: ['quotes'],
         components: {
             appQuote: Quote,
+        },
+        methods:{
+            deleteQuote(index){
+                this.$emit('quoteDelete', index)
+            }
         }
     }
 </script>