diff --git a/components/ProductDisplay.js b/components/ProductDisplay.js
deleted file mode 100644
index b764ac127..000000000
--- a/components/ProductDisplay.js
+++ /dev/null
@@ -1,102 +0,0 @@
-app.component('product-display', {
- props: {
- premium: {
- type: Boolean,
- required: true
- }
- },
- template:
- /*html*/
- `
-
-
-
-
-
-
-
-
-
{{ productName }}
-
In Stock
-
Out of Stock
-
Shipping: {{ shipping }}
-
-
-
-
-
-
-
-
-
-
-
-
-
- `,
- 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
- }
- }
-})
diff --git a/components/ReviewForm.js b/components/ReviewForm.js
deleted file mode 100644
index 6e24ea34d..000000000
--- a/components/ReviewForm.js
+++ /dev/null
@@ -1,52 +0,0 @@
-app.component('review-form', {
- template:
- /*html*/
- `
-
- `,
- 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
- }
- }
-})
diff --git a/components/ReviewList.js b/components/ReviewList.js
deleted file mode 100644
index 5f6f68df3..000000000
--- a/components/ReviewList.js
+++ /dev/null
@@ -1,22 +0,0 @@
-app.component('review-list', {
- template:
- /*html*/
- `
-
-
Reviews:
-
- -
- {{ review.name }} gave this {{ review.rating }} stars
-
- "{{ review.text }}"
-
-
-
- `,
- props: {
- reviews: {
- type: Array,
- required: true
- }
- }
-})
diff --git a/index.html b/index.html
index 318bb07d0..5c53ce222 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
-
+
@@ -27,7 +27,8 @@
{{ product }}
{{ detail }}
{{ variant.color }}
-
+
+
diff --git a/main.js b/main.js
index fe5f42bc4..75c3512f9 100644
--- a/main.js
+++ b/main.js
@@ -13,11 +13,16 @@ const app = Vue.createApp({
}
},
methods: {
- addToCart() {
+ addToCart(){
this.cart += 1
},
- updateImage(variantImage) {
+ updateImage(variantImage){
this.image = variantImage
+ },
+ deleteFromCart(){
+ if (this.cart >0){
+ this.cart -= 1
+ }
}
}
})