lesson 3 ending

2020-05-26 23:39:42 -04:00 · 2020-05-26 23:39:42 -04:00 · 39452ddc6c
commit 39452ddc6c
parent 8dd2042e95
2 changed files with 26 additions and 3 deletions
--- a/index.html
+++ b/index.html
@ -10,10 +10,26 @@
  </head>
  <body>
    <div id="app">
-      <h1>Product goes here</h1>
+      <div class="nav-bar"></div>
+      
+      <div class="product-display">
+        <div class="product-container">
+          <div class="product-image">
+            <img v-bind:src="image">
+          </div>
+          <div class="product-info">
+            <h1>{{ product }}</h1>
+          </div>
+        </div>
+      </div>
    </div>

-    <!-- Import JS -->
+    <!-- Import App -->
    <script src="./main.js"></script>
+
+    <!-- Mount App -->
+    <script>
+      app.mount('#app')
+    </script>
  </body>
 </html>
--- a/main.js
+++ b/main.js
@ -1 +1,8 @@
-const product = "Socks"
+const app = Vue.createApp({
+    data() {
+        return {
+            product: 'Socks',
+            image: './assets/images/socks_green.jpg'
+        }
+    }
+})