diff --git a/assets/styles.css b/assets/styles.css
index c52316317..f912bd997 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -25,7 +25,7 @@ body {
margin: 25px 100px;
float: right;
border: 1px solid #d8d8d8;
- padding: 10px 30px;
+ padding: 30px 30px;
background-color: white;
-webkit-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57);
@@ -89,7 +89,7 @@ li {
}
.out-of-stock-img {
- opacity:0.5
+ opacity: 0.5;
}
p {
diff --git a/index.html b/index.html
index 56c112638..e3e786f70 100644
--- a/index.html
+++ b/index.html
@@ -6,14 +6,41 @@
<!-- Import Styles -->
<link rel="stylesheet" href="./assets/styles.css" />
<!-- Import Vue.js -->
- <script src="https://unpkg.com/vue@3.0.0-beta.12/dist/vue.global.js"></script>
+ <script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
- <h1>Product goes here</h1>
+ <div class="nav-bar"></div>
+
+ <div class="cart">Cart({{ cart }})</div>
+
+ <div class="product-display">
+ <div class="product-container">
+ <div class="product-image">
+ <img :class="{ 'out-of-stock-img': !inStock }" v-bind:src="image">
+ </div>
+ <div class="product-info">
+ <h1>{{ product }}</h1>
+ <p v-if="inStock">In Stock</p>
+ <p v-else>Out of Stock</p>
+ <ul>
+ <li v-for="detail in details">{{ detail }}</li>
+ </ul>
+ <div v-for="variant in variants" :key="variant.id" @mouseover="updateImage(variant.image)">{{ variant.color }}</div>
+ <button class="button" v-on:click="addToCart">Add to Cart</button>
+ <!-- solution -->
+ <button class="button" @click="removeFromCart">Remove Item</button>
+ <!-- solution -->
+ </div>
+ </div>
+ </div>
</div>
- <!-- Import Js -->
<script src="./main.js"></script>
+
+ <!-- Mount App -->
+ <script>
+ const mountedApp = app.mount('#app')
+ </script>
</body>
</html>
diff --git a/main.js b/main.js
index aedc73d86..a41379d7a 100644
--- a/main.js
+++ b/main.js
@@ -1 +1,30 @@
-const product = 'Socks'
+const app = Vue.createApp({
+ data() {
+ return {
+ cart: 0,
+ product: 'Socks',
+ image: './assets/images/socks_blue.jpg',
+ inStock: true,
+ 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' },
+ ]
+ }
+ },
+ methods: {
+ addToCart() {
+ this.cart += 1
+ },
+ // solution
+ removeFromCart() {
+ if (this.cart >= 1) {
+ this.cart -= 1
+ }
+ },
+ // solution
+ updateImage(variantImage) {
+ this.image = variantImage
+ }
+ }
+})