Skip to content

Commit 6e0f10f

Browse files
LaoujinLaoujin
committed
reviewable socks. put in separate js files for syntax highlighting
1 parent 110d2e1 commit 6e0f10f

File tree

7 files changed

+245
-204
lines changed

7 files changed

+245
-204
lines changed

‎01-HelloWorld/01-Socks.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ <h1>{{ product }}</h1>
3737
<button
3838
v-on:click="cart++; inventory--"
3939
:disabled="!inventory"
40-
:class="{disabledButton: inventory ? false : true}"
40+
:class="{'add-to-cart': true, disabledButton: inventory ? false : true}"
4141
>
4242
<!-- Method: addToCart -->
4343
Add to Cart

‎01-HelloWorld/02-ComputedSocks.html‎

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -14,38 +14,39 @@
1414
</div>
1515

1616
<div class="product-info">
17-
<!-- Computed Properties -->
18-
<h1>{{ title }}</h1>
17+
<!-- Computed Properties -->
18+
<h1>{{ title }}</h1>
1919

2020

21-
<div>
22-
<p v-if="inventory > 10">In Stock</p>
23-
<p v-else-if="inventory">Almost sold out</p>
24-
<p v-else>Out of Stock</p>
25-
</div>
21+
<div>
22+
<p v-if="inventory > 10">In Stock</p>
23+
<p v-else-if="inventory">Almost sold out</p>
24+
<p v-else>Out of Stock</p>
25+
</div>
2626

2727

28-
<button
29-
v-on:click="cart++; inventory--"
30-
:disabled="!inventory"
31-
:class="inventory ? '' : 'disabledButton'"
32-
>
33-
Add to Cart
34-
</button>
28+
<button
29+
v-on:click="cart++; inventory--"
30+
:disabled="!inventory"
31+
class="add-to-cart"
32+
:class="inventory ? '' : 'disabledButton'"
33+
>
34+
Add to Cart
35+
</button>
3536

36-
<div class="cart">
37-
{{cart}}
38-
<i class="fas fa-shopping-cart"></i>
39-
</div>
37+
<div class="cart">
38+
{{cart}}
39+
<i class="fas fa-shopping-cart"></i>
40+
</div>
4041

4142

42-
<!-- Loops -->
43-
<div v-for="(variant, index) in variants"
44-
:key="variant.id"
45-
class="color-box"
46-
:style="{backgroundColor: variant.color}"
47-
@mouseover="setSelectedVariant(variant, index)">
48-
</div>
43+
<!-- Loops -->
44+
<div v-for="(variant, index) in variants"
45+
:key="variant.id"
46+
class="color-box"
47+
:style="{backgroundColor: variant.color}"
48+
@mouseover="setSelectedVariant(variant, index)">
49+
</div>
4950
</div>
5051
</div>
5152
</div>

‎01-HelloWorld/03-ComponentSocks.html‎

Lines changed: 2 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<html>
22
<head>
3-
<script src="https://unpkg.com/vue"></script>
43
<link href="./assets/style.css" rel="stylesheet">
54
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet">
65
<title>Componentized Socks</title>
@@ -27,91 +26,8 @@
2726
</html>
2827

2928

30-
<script type="text/javascript">
31-
const comp = Vue.component('product', {
32-
// Props with validation
33-
props: {
34-
premium: {type: Boolean, required: true, default: false}
35-
},
36-
// Without validation
37-
// props: ['premium'],
38-
template: `
39-
<div class="product">
40-
<div class="product-image">
41-
<img :src="image">
42-
</div>
43-
44-
<div class="product-info">
45-
<h1>{{ product }}</h1>
46-
47-
<div>
48-
<p v-if="inventory > 10">In Stock</p>
49-
<p v-else-if="inventory">Almost sold out</p>
50-
<p v-else>Out of Stock</p>
51-
</div>
52-
53-
<p v-if="premium">FREE Shipping</p>
54-
<p v-else>Shipping: $4.99</p>
55-
56-
<button
57-
v-on:click="addToCart"
58-
:disabled="!inventory"
59-
:class="inventory ? '' : 'disabledButton'"
60-
>
61-
Add to Cart
62-
</button>
63-
64-
<div v-for="(variant, index) in variants"
65-
:key="variant.id"
66-
class="color-box"
67-
:style="{backgroundColor: variant.color}"
68-
@mouseover="selectedVariantIndex = index">
69-
</div>
70-
</div>
71-
</div>
72-
`,
73-
data() {
74-
// Return a fresh object reference each time
75-
return {
76-
product: 'Socks',
77-
selectedVariantIndex: 0,
78-
variants: [
79-
{id: 1, color: 'green'},
80-
{id: 2, color: 'blue'}
81-
],
82-
inventory: 3,
83-
};
84-
},
85-
methods: {
86-
addToCart() {
87-
this.inventory--;
88-
const selectedVariant = this.variants[this.selectedVariantIndex];
89-
this.$emit('add-to-cart', {product: this.product, variant: selectedVariant});
90-
}
91-
},
92-
computed: {
93-
image() {
94-
const color = this.variants[this.selectedVariantIndex].color;
95-
return `./assets/socks-${color}.jpg`;
96-
}
97-
}
98-
})
99-
100-
const app = new Vue({
101-
el: '#app',
102-
data: {
103-
premium: true,
104-
cart: []
105-
},
106-
methods: {
107-
updateCart(product) {
108-
console.log('Adding to cart:', product);
109-
this.cart.push(product);
110-
}
111-
}
112-
});
113-
</script>
114-
29+
<script src="https://unpkg.com/vue"></script>
30+
<script src="03-ComponentSocks.js"></script>
11531

11632
<!-- livereload -->
11733
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>

‎01-HelloWorld/03-ComponentSocks.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
const comp = Vue.component('product', {
2+
// Props with validation
3+
props: {
4+
premium: {type: Boolean, required: true, default: false}
5+
},
6+
// Without validation
7+
// props: ['premium'],
8+
template: `
9+
<div class="product">
10+
<div class="product-image">
11+
<img :src="image">
12+
</div>
13+
<div class="product-info">
14+
<h1>{{ product }}</h1>
15+
<p v-if="premium">FREE Shipping</p>
16+
<p v-else>Shipping: $4.99</p>
17+
<button v-on:click="addToCart" class="add-to-cart" :class="inventory ? '' : 'disabledButton'">
18+
Add to Cart
19+
</button>
20+
<div v-for="(variant, index) in variants"
21+
:key="variant.id"
22+
class="color-box"
23+
:style="{backgroundColor: variant.color}"
24+
@mouseover="selectedVariantIndex = index">
25+
</div>
26+
</div>
27+
</div>
28+
`,
29+
data() {
30+
// Return a fresh object reference each time
31+
return {
32+
product: 'Socks',
33+
selectedVariantIndex: 0,
34+
variants: [
35+
{id: 1, color: 'green'},
36+
{id: 2, color: 'blue'}
37+
],
38+
inventory: 3,
39+
};
40+
},
41+
methods: {
42+
addToCart() {
43+
this.inventory--;
44+
const selectedVariant = this.variants[this.selectedVariantIndex];
45+
this.$emit('add-to-cart', {product: this.product, variant: selectedVariant});
46+
}
47+
},
48+
computed: {
49+
image() {
50+
const color = this.variants[this.selectedVariantIndex].color;
51+
return `./assets/socks-${color}.jpg`;
52+
}
53+
}
54+
});
55+
56+
57+
58+
const app = new Vue({
59+
el: '#app',
60+
data: {
61+
premium: true,
62+
cart: []
63+
},
64+
methods: {
65+
updateCart(product) {
66+
console.log('Adding to cart:', product);
67+
this.cart.push(product);
68+
}
69+
}
70+
});

‎01-HelloWorld/04-ReviewableSocks.html‎

Lines changed: 3 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<html>
22
<head>
3-
<script src="https://unpkg.com/vue"></script>
43
<link href="./assets/style.css" rel="stylesheet">
54
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet">
65
<title>Reviewable Socks</title>
@@ -17,97 +16,15 @@
1716
</div>
1817
</div>
1918

20-
<a href="02-ComputedSocks.html" class="prev">
19+
<a href="03-ComponentSocks.html" class="prev">
2120
<i class="fas fa-arrow-left"></i> moving back
2221
</a>
2322
</body>
2423
</html>
2524

2625

27-
<script type="text/javascript">
28-
const comp = Vue.component('product', {
29-
// Props with validation
30-
props: {
31-
premium: {type: Boolean, required: true, default: false}
32-
},
33-
// Without validation
34-
// props: ['premium'],
35-
template: `
36-
<div class="product">
37-
<div class="product-image">
38-
<img :src="image">
39-
</div>
40-
41-
<div class="product-info">
42-
<h1>{{ product }}</h1>
43-
44-
<div>
45-
<p v-if="inventory > 10">In Stock</p>
46-
<p v-else-if="inventory">Almost sold out</p>
47-
<p v-else>Out of Stock</p>
48-
</div>
49-
50-
<p v-if="premium">FREE Shipping</p>
51-
<p v-else>Shipping: $4.99</p>
52-
53-
<button
54-
v-on:click="addToCart"
55-
:disabled="!inventory"
56-
:class="inventory ? '' : 'disabledButton'"
57-
>
58-
Add to Cart
59-
</button>
60-
61-
<div v-for="(variant, index) in variants"
62-
:key="variant.id"
63-
class="color-box"
64-
:style="{backgroundColor: variant.color}"
65-
@mouseover="selectedVariantIndex = index">
66-
</div>
67-
</div>
68-
</div>
69-
`,
70-
data() {
71-
// Return a fresh object reference each time
72-
return {
73-
product: 'Socks',
74-
selectedVariantIndex: 0,
75-
variants: [
76-
{id: 1, color: 'green'},
77-
{id: 2, color: 'blue'}
78-
],
79-
inventory: 3,
80-
};
81-
},
82-
methods: {
83-
addToCart() {
84-
this.inventory--;
85-
const selectedVariant = this.variants[this.selectedVariantIndex];
86-
this.$emit('add-to-cart', {product: this.product, variant: selectedVariant});
87-
}
88-
},
89-
computed: {
90-
image() {
91-
const color = this.variants[this.selectedVariantIndex].color;
92-
return `./assets/socks-${color}.jpg`;
93-
}
94-
}
95-
})
96-
97-
const app = new Vue({
98-
el: '#app',
99-
data: {
100-
premium: true,
101-
cart: []
102-
},
103-
methods: {
104-
updateCart(product) {
105-
console.log('Adding to cart:', product);
106-
this.cart.push(product);
107-
}
108-
}
109-
});
110-
</script>
26+
<script src="https://unpkg.com/vue"></script>
27+
<script src="04-ReviewableSocks.js"></script>
11128

11229

11330
<!-- livereload -->

0 commit comments

Comments
 (0)