From 39452ddc6cae0945a60082c4e851bac05d37562a Mon Sep 17 00:00:00 2001 From: Adam Jahr Date: Tue, 26 May 2020 23:39:42 -0400 Subject: [PATCH 01/16] 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/16] 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/16] 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/16] 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/16] 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/16] 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/16] 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/16] 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/16] 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/16] 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/16] 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 12062da9d1724afebf5a21a4ded3acb760a82bd1 Mon Sep 17 00:00:00 2001 From: Adam Jahr Date: Wed, 24 Jun 2020 01:50:31 -0400 Subject: [PATCH 12/16] L6 starting code --- index.html | 2 +- main.js | 8 -------- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/index.html b/index.html index 318bb07d0..0b0500730 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,7 @@

{{ product }}

  • {{ detail }}
    • {{ variant.color }}
    - + diff --git a/main.js b/main.js index fe5f42bc4..a274b91f0 100644 --- a/main.js +++ b/main.js @@ -11,13 +11,5 @@ const app = Vue.createApp({ { id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg' }, ] } - }, - methods: { - addToCart() { - this.cart += 1 - }, - updateImage(variantImage) { - this.image = variantImage - } } }) From 1572b8c23e878c5822d4e03a02d5eee1151c7221 Mon Sep 17 00:00:00 2001 From: Adam Jahr Date: Tue, 21 Jul 2020 00:06:01 -0400 Subject: [PATCH 13/16] L6 starting --- components/ProductDisplay.js | 102 ----------------------------------- components/ReviewForm.js | 52 ------------------ components/ReviewList.js | 22 -------- 3 files changed, 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 - } - } -}) From 0a13d4e6077cedabe41fd0a671693915d1db1594 Mon Sep 17 00:00:00 2001 From: Adam Jahr Date: Thu, 12 Nov 2020 16:54:59 -0500 Subject: [PATCH 14/16] Update index.html --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 0b0500730..c4a85bc3c 100644 --- a/index.html +++ b/index.html @@ -26,7 +26,7 @@

    {{ product }}

    • {{ detail }}
    -
    {{ variant.color }}
    +
    {{ variant.color }}
    From f91df3ac12a821ec2a5fdf257e0adfab05f3ed9e Mon Sep 17 00:00:00 2001 From: Andy Date: Fri, 9 Apr 2021 15:50:00 -0400 Subject: [PATCH 15/16] update cdn link --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index c4a85bc3c..f30041f2d 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - +
    From 548b405f4beb1144b775e0b5b49edf9c1f4b3eb3 Mon Sep 17 00:00:00 2001 From: gabcbiz Date: Wed, 14 Jun 2023 20:10:11 +0800 Subject: [PATCH 16/16] Lesson 6 --- index.html | 5 +++-- main.js | 13 +++++++++++++ 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 30970c721..73d317d60 100644 --- a/index.html +++ b/index.html @@ -26,8 +26,9 @@

    {{ product }}

    • {{ detail }}
    -
    {{ variant.color }}
    - +
    {{ variant.color }}
    + +
    diff --git a/main.js b/main.js index a274b91f0..e8846c12e 100644 --- a/main.js +++ b/main.js @@ -11,5 +11,18 @@ const app = Vue.createApp({ { id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg' }, ] } + }, + methods: { + addToCart() { + this.cart += 1; + }, + updateImage(variantImage) { + this.image = variantImage; + }, + removeFromCart() { + if (this.cart > 0) { + this.cart -= 1; + } + } } })