80 lines
1.6 KiB
HTML
80 lines
1.6 KiB
HTML
<!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.11/dist/vue.global.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div class="nav-bar"></div>
|
|
|
|
<div class="cart">Cart({{ cart }})</div>
|
|
|
|
<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
|
|
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>
|
|
|
|
<!-- 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>
|