L7

components/ProductDisplay.js

@@ -1,93 +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 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>
-      </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);
-			this.cart += 1;
-		},
-		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;
-		},
-	},
-});

index.html

@@ -12,22 +12,68 @@
 		<div id="app">
 			<div class="nav-bar"></div>
 
-			<div class="cart">Cart({{ cart.length }})</div>
+			<div class="cart">Cart({{ cart }})</div>
-			<product-display
+
-				:premium="premium"
+			<div class="product-display">
-				@add-to-cart="updateCart"
+				<div class="product-container">
-			></product-display>
+					<div class="product-image">
+						<img
+							:class="{ 'out-of-stock-img': !inStock }"
+							v-bind:src="image"
+						/>
+					</div>
+					<div class="product-info">
+						<h1>{{ product }}</h1>
+						<p v-if="inStock">In Stock</p>
+						<p v-else>Out of Stock</p>
+						<ul>
+							<li v-for="detail in details">{{ detail }}</li>
+						</ul>
+
+						<div
+							v-for="variant in variants"
+							:key="variant.id"
+							@click="updateImage(variant.image)"
+							class="color-circle"
+							:style="{ backgroundColor: variant.color }"
+						></div>
+						<button
+							:class="[inStock ? '' : 'disabledButton']"
+							:disabled="!inStock"
+							class="button"
+							@click="addToCart"
+						>
+							Add to Cart
+						</button>
+					</div>
+				</div>
+			</div>
 		</div>
 
 		<!-- 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>
+
+<style>
+	.color-circle {
+		width: 50px;
+		height: 50px;
+		margin-top: 8px;
+		border: 2px solid #d8d8d8;
+		border-radius: 50%;
+	}
+	.color-circle:hover {
+		cursor: pointer;
+	}
+
+	.disabledButton {
+		background-color: #d8d8d8;
+		cursor: not-allowed;
+	}
+</style>

main.js

@@ -1,13 +1,32 @@
 const app = Vue.createApp({
 	data() {
 		return {
-			cart: [],
+			cart: 0,
-			premium: true,
+			product: "Socks",
+			brand: "Vue Mastery",
+			image: "./assets/images/socks_blue.jpg",
+			inStock: false,
+			details: ["50% cotton", "30% wool", "20% polyester"],
+			variants: [
+				{
+					id: 2234,
+					color: "green",
+					image: "./assets/images/socks_green.jpg",
+				},
+				{
+					id: 2235,
+					color: "blue",
+					image: "./assets/images/socks_blue.jpg",
+				},
+			],
 		};
 	},
 	methods: {
-		updateCart(id) {
+		addToCart() {
-			this.cart.push(id);
+			this.cart += 1;
+		},
+		updateImage(variantImage) {
+			this.image = variantImage;
 		},
 	},
 });