From 12062da9d1724afebf5a21a4ded3acb760a82bd1 Mon Sep 17 00:00:00 2001
From: Adam Jahr <adamjahr@Adams-iMac.local>
Date: Wed, 24 Jun 2020 01:50:31 -0400
Subject: [PATCH 1/5] L6 starting code

---
 index.html | 2 +-
 main.js    | 8 --------
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/index.html b/index.html
index 318bb07d0..0b0500730 100644
--- a/index.html
+++ b/index.html
@@ -27,7 +27,7 @@ <h1>{{ product }}</h1>
               <li v-for="detail in details">{{ detail }}</li>
             </ul>
             <div v-for="variant in variants" :key="variant.id" @mouseover="updateImage(variant.image)">{{ variant.color }}</div>
-            <button class="button" v-on:click="addToCart">Add to Cart</button>
+            <button class="button">Add to Cart</button>
           </div>
         </div>
       </div>
diff --git a/main.js b/main.js
index fe5f42bc4..a274b91f0 100644
--- a/main.js
+++ b/main.js
@@ -11,13 +11,5 @@ const app = Vue.createApp({
               { id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg' },
             ]
         }
-    },
-    methods: {
-        addToCart() {
-            this.cart += 1
-        },
-        updateImage(variantImage) {
-            this.image = variantImage
-        }
     }
 })

From 1572b8c23e878c5822d4e03a02d5eee1151c7221 Mon Sep 17 00:00:00 2001
From: Adam Jahr <adamjahr@Adams-iMac.local>
Date: Tue, 21 Jul 2020 00:06:01 -0400
Subject: [PATCH 2/5] L6 starting

---
 components/ProductDisplay.js | 102 -----------------------------------
 components/ReviewForm.js     |  52 ------------------
 components/ReviewList.js     |  22 --------
 3 files changed, 176 deletions(-)
 delete mode 100644 components/ProductDisplay.js
 delete mode 100644 components/ReviewForm.js
 delete mode 100644 components/ReviewList.js

diff --git a/components/ProductDisplay.js b/components/ProductDisplay.js
deleted file mode 100644
index b764ac127..000000000
--- a/components/ProductDisplay.js
+++ /dev/null
@@ -1,102 +0,0 @@
-app.component('product-display', {
-  props: {
-    premium: {
-      type: Boolean,
-      required: true
-    }
-  },
-  template:
-    /*html*/
-    `
-   <div class="product-display">
-        
-    <div class="product-container">
-      <div class="product-image">
-        <img :src="image" />
-      </div>
-
-      <div class="product-info">
-        <h1>{{ productName }}</h1>
-        <p v-if="inStock">In Stock</p>
-        <p v-else>Out of Stock</p>
-        <p>Shipping: {{ shipping }}</p>
-
-        <ul>
-          <li v-for="detail in details">{{ detail }}</li>
-        </ul>
-
-        <div class="color-circle"
-          v-for="(variant, index) in variants" 
-          :key="variant.id"
-          :style="{ backgroundColor: variant.color }"
-          @mouseover="updateProduct(index)"
-          >
-        </div> 
-
-        <button class="button" v-on:click="addToCart" 
-          :disabled="!inStock"
-          :class="{ disabledButton: !inStock }"
-          >
-        Add to cart
-        </button>
-      </div>
-    </div>
-
-    <review-list :reviews="reviews"></review-list>
-    <review-form @review-submitted="addReview" ></review-form>
-  </div>
-   `,
-  data() {
-    return {
-      product: 'Socks',
-      brand: 'Vue Mastery',
-      selectedVariant: 0,
-      details: ['80% cotton', '20% polyester', 'Gender-neutral'],
-      variants: [
-        {
-          id: 2234,
-          color: 'green',
-          image: './assets/images/socks_green.jpg',
-          quantity: 10
-        },
-        {
-          id: 2235,
-          color: 'blue',
-          image: './assets/images/socks_blue.jpg',
-          quantity: 0
-        }
-      ],
-      reviews: [],
-      tabs: ['review-form', 'review-list'],
-      activeTab: 'review-form'
-    }
-  },
-  methods: {
-    addToCart() {
-      this.$emit('add-to-cart', this.variants[this.selectedVariant].id)
-    },
-    updateProduct(index) {
-      this.selectedVariant = index
-    },
-    addReview(review) {
-      this.reviews.push(review)
-    }
-  },
-  computed: {
-    productName() {
-      return this.brand + ' ' + this.product
-    },
-    image() {
-      return this.variants[this.selectedVariant].image
-    },
-    inStock() {
-      return this.variants[this.selectedVariant].quantity
-    },
-    shipping() {
-      if (this.premium) {
-        return 'Free'
-      }
-      return 2.99
-    }
-  }
-})
diff --git a/components/ReviewForm.js b/components/ReviewForm.js
deleted file mode 100644
index 6e24ea34d..000000000
--- a/components/ReviewForm.js
+++ /dev/null
@@ -1,52 +0,0 @@
-app.component('review-form', {
-  template:
-    /*html*/
-    `
-    <form class="review-form" @submit.prevent="onSubmit">
-      <h3>Leave a review</h3>
-
-      <label for="name">Name:</label>
-      <input id="name" v-model="name">
-    
-      <label for="review">Review:</label>      
-      <textarea id="review" v-model="text"></textarea>
-
-      <label for="rating">Rating:</label>
-      <select id="rating" v-model.number="rating">
-        <option>5</option>
-        <option>4</option>
-        <option>3</option>
-        <option>2</option>
-        <option>1</option>
-      </select>
-  
-      <input class="button" type="submit" value="Submit">  
-    
-    </form>
-  `,
-  data() {
-    return {
-      name: '',
-      text: '',
-      rating: null
-    }
-  },
-  methods: {
-    onSubmit() {
-      if (this.name === '' || this.text === '' || this.rating === null) {
-        alert('Review is incomplete. Please fill out every field.')
-        return
-      }
-
-      const review = {
-        name: this.name,
-        text: this.text,
-        rating: this.rating
-      }
-      this.$emit('review-submitted', review)
-      this.name = ''
-      this.text = ''
-      this.rating = null
-    }
-  }
-})
diff --git a/components/ReviewList.js b/components/ReviewList.js
deleted file mode 100644
index 5f6f68df3..000000000
--- a/components/ReviewList.js
+++ /dev/null
@@ -1,22 +0,0 @@
-app.component('review-list', {
-  template:
-    /*html*/
-    `
-    <div  v-if="reviews.length" class="review-container">
-    <h3>Reviews:</h3>
-      <ul>
-        <li v-for="(review, index) in reviews" :key="index">
-          {{ review.name }} gave this {{ review.rating }} stars
-          <br/>
-          "{{ review.text }}"
-        </li>
-      </ul>
-    </div>
-  `,
-  props: {
-    reviews: {
-      type: Array,
-      required: true
-    }
-  }
-})

From 0a13d4e6077cedabe41fd0a671693915d1db1594 Mon Sep 17 00:00:00 2001
From: Adam Jahr <adamjahr@gmail.com>
Date: Thu, 12 Nov 2020 16:54:59 -0500
Subject: [PATCH 3/5] Update index.html

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 0b0500730..c4a85bc3c 100644
--- a/index.html
+++ b/index.html
@@ -26,7 +26,7 @@ <h1>{{ product }}</h1>
             <ul>
               <li v-for="detail in details">{{ detail }}</li>
             </ul>
-            <div v-for="variant in variants" :key="variant.id" @mouseover="updateImage(variant.image)">{{ variant.color }}</div>
+            <div v-for="variant in variants" :key="variant.id">{{ variant.color }}</div>
             <button class="button">Add to Cart</button>
           </div>
         </div>

From f91df3ac12a821ec2a5fdf257e0adfab05f3ed9e Mon Sep 17 00:00:00 2001
From: Andy <andy@Andys-MacBook-Pro.local>
Date: Fri, 9 Apr 2021 15:50:00 -0400
Subject: [PATCH 4/5] update cdn link

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index c4a85bc3c..f30041f2d 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
     <!-- Import Styles -->
     <link rel="stylesheet" href="./assets/styles.css" />
     <!-- Import Vue.js -->
-    <script src="https://unpkg.com/vue@3.0.0-beta.12/dist/vue.global.js"></script>
+    <script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
   </head>
   <body>
     <div id="app">

From 11c16e733f8588e11e2773cfac8054f54e276824 Mon Sep 17 00:00:00 2001
From: Sven2307 <88077251+Sven2307@users.noreply.github.com>
Date: Fri, 6 Jan 2023 11:46:52 +0100
Subject: [PATCH 5/5] Lesson 6

---
 index.html |  5 +++--
 main.js    | 13 +++++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index f30041f2d..5c53ce222 100644
--- a/index.html
+++ b/index.html
@@ -26,8 +26,9 @@ <h1>{{ product }}</h1>
             <ul>
               <li v-for="detail in details">{{ detail }}</li>
             </ul>
-            <div v-for="variant in variants" :key="variant.id">{{ variant.color }}</div>
-            <button class="button">Add to Cart</button>
+            <div v-for="variant in variants" :key="variant.id" @mouseover="updateImage(variant.image)">{{ variant.color }}</div>
+            <button class="button text-center" @click="addToCart">Add to Cart</button>
+            <button class="button text-center" @click="deleteFromCart">Delete item</button>
           </div>
         </div>
       </div>
diff --git a/main.js b/main.js
index a274b91f0..75c3512f9 100644
--- a/main.js
+++ b/main.js
@@ -11,5 +11,18 @@ const app = Vue.createApp({
               { id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg' },
             ]
         }
+    },
+    methods: {
+        addToCart(){
+            this.cart += 1
+        },
+        updateImage(variantImage){
+            this.image = variantImage
+        },
+        deleteFromCart(){
+            if (this.cart >0){
+                this.cart -= 1
+            }
+        }
     }
 })