L4-start

index.html

@@ -15,10 +15,13 @@
 			<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>
+						<p v-if="inventory > 10">In Stock</p>
+						<p v-else>Out of Stock</p>
+						<p v-if="on_sale">On Sale</p>
 					</div>
 				</div>
 			</div>
@@ -29,7 +32,7 @@
 
 		<!-- Mount App -->
 		<script>
-      const mountedApp = app.mount('#app')
+			const mountedApp = app.mount("#app");
 		</script>
 	</body>
 </html>

main.js

@@ -1,8 +1,10 @@
 const app = Vue.createApp({
 	data() {
 		return {
-            product: 'Socks',
+			product: "Socks",
-            image: './assets/images/socks_blue.jpg'
+			image: "./assets/images/socks_blue.jpg",
-        }
+			inventory: 100,
-    }
+			on_sale: true,
-})
+		};
+	},
+});