components/ProductDisplay.js

@@ -0,0 +1,102 @@
+app.component('product-display', {
+  props: {
+    premium: {
+      type: Boolean,
+      required: true
+    }
+  },
+  template:
+    /*html*/
+    `
+   <div class="product-display">
+        
+    <div class="product-container">
+      <div class="product-image">
+        <img :src="image" />
+      </div>
+
+      <div class="product-info">
+        <h1>{{ productName }}</h1>
+        <p v-if="inStock">In Stock</p>
+        <p v-else>Out of Stock</p>
+        <p>Shipping: {{ shipping }}</p>
+
+        <ul>
+          <li v-for="detail in details">{{ detail }}</li>
+        </ul>
+
+        <div class="color-circle"
+          v-for="(variant, index) in variants" 
+          :key="variant.id"
+          :style="{ backgroundColor: variant.color }"
+          @mouseover="updateProduct(index)"
+          >
+        </div> 
+
+        <button class="button" v-on:click="addToCart" 
+          :disabled="!inStock"
+          :class="{ disabledButton: !inStock }"
+          >
+        Add to cart
+        </button>
+      </div>
+    </div>
+
+    <review-list :reviews="reviews"></review-list>
+    <review-form @review-submitted="addReview" ></review-form>
+  </div>
+   `,
+  data() {
+    return {
+      product: 'Socks',
+      brand: 'Vue Mastery',
+      selectedVariant: 0,
+      details: ['80% cotton', '20% polyester', 'Gender-neutral'],
+      variants: [
+        {
+          id: 2234,
+          color: 'green',
+          image: './assets/images/socks_green.jpg',
+          quantity: 10
+        },
+        {
+          id: 2235,
+          color: 'blue',
+          image: './assets/images/socks_blue.jpg',
+          quantity: 0
+        }
+      ],
+      reviews: [],
+      tabs: ['review-form', 'review-list'],
+      activeTab: 'review-form'
+    }
+  },
+  methods: {
+    addToCart() {
+      this.$emit('add-to-cart', this.variants[this.selectedVariant].id)
+    },
+    updateProduct(index) {
+      this.selectedVariant = index
+    },
+    addReview(review) {
+      this.reviews.push(review)
+    }
+  },
+  computed: {
+    productName() {
+      return this.brand + ' ' + this.product
+    },
+    image() {
+      return this.variants[this.selectedVariant].image
+    },
+    inStock() {
+      return this.variants[this.selectedVariant].quantity
+    },
+    shipping() {
+      if (this.premium) {
+        return 'Free'
+      }
+      return 2.99
+    }
+  }
+})

components/ReviewForm.js

@@ -0,0 +1,52 @@
+app.component('review-form', {
+  template:
+    /*html*/
+    `
+    <form class="review-form" @submit.prevent="onSubmit">
+      <h3>Leave a review</h3>
+
+      <label for="name">Name:</label>
+      <input id="name" v-model="name">
+    
+      <label for="review">Review:</label>      
+      <textarea id="review" v-model="text"></textarea>
+
+      <label for="rating">Rating:</label>
+      <select id="rating" v-model.number="rating">
+        <option>5</option>
+        <option>4</option>
+        <option>3</option>
+        <option>2</option>
+        <option>1</option>
+      </select>
+  
+      <input class="button" type="submit" value="Submit">  
+    
+    </form>
+  `,
+  data() {
+    return {
+      name: '',
+      text: '',
+      rating: null
+    }
+  },
+  methods: {
+    onSubmit() {
+      if (this.name === '' || this.text === '' || this.rating === null) {
+        alert('Review is incomplete. Please fill out every field.')
+        return
+      }
+
+      const review = {
+        name: this.name,
+        text: this.text,
+        rating: this.rating
+      }
+      this.$emit('review-submitted', review)
+      this.name = ''
+      this.text = ''
+      this.rating = null
+    }
+  }
+})

components/ReviewList.js

@@ -0,0 +1,22 @@
+app.component('review-list', {
+  template:
+    /*html*/
+    `
+    <div  v-if="reviews.length" class="review-container">
+    <h3>Reviews:</h3>
+      <ul>
+        <li v-for="(review, index) in reviews" :key="index">
+          {{ review.name }} gave this {{ review.rating }} stars
+          <br/>
+          "{{ review.text }}"
+        </li>
+      </ul>
+    </div>
+  `,
+  props: {
+    reviews: {
+      type: Array,
+      required: true
+    }
+  }
+})

index.html

@@ -1,38 +1,35 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<title>Vue Mastery</title>
-		<!-- 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>
-	</head>
-	<body>
-		<div id="app">
-			<div class="nav-bar"></div>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vue Mastery</title>
+    <!-- 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>
+  </head>
+  <body>
+    <div id="app">
+      <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>
-						<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>
-		</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 App -->
-		<script src="./main.js"></script>
+    <!-- Import App -->
+    <script src="./main.js"></script>
 
-		<!-- Mount App -->
-		<script>
-			const mountedApp = app.mount("#app");
-		</script>
-	</body>
+    <!-- Mount App -->
+    <script>
+      const mountedApp = app.mount('#app')
+    </script>
+  </body>
 </html>

main.js

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