L7

index.html

@@ -17,7 +17,10 @@
 			<div class="product-display">
 				<div class="product-container">
 					<div class="product-image">
-            <img v-bind:src="image">
+						<img
+							:class="{ 'out-of-stock-img': !inStock }"
+							v-bind:src="image"
+						/>
 					</div>
 					<div class="product-info">
 						<h1>{{ product }}</h1>
@@ -30,9 +33,18 @@
 						<div
 							v-for="variant in variants"
 							:key="variant.id"
-              @mouseover="updateImage(variant.image)" 
-            >{{ variant.color }}</div>
-            <button class="button" @click="addToCart">Add to Cart</button>
+							@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>
@@ -43,7 +55,25 @@
 
 		<!-- Mount App -->
 		<script>
-      const mountedApp = app.mount('#app')
+			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,24 +1,32 @@
 const app = Vue.createApp({
 	data() {
 		return {
-            cart:0,
-            product: 'Socks',
-            brand: 'Vue Mastery',
-            image: './assets/images/socks_blue.jpg',
+			cart: 0,
+			product: "Socks",
+			brand: "Vue Mastery",
+			image: "./assets/images/socks_blue.jpg",
 			inStock: false,
-            details: ['50% cotton', '30% wool', '20% polyester'],
+			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' },
-            ]
-        }
+				{
+					id: 2234,
+					color: "green",
+					image: "./assets/images/socks_green.jpg",
+				},
+				{
+					id: 2235,
+					color: "blue",
+					image: "./assets/images/socks_blue.jpg",
+				},
+			],
+		};
 	},
 	methods: {
 		addToCart() {
-            this.cart += 1
+			this.cart += 1;
 		},
 		updateImage(variantImage) {
-            this.image = variantImage
-        }
-    }
-})
+			this.image = variantImage;
+		},
+	},
+});