b/intro-to-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: b:c3db9998f89e92700cb0dff0eedc01db9149f60d
Branches Tags
b:L10-start
b:L9-start
b:L8-start
b:L7-start
b:L6-start
b:L5-start
b:L4-start
b:L3-start
b:L2-start
b:list
b:master
...
compare: b:c18a7e048633ed539c03f7f8212fe51d16992492
Branches Tags
b:L10-start
b:L9-start
b:L8-start
b:L7-start
b:L6-start
b:L5-start
b:L4-start
b:L3-start
b:L2-start
b:list
b:master

3 Commits
c3db9998f8 ... c18a7e0486

Author SHA1 Message Date
bwbl
c18a7e0486 L8 2026-01-13 15:38:59 +01:00
Andy
df8fcd0ab6 update cdn link 2021-04-09 15:55:55 -04:00
Adam Jahr
287cbd6367 L8 starting code 2020-07-21 00:37:08 -04:00
2 changed files with 107 additions and 68 deletions
Show Stats Expand all files Collapse all files

31
index.html
View File

@ -6,7 +6,7 @@
<!-- Import Styles --> <!-- Import Styles -->
<link rel="stylesheet" href="./assets/styles.css" /> <link rel="stylesheet" href="./assets/styles.css" />
<!-- Import Vue.js --> <!-- Import Vue.js -->
<script src="https://unpkg.com/vue@3.0.0-beta.12/dist/vue.global.js"></script> <script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
@ -17,12 +17,13 @@
<div class="product-display"> <div class="product-display">
<div class="product-container"> <div class="product-container">
<div class="product-image"> <div class="product-image">
<!-- solution --> <img v-bind:src="image" />
<img :class="{ 'out-of-stock-img': !inStock }" v-bind:src="image">
<!-- solution -->
</div> </div>
<div class="product-info"> <div class="product-info">
<h1>{{ product }}</h1> <h1>{{ title }}</h1>
<p v-if="variants[selectedVariant].onSale">
{{ sale }}
</p>
<p v-if="inStock">In Stock</p> <p v-if="inStock">In Stock</p>
<p v-else>Out of Stock</p> <p v-else>Out of Stock</p>
<ul> <ul>
@ -30,12 +31,20 @@
</ul> </ul>
<div <div
class="color-circle" v-for="(variant, index) in variants"
v-for="variant in variants"
:key="variant.id" :key="variant.id"
@mouseover="updateImage(variant.image)" @mouseover="updateVariant(index)"
:style="{ backgroundColor: variant.color }"></div> class="color-circle"
<button class="button" :class="{ disabledButton: !inStock }" :disabled="!inStock" v-on:click="addToCart">Add to Cart</button> :style="{ backgroundColor: variant.color }"
></div>
<button
class="button"
:class="{ disabledButton: !inStock }"
:disabled="!inStock"
v-on:click="addToCart"
>
Add to Cart
</button>
</div> </div>
</div> </div>
</div> </div>
@ -46,7 +55,7 @@
<!-- Mount App --> <!-- Mount App -->
<script> <script>
const mountedApp = app.mount('#app') const mountedApp = app.mount("#app");
</script> </script>
</body> </body>
</html> </html>

58
main.js
View File

@ -2,23 +2,53 @@ const app = Vue.createApp({
data() { data() {
return { return {
cart: 0, cart: 0,
product: 'Socks', product: "Socks",
brand: 'Vue Mastery', brand: "Vue Mastery",
image: './assets/images/socks_blue.jpg', //image: "./assets/images/socks_blue.jpg",
inStock: false, //inStock: false,
details: ['50% cotton', '30% wool', '20% polyester'], selectedVariant: 0,
details: ["50% cotton", "30% wool", "20% polyester"],
variants: [ 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,
onSale: true,
},
{
id: 2235,
color: "blue",
image: "./assets/images/socks_blue.jpg",
quantity: 0,
onSale: false,
},
],
};
}, },
methods: { methods: {
addToCart() { addToCart() {
this.cart += 1 this.cart += 1;
}, },
updateImage(variantImage) { updateImage(variantImage) {
this.image = 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;
},
sale() {
return this.brand + " " + this.product + " is on sale";
},
},
});