From 59b650a3cb87d99e649a2acfce9dd38c82b4eb46 Mon Sep 17 00:00:00 2001
From: peakacode <72694204+peakacode@users.noreply.github.com>
Date: Mon, 30 Aug 2021 13:02:00 +0800
Subject: [PATCH] L4-done

add image, inventory, onSale on data object and call in on html. Added another v-if and v-else for the items and item to display accordingly
---
 index.html | 11 ++++++++++-
 main.js    |  7 +++++--
 2 files changed, 15 insertions(+), 3 deletions(-)
diff --git a/index.html b/index.html
index e33445114..c51ca304b 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
     <!-- Import Styles -->
     <link rel="stylesheet" href="./assets/styles.css" />
     <!-- Import Vue.js -->
-    <script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
+    <script src="https://unpkg.com/vue@next"></script>
   </head>
   <body>
     <div id="app">
@@ -19,6 +19,15 @@
           </div>
           <div class="product-info">
             <h1>{{ product }}</h1>
+            <p v-if="onSale === true">On Sale!</p>
+            <p v-if="inventory > 10">In Stock</p>
+            <p v-else-if="inventory <= 10 && inventory > 0">
+              Almost sold out 
+              (<small v-if="inventory > 1 && inventory <= 10 ">{{ inventory }} items</small>
+              <small v-else="inventory">{{ inventory}} item</small>
+              left!)
+            </p>
+            <p v-else>Out of Stock</p>
           </div>
         </div>
       </div>
diff --git a/main.js b/main.js
index c0cd51b46..f020568b7 100644
--- a/main.js
+++ b/main.js
@@ -2,7 +2,10 @@ const app = Vue.createApp({
     data() {
         return {
             product: 'Socks',
-            image: './assets/images/socks_blue.jpg'
+            image: './assets/images/socks_blue.jpg',
+            // inStock: true,
+            inventory: 1,
+            onSale: true
         }
     }
-})
+});
