Code-Pop · savuiux · May 27, 2020 · May 27, 2020 · May 30, 2020 · May 30, 2020
diff --git a/assets/styles.css b/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);
@@ -89,7 +89,7 @@ li {
 }
 
 .out-of-stock-img {
-  opacity:0.5
+  opacity: 0.5;
 }
 
 p {

diff --git a/components/ProductDetails.js b/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
diff --git a/components/ProductDisplay.js b/components/ProductDisplay.js
@@ -0,0 +1,89 @@
+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 v-bind:src="image">
+        </div>
+        <div class="product-info">
+          <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>
+          <div 
+            v-for="(variant, index) in variants" 
+            :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>
+
+          <button 
+            class="button" 
+            :class="{ disabledButton: !inStock }" 
+            :disabled="!inStock" 
+            v-on:click="removeFromCart">
+            Remove Item
+          </button>
+        </div>
+      </div>
+    </div>`,
+    data() {
+      return {
+          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)
+        },
+        removeFromCart() {
+            this.$emit('remove-from-cart')
+        },
+        updateVariant(index) {
+            this.selectedVariant = index
+        }
+    },
+    computed: {
+        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
+        }
+    }
+})
diff --git a/index.html b/index.html
@@ -6,14 +6,24 @@
     <!-- 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.length }})</div>
+      <product-display :premium="premium" @add-to-cart="updateCart" @remove-from-cart="removeFromCart"></product-display>
     </div>
 
-    <!-- Import Js -->
     <script src="./main.js"></script>
+
+    <!-- Import Components -->
+    <script src="./components/ProductDisplay.js"></script>
+
+    <!-- Mount App -->
+    <script>
+      const mountedApp = app.mount('#app')
+    </script>
   </body>
 </html>
diff --git a/main.js b/main.js
@@ -1 +1,16 @@
-const product = 'Socks'
+const app = Vue.createApp({
+    data() {
+        return {
+            cart: [],
+            premium: true
+        }
+    },
+    methods: {
+        updateCart(id) {
+            this.cart.push(id)
+        },
+        removeFromCart() {
+            this.cart.pop()
+        }
+    }
+})