Vue 2 code to change over

assets/styles.css

@@ -0,0 +1,123 @@
+body {
+  font-family: tahoma;
+  color: #282828;
+  margin: 0px;
+}
+
+.button {
+  margin-top: 30px;
+  background-color: #1e95ea;
+  color: white;
+  height: 50px;
+  width: 150px;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.cart {
+  margin: 25px;
+  float: right;
+  border: 1px solid #d8d8d8;
+  padding: 5px 20px;
+}
+
+.color-box {
+  width: 40px;
+  height: 40px;
+  margin-top: 5px;
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.disabledButton {
+  background-color: #d8d8d8;
+}
+
+img {
+  border: 2px solid #d8d8d8;
+  width: 70%;
+  margin: 40px;
+  box-shadow: 0px 0.5px 1px #d8d8d8;
+}
+
+input {
+  width: 100%;
+  height: 40px;
+  margin-bottom: 20px;
+}
+
+label {
+  font-size: 20px;
+  margin-bottom: 5px;
+}
+
+.nav-bar {
+  background: linear-gradient(-90deg, #84cf6a, #16c0b0);
+  height: 60px;
+  margin-bottom: 15px;
+}
+
+p {
+  font-size: 20px;
+}
+
+.product {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+}
+
+.product-image,
+.product-info {
+  width: 50%;
+}
+
+.review-form {
+  display: flex;
+  flex-direction: column;
+  width: 400px;
+  padding: 20px;
+  margin: 40px;
+  border: 2px solid #d8d8d8;
+}
+
+.review-container {
+  margin-left: 40px;
+}
+
+select {
+  height: 40px;
+  font-size: 20px;
+}
+
+textarea {
+  width: 95%;
+  height: 70px;
+  padding: 10px;
+  font-size: 20px;
+  margin-bottom: 20px;
+}
+
+ul {
+  list-style-type: none;
+}
+
+@media only screen and (max-width: 600px) {
+  .container {
+    flex-direction: column;
+  }
+
+  .product-image,
+  .product-info {
+    margin-left: 10px;
+    width: 100%;
+  }
+
+  .review-form {
+    width: 90%;
+  }
+}

components/ProductDisplay.js

@@ -0,0 +1,101 @@
+Vue.component('product-display', {
+  props: {
+    premium: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  template: `
+   <div class="product">
+        
+    <div class="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-box"
+          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/socks_green.jpg',
+          quantity: 10,
+        },
+        {
+          id: 2235,
+          color: 'blue',
+          image: './assets/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,45 @@
+Vue.component('review-form', {
+  template: `
+    <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() {
+      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,20 @@
+Vue.component('review-list', {
+  template: `
+    <div class="review-container">
+      <p v-if="!reviews.length">There are no reviews yet.</p>
+      <ul v-else>
+        <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

@@ -0,0 +1,33 @@
+<!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://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+  </head>
+
+  <body>
+    <!-- Import Components -->
+    <script src="./components/ProductDisplay.js"></script>
+    <script src="./components/ReviewForm.js"></script>
+    <script src="./components/ReviewList.js"></script>
+
+    <div id="app">
+      <div class="nav-bar"></div>
+
+      <div class="cart">
+        <p>Cart({{ cart.length }})</p>
+      </div>
+      <product-display
+        :premium="premium"
+        @add-to-cart="updateCart"
+      ></product-display>
+    </div>
+
+    <!-- Import App -->
+    <script src="./main.js"></script>
+  </body>
+</html>

main.js

@@ -0,0 +1,12 @@
+const app = new Vue({
+  el: '#app',
+  data: {
+    premium: true,
+    cart: [],
+  },
+  methods: {
+    updateCart(id) {
+      this.cart.push(id)
+    },
+  },
+})