From 39452ddc6cae0945a60082c4e851bac05d37562a Mon Sep 17 00:00:00 2001 From: Adam Jahr Date: Tue, 26 May 2020 23:39:42 -0400 Subject: [PATCH 01/14] 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/14] 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/14] 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/14] 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/14] 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/14] 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/14] 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/14] 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/14] 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/14] 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/14] 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 691f535d1aa458a53d86cf6eaa7c8bbd669eb1f2 Mon Sep 17 00:00:00 2001 From: Adam Jahr Date: Mon, 6 Jul 2020 21:37:19 -0400 Subject: [PATCH 12/14] L6 ending w/ solution --- assets/styles.css | 4 ++ components/ProductDisplay.js | 102 ----------------------------------- components/ReviewForm.js | 52 ------------------ components/ReviewList.js | 22 -------- index.html | 2 +- main.js | 4 +- 6 files changed, 7 insertions(+), 179 deletions(-) delete mode 100644 components/ProductDisplay.js delete mode 100644 components/ReviewForm.js delete mode 100644 components/ReviewList.js 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; } 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/index.html b/index.html index 318bb07d0..52b70f530 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,7 @@
- +

{{ product }}

diff --git a/main.js b/main.js index fe5f42bc4..c19567837 100644 --- a/main.js +++ b/main.js @@ -1,10 +1,10 @@ const app = Vue.createApp({ data() { return { - cart:0, + cart: 0, product: 'Socks', 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 a2cbfb577f15399c81ddafe6917e79e725671c59 Mon Sep 17 00:00:00 2001 From: Adam Jahr Date: Tue, 21 Jul 2020 00:17:10 -0400 Subject: [PATCH 13/14] L6 solution --- index.html | 3 +++ main.js | 9 ++++++++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 52b70f530..a2cb7187e 100644 --- a/index.html +++ b/index.html @@ -28,6 +28,9 @@

{{ product }}

{{ variant.color }}
+ + +
diff --git a/main.js b/main.js index c19567837..a41379d7a 100644 --- a/main.js +++ b/main.js @@ -4,7 +4,7 @@ const app = Vue.createApp({ cart: 0, product: 'Socks', image: './assets/images/socks_blue.jpg', - inStock: false, + inStock: true, details: ['50% cotton', '30% wool', '20% polyester'], variants: [ { id: 2234, color: 'green', image: './assets/images/socks_green.jpg' }, @@ -16,6 +16,13 @@ const app = Vue.createApp({ addToCart() { this.cart += 1 }, + // solution + removeFromCart() { + if (this.cart >= 1) { + this.cart -= 1 + } + }, + // solution updateImage(variantImage) { this.image = variantImage } From 277fbeb7da05938236b51875aa9846e49650d2eb Mon Sep 17 00:00:00 2001 From: Andy Date: Fri, 9 Apr 2021 15:51:53 -0400 Subject: [PATCH 14/14] update cdn link --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index a2cb7187e..0b2470f7b 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - +