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:025dc924ab65942c5dd0e2b62c2e5242d270055b
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

4 Commits
c3db9998f8 ... 025dc924ab

Author SHA1 Message Date
bwbl
025dc924ab L7 2026-01-13 15:16:00 +01:00
Andy
dbf00bb4a3 update cdn link 2021-04-09 15:54:05 -04:00
Andy
d727eed0c9 L7 starting code 2020-07-29 01:28:44 -04:00
Adam Jahr
094670e2a9 L7 starting code 2020-07-21 00:28:40 -04:00
2 changed files with 103 additions and 68 deletions
Show Stats Expand all files Collapse all files

115
index.html
View File

@ -1,52 +1,79 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue Mastery</title>
<!-- Import Styles -->
<link rel="stylesheet" href="./assets/styles.css" />
<!-- Import Vue.js -->
<script src="https://unpkg.com/vue@3.0.0-beta.12/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<div class="nav-bar"></div>
<head>
<meta charset="UTF-8" />
<title>Vue Mastery</title>
<!-- Import Styles -->
<link rel="stylesheet" href="./assets/styles.css" />
<!-- Import Vue.js -->
<script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<div class="nav-bar"></div>
<div class="cart">Cart({{ cart }})</div>
<div class="cart">Cart({{ cart }})</div>
<div class="product-display">
<div class="product-container">
<div class="product-image">
<!-- solution -->
<img :class="{ 'out-of-stock-img': !inStock }" v-bind:src="image">
<!-- solution -->
</div>
<div class="product-info">
<h1>{{ product }}</h1>
<p v-if="inStock">In Stock</p>
<p v-else>Out of Stock</p>
<ul>
<li v-for="detail in details">{{ detail }}</li>
</ul>
<div class="product-display">
<div class="product-container">
<div class="product-image">
<img
:class="{ 'out-of-stock-img': !inStock }"
v-bind:src="image"
/>
</div>
<div class="product-info">
<h1>{{ product }}</h1>
<p v-if="inStock">In Stock</p>
<p v-else>Out of Stock</p>
<ul>
<li v-for="detail in details">{{ detail }}</li>
</ul>
<div
class="color-circle"
v-for="variant in variants"
:key="variant.id"
@mouseover="updateImage(variant.image)"
: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
v-for="variant in variants"
:key="variant.id"
@click="updateImage(variant.image)"
class="color-circle"
:style="{ backgroundColor: variant.color }"
></div>
<button
:class="[inStock ? '' : 'disabledButton']"
:disabled="!inStock"
class="button"
@click="addToCart"
>
Add to Cart
</button>
</div>
</div>
</div>
</div>
<!-- Import App -->
<script src="./main.js"></script>
<!-- Import App -->
<script src="./main.js"></script>
<!-- Mount App -->
<script>
const mountedApp = app.mount('#app')
</script>
</body>
<!-- Mount App -->
<script>
const mountedApp = app.mount("#app");
</script>
</body>
</html>
<style>
.color-circle {
width: 50px;
height: 50px;
margin-top: 8px;
border: 2px solid #d8d8d8;
border-radius: 50%;
}
.color-circle:hover {
cursor: pointer;
}
.disabledButton {
background-color: #d8d8d8;
cursor: not-allowed;
}
</style>

54
main.js
View File

@ -1,24 +1,32 @@
const app = Vue.createApp({
data() {
return {
cart:0,
product: 'Socks',
brand: 'Vue Mastery',
image: './assets/images/socks_blue.jpg',
inStock: false,
details: ['50% cotton', '30% wool', '20% polyester'],
variants: [
{ 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
}
}
})
data() {
return {
cart: 0,
product: "Socks",
brand: "Vue Mastery",
image: "./assets/images/socks_blue.jpg",
inStock: false,
details: ["50% cotton", "30% wool", "20% polyester"],
variants: [
{
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;
},
},
});