WIP L10.4

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/ProductDisplay.js

@@ -1,102 +1,93 @@
-app.component('product-display', {
+app.component("product-display", {
 	props: {
 		premium: {
 			type: Boolean,
-      required: true
+			required: true,
-    }
+		},
 	},
 	template:
 		/*html*/
-    `
+		`<div class="product-display">
-   <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>
 
-        <div class="color-circle"
+        <div 
           v-for="(variant, index) in variants" 
           :key="variant.id" 
-          :style="{ backgroundColor: variant.color }"
+          @mouseover="updateVariant(index)" 
-          @mouseover="updateProduct(index)"
+          class="color-circle" 
-          >
+          :style="{ backgroundColor: variant.color }">
         </div>
         
-        <button class="button" v-on:click="addToCart" 
+        <button 
-          :disabled="!inStock"
+          class="button" 
           :class="{ disabledButton: !inStock }" 
-          >
+          :disabled="!inStock" 
-        Add to cart
+          v-on:click="addToCart">
+          Add to Cart
         </button>
       </div>
     </div>
-
+  </div>`,
-    <review-list :reviews="reviews"></review-list>
-    <review-form @review-submitted="addReview" ></review-form>
-  </div>
-   `,
 	data() {
 		return {
-      product: 'Socks',
+			product: "Socks",
-      brand: 'Vue Mastery',
+			brand: "Vue Mastery",
 			selectedVariant: 0,
-      details: ['80% cotton', '20% polyester', 'Gender-neutral'],
+			details: ["50% cotton", "30% wool", "20% polyester"],
 			variants: [
 				{
 					id: 2234,
-          color: 'green',
+					color: "green",
-          image: './assets/images/socks_green.jpg',
+					image: "./assets/images/socks_green.jpg",
-          quantity: 10
+					quantity: 50,
 				},
 				{
 					id: 2235,
-          color: 'blue',
+					color: "blue",
-          image: './assets/images/socks_blue.jpg',
+					image: "./assets/images/socks_blue.jpg",
-          quantity: 0
+					quantity: 0,
-        }
+				},
 			],
-      reviews: [],
+		};
-      tabs: ['review-form', 'review-list'],
-      activeTab: 'review-form'
-    }
 	},
 	methods: {
 		addToCart() {
-      this.$emit('add-to-cart', this.variants[this.selectedVariant].id)
+			this.$emit("add-to-cart", this.variants[this.selectedVariant].id);
+			this.cart += 1;
 		},
-    updateProduct(index) {
+		updateVariant(index) {
-      this.selectedVariant = index
+			this.selectedVariant = index;
 		},
-    addReview(review) {
-      this.reviews.push(review)
-    }
 	},
 	computed: {
-    productName() {
+		title() {
-      return this.brand + ' ' + this.product
+			return this.brand + " " + this.product;
 		},
 		image() {
-      return this.variants[this.selectedVariant].image
+			return this.variants[this.selectedVariant].image;
 		},
 		inStock() {
-      return this.variants[this.selectedVariant].quantity
+			return this.variants[this.selectedVariant].quantity;
 		},
 		shipping() {
 			if (this.premium) {
-        return 'Free'
+				return "Free";
 			}
-      return 2.99
+			return 2.99;
-    }
+		},
-  }
+	},
-})
+});

components/ReviewForm.js

@@ -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
-    }
-  }
-})

components/ReviewList.js

@@ -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
-    }
-  }
-})

index.html

@@ -6,14 +6,28 @@
 		<!-- 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">
-      <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"
+			></product-display>
 		</div>
 
-    <!-- Import JS -->
+		<!-- Import App -->
 		<script src="./main.js"></script>
+
+		<!-- Import Components -->
+		<script src="./components/ProductDisplay.js"></script>
+
+		<!-- Mount App -->
+		<script>
+			const mountedApp = app.mount("#app");
+		</script>
 	</body>
 </html>

main.js

@@ -1 +1,13 @@
-const product = "Socks"
+const app = Vue.createApp({
+	data() {
+		return {
+			cart: [],
+			premium: true,
+		};
+	},
+	methods: {
+		updateCart(id) {
+			this.cart.push(id);
+		},
+	},
+});