L6

index.html

@@ -17,7 +17,7 @@
 			<div class="product-display">
 				<div class="product-container">
 					<div class="product-image">
-            <img v-bind:src="image">
+						<img v-bind:src="image" />
 					</div>
 					<div class="product-info">
 						<h1>{{ product }}</h1>
@@ -26,8 +26,20 @@
 						<ul>
 							<li v-for="detail in details">{{ detail }}</li>
 						</ul>
-            <div v-for="variant in variants" :key="variant.id">{{ variant.color }}</div>
-            <button class="button">Add to Cart</button>
+						<div
+							@mouseover="this.image = variant.image"
+							v-for="variant in variants"
+							:key="variant.id"
+						>
+							{{ variant.color }}
+						</div>
+						<button class="button" @click="cart++">
+							Add to Cart
+						</button>
+
+						<button class="button" @click="cart--" v-if="cart > 0">
+							Remove item
+						</button>
 					</div>
 				</div>
 			</div>
@@ -38,7 +50,7 @@
 
 		<!-- Mount App -->
 		<script>
-      const mountedApp = app.mount('#app')
+			const mountedApp = app.mount("#app");
 		</script>
 	</body>
 </html>