Vuemastery Session 3

This commit is contained in:
nglettig 2019-01-16 10:12:01 +01:00
parent 987bb17ef3
commit 08df653fdc
3 changed files with 120 additions and 0 deletions

75
test.css Normal file
View file

@ -0,0 +1,75 @@
body {
font-family: tahoma;
color: #282828;
margin: 0px;
}
.nav-bar {
background: linear-gradient(-90deg, #84CF6A, #16C0B0);
height: 60px;
margin-bottom: 15px;
}
.product {
display: flex;
}
img {
border: 1px solid #d8d8d8;
width: 70%;
margin: 40px;
box-shadow: 0px .5px 1px #d8d8d8;
}
.product-image {
flex-basis: 700px;
}
.product-info {
margin-top: 10px;
flex-basis: 500px;
}
.color-box {
width: 40px;
height: 40px;
margin-top: 5px;
}
.cart {
margin-right: 25px;
float: right;
border: 1px solid #d8d8d8;
padding: 5px 20px;
}
button {
margin-top: 30px;
border: none;
background-color: #1E95EA;
color: white;
height: 40px;
width: 100px;
font-size: 14px;
}
.disabledButton {
background-color: #d8d8d8;
}
.review-form {
width: 30%;
padding: 20px;
border: 1px solid #d8d8d8;
}
input {
width: 100%;
height: 25px;
margin-bottom: 20px;
}
textarea {
width: 100%;
height: 60px;
}

23
test.html Normal file
View file

@ -0,0 +1,23 @@
<div class="nav-bar"></div>
<div id="app">
<div class="product">
<div class="product-image">
<img :src="image" />
</div>
<div class="product-info">
<h1>{{ product }}</h1>
<p v-if="inventory > 50">On Sale</p>
<p v-else-if="inventory<= 10 && inventory > 0">Almost On Sale</p>
<p v-else>On SAle</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>

22
test.js Normal file
View file

@ -0,0 +1,22 @@
//Add an array of sizes to the data and use v-for to display them in a list.
var app = new Vue({
el: '#app',
data: {
product: 'Socks',
image: 'https://dl.dropboxusercontent.com/s/9zccs3f0pimj0wj/vmSocks-green-onWhite.jpg?dl=0',
inStock: true,
details: ['80% cotton', '20% polyester', 'Gender-neutral'],
variants: [
{
variantId: 2234,
variantColor: 'green'
},
{
variantId: 2235,
variantColor: 'blue'
}
]
}
})