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

Compare commits

base: b:L9-start
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:L10-start
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

7 Commits
L9-start ... L10-start

Author SHA1 Message Date
bwbl
3251d861fc WIP L10.4 2026-01-13 16:27:46 +01:00
Andy
6253c36939 update cdn link 2021-04-09 16:03:50 -04:00
Andy
3cfcc7cbdd L10 starting 2020-07-29 19:18:33 -04:00
Adam Jahr
1a8cd4892b L10 starting 2020-07-21 01:16:26 -04:00
Adam Jahr
8c51141d99 L10 starting code 2020-07-21 00:50:20 -04:00
Adam Jahr
e5a0b6e460 L9 solution 2020-07-21 00:48:15 -04:00
Adam Jahr
40c519c162 L10 ending code 2020-07-08 22:59:10 -04:00
4 changed files with 56 additions and 57 deletions
Show Stats Expand all files Collapse all files

15
components/ProductDetails.js
View File

@ -1,15 +0,0 @@
app.component("product-details", {
props: {
details: [],
},
template:
/*html*/
`
<div class="product-details">
<p>Details:</p>
<div v-for="(detail, index) in details">
{{ detail }}
</div>
</div>
`,
});

78
components/ProductDisplay.js
View File

@ -8,33 +8,40 @@ app.component("product-display", {
template: template:
/*html*/ /*html*/
`<div class="product-display"> `<div class="product-display">
<div class="product-container"> <div class="product-container">
<div class="product-image"> <div class="product-image">
<img v-bind:src="image"> <img v-bind:src="image">
</div> </div>
<div class="product-info"> <div class="product-info">
<h1>{{ title }}</h1> <h1>{{ title }}</h1>
<p v-if="inStock">In Stock</p>
<p v-else>Out of Stock</p> <p v-if="inStock">In Stock</p>
<div <p v-else>Out of Stock</p>
v-for="(variant, index) in variants"
:key="variant.id" <p>Shipping: {{ shipping }}</p>
@mouseover="updateVariant(index)"
class="color-circle" <ul>
:style="{ backgroundColor: variant.color }"> <li v-for="detail in details">{{ detail }}</li>
</div> </ul>
<p>Shipping: {{ shipping }}</p>
<product-details :details="details"></product-details> <div
<button v-for="(variant, index) in variants"
class="button" :key="variant.id"
:class="{ disabledButton: !inStock }" @mouseover="updateVariant(index)"
:disabled="!inStock" class="color-circle"
v-on:click="addToCart"> :style="{ backgroundColor: variant.color }">
Add to Cart </div>
</button>
</div> <button
</div> class="button"
</div>`, :class="{ disabledButton: !inStock }"
:disabled="!inStock"
v-on:click="addToCart">
Add to Cart
</button>
</div>
</div>
</div>`,
data() { data() {
return { return {
product: "Socks", product: "Socks",
@ -59,6 +66,7 @@ app.component("product-display", {
}, },
methods: { methods: {
addToCart() { addToCart() {
this.$emit("add-to-cart", this.variants[this.selectedVariant].id);
this.cart += 1; this.cart += 1;
}, },
updateVariant(index) { updateVariant(index) {
@ -66,13 +74,6 @@ app.component("product-display", {
}, },
}, },
computed: { computed: {
shipping() {
if (this.premium) {
return "Free";
} else {
return 2.99;
}
},
title() { title() {
return this.brand + " " + this.product; return this.brand + " " + this.product;
}, },
@ -80,8 +81,13 @@ app.component("product-display", {
return this.variants[this.selectedVariant].image; return this.variants[this.selectedVariant].image;
}, },
inStock() { inStock() {
return; return this.variants[this.selectedVariant].quantity;
this.variants[this.selectedVariant].quantity; },
shipping() {
if (this.premium) {
return "Free";
}
return 2.99;
}, },
}, },
}); });

12
index.html
View File

@ -7,19 +7,23 @@
<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.11/dist/vue.global.js"></script> <script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
<!-- Import Components -->
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<div class="nav-bar"></div> <div class="nav-bar"></div>
<div class="cart">Cart({{ cart }})</div>
<product-display :premium="premium"></product-display> <div class="cart">Cart({{ cart.length }})</div>
<product-display
:premium="premium"
@add-to-cart="updateCart"
></product-display>
</div> </div>
<!-- Import App --> <!-- Import App -->
<script src="./main.js"></script> <script src="./main.js"></script>
<!-- Import Components -->
<script src="./components/ProductDisplay.js"></script> <script src="./components/ProductDisplay.js"></script>
<script src="./components/ProductDetails.js"></script>
<!-- Mount App --> <!-- Mount App -->
<script> <script>

8
main.js
View File

@ -1,9 +1,13 @@
const app = Vue.createApp({ const app = Vue.createApp({
data() { data() {
return { return {
cart: 0, cart: [],
premium: true, premium: true,
}; };
}, },
methods: {}, methods: {
updateCart(id) {
this.cart.push(id);
},
},
}); });