L9 end

assets/styles.css

@@ -25,7 +25,7 @@ body {
   margin: 25px 100px;
   float: right;
   border: 1px solid #d8d8d8;
-  padding: 10px 30px;
+  padding: 30px 30px;
   background-color: white;
   -webkit-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57);
   -moz-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57);
@@ -88,6 +88,10 @@ li {
   box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.57);
 }
 
+.out-of-stock-img {
+  opacity: 0.5;
+}
+
 p {
   font-size: 22px;
 }

components/ProductDetails.js

@@ -0,0 +1,17 @@
+// solution
+app.component('product-details', {
+  props: {
+    details: {
+      type: Array,
+      required: true
+    }
+  },
+  template:
+  /*html*/
+  `
+  <ul>
+    <li v-for="detail in details">{{ detail }}</li>
+  </ul>
+  `
+})
+// solution

components/ProductDisplay.js

@@ -5,98 +5,78 @@ app.component('product-display', {
       required: true
     }
   },
-  template:
-    /*html*/
-    `
-   <div class="product-display">
-
+  template: 
+  /*html*/
+  `<div class="product-display">
     <div class="product-container">
       <div class="product-image">
-        <img :src="image" />
+        <img v-bind:src="image">
       </div>
-
       <div class="product-info">
-        <h1>{{ productName }}</h1>
+        <h1>{{ title }}</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>
+        <p>Shipping: {{ shipping }}</p>
+
+        <!-- solution -->
+        <product-details :details="details"></product-details>
+        <!-- solution -->
 
-        <div class="color-circle"
+        <div 
           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
+          :key="variant.id" 
+          @mouseover="updateVariant(index)" 
+          class="color-circle" 
+          :style="{ backgroundColor: variant.color }">
+        </div>
+
+        <button 
+          class="button" 
+          :class="{ disabledButton: !inStock }" 
+          :disabled="!inStock" 
+          v-on:click="addToCart">
+          Add to Cart
         </button>
       </div>
     </div>
-
-    <review-list :reviews="reviews"></review-list>
-    <review-form @review-submitted="addReview" ></review-form>
-  </div>
-   `,
+  </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'
+        product: 'Socks',
+        brand: 'Vue Mastery',
+        selectedVariant: 0,
+        details: ['50% cotton', '30% wool', '20% polyester'],
+        variants: [
+          { id: 2234, color: 'green', image: './assets/images/socks_green.jpg', quantity: 50 },
+          { id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg', quantity: 0 },
+        ]
     }
   },
   methods: {
-    addToCart() {
-      this.$emit('add-to-cart', this.variants[this.selectedVariant].id)
-    },
-    updateProduct(index) {
-      this.selectedVariant = index
-    },
-    addReview(review) {
-      this.reviews.push(review)
-    }
+      addToCart() {
+          this.cart += 1
+      },
+      updateVariant(index) {
+          this.selectedVariant = index
+      }
   },
   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'
+      title() {
+          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
       }
-      return 2.99
-    }
   }
-})
+})

index.html

@@ -6,14 +6,28 @@
     <!-- Import Styles -->
     <link rel="stylesheet" href="./assets/styles.css" />
     <!-- Import Vue.js -->
-    <script src="https://unpkg.com/[email protected].0-beta.12/dist/vue.global.js"></script>
+    <script src="https://unpkg.com/[email protected].11/dist/vue.global.js"></script>
   </head>
   <body>
     <div id="app">
-      <h1>Product goes here</h1>
+      <div class="nav-bar"></div>
+
+      <div class="cart">Cart({{ cart }})</div>
+      <product-display :premium="premium"></product-display>
     </div>
 
-    <!-- Import JS -->
+    <!-- Import App -->
     <script src="./main.js"></script>
+
+    <!-- Import Components -->
+    <script src="./components/ProductDisplay.js"></script>
+    <!-- solution -->
+    <script src="./components/ProductDetails.js"></script>
+    <!-- solution -->
+
+    <!-- Mount App -->
+    <script>
+      const mountedApp = app.mount('#app')
+    </script>
   </body>
 </html>

main.js

@@ -1 +1,9 @@
-const product = "Socks"
+const app = Vue.createApp({
+    data() {
+        return {
+            cart: 0,
+            premium: true
+        }
+    },
+    methods: {}
+})