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 c3db9998f89e92700cb0dff0eedc01db9149f60d Mon Sep 17 00:00:00 2001 From: Adam Jahr Date: Tue, 21 Jul 2020 00:21:04 -0400 Subject: [PATCH 15/19] L7 solution --- index.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 2e7d6ac6c..b7057b031 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,9 @@
- + + +

{{ product }}

From 094670e2a97f627bbef12bddc9c410fb6335e84a Mon Sep 17 00:00:00 2001 From: Adam Jahr Date: Tue, 21 Jul 2020 00:28:40 -0400 Subject: [PATCH 16/19] L7 starting code --- index.html | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index b7057b031..70bd1369f 100644 --- a/index.html +++ b/index.html @@ -17,9 +17,7 @@
- - - +

{{ product }}

@@ -30,12 +28,11 @@

{{ product }}

- + >{{ variant.color }}
+
From d727eed0c9ccbba1bac89b41edc2d4f3eba176e3 Mon Sep 17 00:00:00 2001 From: Andy Date: Wed, 29 Jul 2020 01:28:44 -0400 Subject: [PATCH 17/19] L7 starting code --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 70bd1369f..3aa8719c0 100644 --- a/index.html +++ b/index.html @@ -32,7 +32,7 @@

{{ product }}

:key="variant.id" @mouseover="updateImage(variant.image)" >{{ variant.color }}
- +
From dbf00bb4a387075d50f417466192cc60a48dfceb Mon Sep 17 00:00:00 2001 From: Andy Date: Fri, 9 Apr 2021 15:54:05 -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 3aa8719c0..1c77b3211 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - +
From 9c90067ac8cbe9698be24f75dc71ed149cb50690 Mon Sep 17 00:00:00 2001 From: gabcbiz Date: Wed, 14 Jun 2023 20:36:11 +0800 Subject: [PATCH 19/19] Update index.html --- index.html | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 9d07382ed..27e0e5c98 100644 --- a/index.html +++ b/index.html @@ -28,11 +28,12 @@

{{ product }}

{{ variant.color }}
- + :key="variant.id" + :style="{ backgroundColor: variant.color }" + @mouseover="updateImage(variant.image)">
+