From 39452ddc6cae0945a60082c4e851bac05d37562a Mon Sep 17 00:00:00 2001 From: Adam Jahr Date: Tue, 26 May 2020 23:39:42 -0400 Subject: [PATCH 01/19] lesson 3 ending --- index.html | 20 ++++++++++++++++++-- main.js | 9 ++++++++- 2 files changed, 26 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index fc2738025..d2e51dc9f 100644 --- a/index.html +++ b/index.html @@ -10,10 +10,26 @@
-

Product goes here

+
+ +
+
+
+ +
+
+

{{ product }}

+
+
+
- + + + + diff --git a/main.js b/main.js index 0083deb17..9076c0fff 100644 --- 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' + } + } +}) From 95bb5ecd554d171ebf8aff97d3adb6e6555bbc8e Mon Sep 17 00:00:00 2001 From: Adam Jahr Date: Tue, 26 May 2020 23:45:05 -0400 Subject: [PATCH 02/19] L3 start --- index.html | 2 +- main.js | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index d2e51dc9f..3b915b479 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@
- +

{{ product }}

diff --git a/main.js b/main.js index 9076c0fff..d38bdeed3 100644 --- a/main.js +++ b/main.js @@ -1,8 +1,7 @@ const app = Vue.createApp({ data() { return { - product: 'Socks', - image: './assets/images/socks_green.jpg' + product: 'Socks' } } }) From 7db826380e8845bc2e168c6a622799e0cbedf0f4 Mon Sep 17 00:00:00 2001 From: Adam Jahr Date: Fri, 29 May 2020 22:04:13 -0400 Subject: [PATCH 03/19] L3 starting code --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 3b915b479..a035fb978 100644 --- a/index.html +++ b/index.html @@ -29,7 +29,7 @@

{{ product }}

From 0f08a0ddb33b1c43b306abb07f1b6f4f0dbbb677 Mon Sep 17 00:00:00 2001 From: Adam Jahr Date: Fri, 29 May 2020 22:12:52 -0400 Subject: [PATCH 04/19] L3 ending code --- index.html | 2 +- main.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index a035fb978..fc84832c7 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@
- +

{{ product }}

diff --git a/main.js b/main.js index d38bdeed3..9076c0fff 100644 --- a/main.js +++ b/main.js @@ -1,7 +1,8 @@ const app = Vue.createApp({ data() { return { - product: 'Socks' + product: 'Socks', + image: './assets/images/socks_green.jpg' } } }) From b92a6c065c54a147c91c3b1d28a42e973e624691 Mon Sep 17 00:00:00 2001 From: Adam Jahr Date: Tue, 2 Jun 2020 20:33:19 -0400 Subject: [PATCH 05/19] L4 starting code --- main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/main.js b/main.js index 9076c0fff..c0cd51b46 100644 --- a/main.js +++ b/main.js @@ -2,7 +2,7 @@ const app = Vue.createApp({ data() { return { product: 'Socks', - image: './assets/images/socks_green.jpg' + image: './assets/images/socks_blue.jpg' } } }) From 2846669a3f416eaa3dbc1822e3a749a2ab649e85 Mon Sep 17 00:00:00 2001 From: Adam Jahr Date: Tue, 2 Jun 2020 21:21:37 -0400 Subject: [PATCH 06/19] L4 ending code --- index.html | 2 ++ main.js | 3 ++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index fc84832c7..ac95523fa 100644 --- a/index.html +++ b/index.html @@ -19,6 +19,8 @@

{{ product }}

+

In Stock

+

Out of Stock

diff --git a/main.js b/main.js index c0cd51b46..e2519ee04 100644 --- a/main.js +++ b/main.js @@ -2,7 +2,8 @@ const app = Vue.createApp({ data() { return { product: 'Socks', - image: './assets/images/socks_blue.jpg' + image: './assets/images/socks_blue.jpg', + inStock: true } } }) From a903dd19cbd4e23ffe6ba1f9bd69c878a1dfbc45 Mon Sep 17 00:00:00 2001 From: Adam Jahr Date: Fri, 19 Jun 2020 17:23:40 -0400 Subject: [PATCH 07/19] L5 starting code --- main.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/main.js b/main.js index e2519ee04..1725ec2bb 100644 --- a/main.js +++ b/main.js @@ -3,7 +3,8 @@ const app = Vue.createApp({ return { product: 'Socks', image: './assets/images/socks_blue.jpg', - inStock: true + inStock: true, + details: ['50% cotton', '30% wool', '20% polyester'] } } }) From 9ce75d24c21589ca0f5ca53e188ed7dfb40b1de1 Mon Sep 17 00:00:00 2001 From: Adam Jahr Date: Fri, 19 Jun 2020 19:36:48 -0400 Subject: [PATCH 08/19] L5 ending code --- index.html | 7 +++++++ main.js | 7 ++++++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index ac95523fa..7918f28c1 100644 --- a/index.html +++ b/index.html @@ -21,6 +21,13 @@

{{ product }}

In Stock

Out of Stock

+
    +
  • {{ detail }}
    • +
+
    +
  • {{ size }}
    • +
+
{{ variant.color }}
diff --git a/main.js b/main.js index 1725ec2bb..f238d404e 100644 --- a/main.js +++ b/main.js @@ -4,7 +4,12 @@ const app = Vue.createApp({ product: 'Socks', image: './assets/images/socks_blue.jpg', inStock: true, - details: ['50% cotton', '30% wool', '20% polyester'] + details: ['50% cotton', '30% wool', '20% polyester'], + sizes: ['S', 'M', 'L', 'XL'], + variants: [ + { id: 2234, color: 'green' }, + { id: 2235, color: 'blue' }, + ] } } }) From a6209b82c8c9fecc7be39548ad93dab32e62da41 Mon Sep 17 00:00:00 2001 From: Adam Jahr Date: Fri, 19 Jun 2020 19:41:08 -0400 Subject: [PATCH 09/19] L5 starting code --- index.html | 7 ------- main.js | 7 +------ 2 files changed, 1 insertion(+), 13 deletions(-) diff --git a/index.html b/index.html index 7918f28c1..ac95523fa 100644 --- a/index.html +++ b/index.html @@ -21,13 +21,6 @@

{{ product }}

In Stock

Out of Stock

-
    -
  • {{ detail }}
    • -
-
    -
  • {{ size }}
    • -
-
{{ variant.color }}
diff --git a/main.js b/main.js index f238d404e..1725ec2bb 100644 --- a/main.js +++ b/main.js @@ -4,12 +4,7 @@ const app = Vue.createApp({ product: 'Socks', image: './assets/images/socks_blue.jpg', inStock: true, - details: ['50% cotton', '30% wool', '20% polyester'], - sizes: ['S', 'M', 'L', 'XL'], - variants: [ - { id: 2234, color: 'green' }, - { id: 2235, color: 'blue' }, - ] + details: ['50% cotton', '30% wool', '20% polyester'] } } }) From 2bd501d071f30402046ef15d39aa4bf804f2497a Mon Sep 17 00:00:00 2001 From: Adam Jahr Date: Fri, 19 Jun 2020 19:45:00 -0400 Subject: [PATCH 10/19] L5 ending code --- index.html | 7 +++++++ main.js | 7 ++++++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index ac95523fa..7918f28c1 100644 --- a/index.html +++ b/index.html @@ -21,6 +21,13 @@

{{ product }}

In Stock

Out of Stock

+
    +
  • {{ detail }}
    • +
+
    +
  • {{ size }}
    • +
+
{{ variant.color }}
diff --git a/main.js b/main.js index 1725ec2bb..f238d404e 100644 --- a/main.js +++ b/main.js @@ -4,7 +4,12 @@ const app = Vue.createApp({ product: 'Socks', image: './assets/images/socks_blue.jpg', inStock: true, - details: ['50% cotton', '30% wool', '20% polyester'] + details: ['50% cotton', '30% wool', '20% polyester'], + sizes: ['S', 'M', 'L', 'XL'], + variants: [ + { id: 2234, color: 'green' }, + { id: 2235, color: 'blue' }, + ] } } }) From 7f52372b6cde3fd8b5fdcc7502e8bf19b0e51793 Mon Sep 17 00:00:00 2001 From: Adam Jahr Date: Wed, 24 Jun 2020 01:48:12 -0400 Subject: [PATCH 11/19] L6 ending code --- assets/styles.css | 2 +- index.html | 8 ++++---- main.js | 14 +++++++++++--- 3 files changed, 16 insertions(+), 8 deletions(-) diff --git a/assets/styles.css b/assets/styles.css index 4a34b36c6..5ea1c9817 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); diff --git a/index.html b/index.html index 7918f28c1..318bb07d0 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,8 @@
+ +
Cart({{ cart }})
@@ -24,10 +26,8 @@

{{ product }}

  • {{ detail }}
-
    -
  • {{ size }}
    • -
-
{{ variant.color }}
+
{{ variant.color }}
+
diff --git a/main.js b/main.js index f238d404e..fe5f42bc4 100644 --- a/main.js +++ b/main.js @@ -1,15 +1,23 @@ 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'], - sizes: ['S', 'M', 'L', 'XL'], variants: [ - { id: 2234, color: 'green' }, - { id: 2235, color: 'blue' }, + { 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 + }, + updateImage(variantImage) { + this.image = variantImage + } } }) From 33ef70643159219d8d2bc76d9f13286eadf4d218 Mon Sep 17 00:00:00 2001 From: Adam Jahr Date: Mon, 6 Jul 2020 21:39:31 -0400 Subject: [PATCH 12/19] L7 starting code --- components/ProductDisplay.js | 102 ----------------------------------- components/ReviewForm.js | 52 ------------------ components/ReviewList.js | 22 -------- main.js | 1 + 4 files changed, 1 insertion(+), 176 deletions(-) delete mode 100644 components/ProductDisplay.js delete mode 100644 components/ReviewForm.js delete mode 100644 components/ReviewList.js 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 }}

- -
    -
  • {{ detail }}
    • -
- -
-
- - -
-
- - - -
- `, - 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*/ - ` -
-

Leave a review

- - - - - - - - - - - - -
- `, - 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/main.js b/main.js index fe5f42bc4..d323a24dd 100644 --- a/main.js +++ b/main.js @@ -3,6 +3,7 @@ const app = Vue.createApp({ return { cart:0, product: 'Socks', + brand: 'Vue Mastery', image: './assets/images/socks_blue.jpg', inStock: true, details: ['50% cotton', '30% wool', '20% polyester'], From 44d8427b7aa0b56ff33bba8af8a2c0a70eb34c30 Mon Sep 17 00:00:00 2001 From: Adam Jahr Date: Mon, 6 Jul 2020 21:41:58 -0400 Subject: [PATCH 13/19] L7 starting code --- assets/styles.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/assets/styles.css b/assets/styles.css index 5ea1c9817..f912bd997 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -88,6 +88,10 @@ li { box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.57); } +.out-of-stock-img { + opacity: 0.5; +} + p { font-size: 22px; } From 58e74974e0611367551eed54b789ffe871f7693c Mon Sep 17 00:00:00 2001 From: Adam Jahr Date: Mon, 6 Jul 2020 21:58:48 -0400 Subject: [PATCH 14/19] L7 starting code --- index.html | 10 ++++++++-- main.js | 2 +- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 318bb07d0..2e7d6ac6c 100644 --- a/index.html +++ b/index.html @@ -26,8 +26,14 @@

{{ product }}

  • {{ detail }}
-
{{ variant.color }}
- + +
+ diff --git a/main.js b/main.js index d323a24dd..7470f076d 100644 --- a/main.js +++ b/main.js @@ -5,7 +5,7 @@ const app = Vue.createApp({ product: 'Socks', brand: 'Vue Mastery', image: './assets/images/socks_blue.jpg', - inStock: true, + inStock: false, details: ['50% cotton', '30% wool', '20% polyester'], variants: [ { id: 2234, color: 'green', image: './assets/images/socks_green.jpg' }, From d440ca92fbabf931d397cc2a16f67b3ce2e49dc3 Mon Sep 17 00:00:00 2001 From: Adam Jahr Date: Mon, 6 Jul 2020 22:28:50 -0400 Subject: [PATCH 15/19] L8 ending code --- index.html | 13 ++++++++----- main.js | 22 ++++++++++++++++------ 2 files changed, 24 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 2e7d6ac6c..6c61f3bbb 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,8 @@
-

{{ product }}

+

{{ title }}

+

In Stock

Out of Stock

    @@ -28,11 +29,13 @@

    {{ product }}

+ @mouseover="updateVariant(index)" + class="color-circle" + :style="{ backgroundColor: variant.color }"> +
+ diff --git a/main.js b/main.js index 7470f076d..0d55fb758 100644 --- a/main.js +++ b/main.js @@ -4,12 +4,11 @@ const app = Vue.createApp({ cart:0, product: 'Socks', brand: 'Vue Mastery', - image: './assets/images/socks_blue.jpg', - inStock: false, + selectedVariant: 0, 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' }, + { id: 2234, color: 'green', image: './assets/images/socks_green.jpg', quantity: 50 }, + { id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg', quantity: 0 }, ] } }, @@ -17,8 +16,19 @@ const app = Vue.createApp({ addToCart() { this.cart += 1 }, - updateImage(variantImage) { - this.image = variantImage + updateVariant(index) { + this.selectedVariant = index + } + }, + computed: { + title() { + return this.brand + ' ' + this.product + }, + image() { + return this.variants[this.selectedVariant].image + }, + inStock() { + return this.variants[this.selectedVariant].quantity } } }) From 9076f8fea85428c7c2b256af4839685521cdca25 Mon Sep 17 00:00:00 2001 From: Adam Jahr Date: Tue, 21 Jul 2020 00:34:10 -0400 Subject: [PATCH 16/19] L8 solution --- index.html | 4 +++- main.js | 9 ++++++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 6c61f3bbb..470166e3f 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,9 @@

{{ title }}

- + +

{{ sale }}

+

In Stock

Out of Stock

    diff --git a/main.js b/main.js index 0d55fb758..4ab771d1a 100644 --- a/main.js +++ b/main.js @@ -9,7 +9,10 @@ const app = Vue.createApp({ variants: [ { id: 2234, color: 'green', image: './assets/images/socks_green.jpg', quantity: 50 }, { id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg', quantity: 0 }, - ] + ], + // solution + onSale: true + // solution } }, methods: { @@ -29,6 +32,10 @@ const app = Vue.createApp({ }, inStock() { return this.variants[this.selectedVariant].quantity + }, + sale() { + if (this.onSale) + return this.brand + ' ' + this.product + ' is on sale.' } } }) From c4f7046dd72357bb184842b4c1da50e618480fdf Mon Sep 17 00:00:00 2001 From: Andy Date: Tue, 28 Jul 2020 23:59:27 -0400 Subject: [PATCH 17/19] L8 solution --- main.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/main.js b/main.js index 4ab771d1a..f1098ee6b 100644 --- a/main.js +++ b/main.js @@ -33,9 +33,13 @@ const app = Vue.createApp({ inStock() { return this.variants[this.selectedVariant].quantity }, + // solution sale() { - if (this.onSale) - return this.brand + ' ' + this.product + ' is on sale.' + if (this.onSale) { + return this.brand + ' ' + this.product + ' is on sale.' + } + return '' } + // solution } }) From ddd68ed71a1f4386e867dbdf313077f009c9bea3 Mon Sep 17 00:00:00 2001 From: Andy Date: Fri, 9 Apr 2021 15:56:18 -0400 Subject: [PATCH 18/19] update cdn link --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 470166e3f..1b24ac0e6 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - +
    From b58c4fa359e784fbe07793e35ec77033ca916f01 Mon Sep 17 00:00:00 2001 From: gabcbiz Date: Wed, 14 Jun 2023 21:08:14 +0800 Subject: [PATCH 19/19] Sale by variant --- main.js | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/main.js b/main.js index f1098ee6b..ddea2569a 100644 --- a/main.js +++ b/main.js @@ -7,12 +7,9 @@ const app = Vue.createApp({ selectedVariant: 0, details: ['50% cotton', '30% wool', '20% polyester'], variants: [ - { id: 2234, color: 'green', image: './assets/images/socks_green.jpg', quantity: 50 }, - { id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg', quantity: 0 }, - ], - // solution - onSale: true - // solution + { id: 2234, color: 'green', image: './assets/images/socks_green.jpg', quantity: 50, onSale: true }, + { id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg', quantity: 0, onSale: false }, + ] } }, methods: { @@ -33,13 +30,11 @@ const app = Vue.createApp({ inStock() { return this.variants[this.selectedVariant].quantity }, - // solution sale() { - if (this.onSale) { + if (this.variants[this.selectedVariant].onSale) { return this.brand + ' ' + this.product + ' is on sale.' } return '' } - // solution } })