Skip to content

Commit 968668b

Browse files
LaoujinLaoujin
committed
some styling. initial ex2
1 parent 5519b4d commit 968668b

File tree

3 files changed

+204
-101
lines changed

3 files changed

+204
-101
lines changed

‎01-HelloWorld/01-Socks.html‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,10 @@ <h1>{{ product }}</h1>
5858
</div>
5959
</div>
6060
</div>
61+
62+
<a href="02-FancierSocks.html">
63+
moving on <i class="fas fa-arrow-right"></i>
64+
</a>
6165
</body>
6266
</html>
6367

@@ -85,12 +89,6 @@ <h1>{{ product }}</h1>
8589
console.log('Vue object with data and methods', this);
8690
this.image = `./assets/socks-${color}.jpg`;
8791
}
88-
},
89-
computed: {
90-
title() {
91-
// Return values are cached
92-
return this.product.toUpperCase();
93-
}
9492
}
9593
});
9694
console.log('Modify data directly from the console with `app.product = "Shoes";`');

‎01-HelloWorld/02-FancierSocks.html‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<html>
2+
<head>
3+
<script src="https://unpkg.com/vue"></script>
4+
<link href="./assets/style.css" rel="stylesheet" type="text/css">
5+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
6+
</head>
7+
<body>
8+
<div id="app">
9+
<div class="nav-bar"></div>
10+
<div class="product">
11+
<div class="product-image">
12+
<img :src="image">
13+
</div>
14+
15+
<div class="product-info">
16+
<!-- Computed Properties -->
17+
<h1>{{ title }}</h1>
18+
19+
20+
<!-- Conditionals -->
21+
<div>
22+
<!-- Falsey will not include in DOM -->
23+
<p v-if="inventory > 10">In Stock</p>
24+
<p v-else-if="inventory">Almost sold out</p>
25+
<p v-else>Out of Stock</p>
26+
27+
<!-- Render with display: none -->
28+
<p v-show="inventory < 0">Wuuk?</p>
29+
</div>
30+
31+
32+
<!-- Events -->
33+
<button
34+
v-on:click="cart++; inventory--"
35+
:disabled="!inventory"
36+
:class="{disabledButton: inventory ? false : true}"
37+
>
38+
<!-- Method: addToCart -->
39+
Add to Cart
40+
</button>
41+
42+
<div class="cart">
43+
{{cart}}
44+
<i class="fas fa-shopping-cart"></i>
45+
</div>
46+
47+
48+
<!-- Loops -->
49+
<div v-for="variant in variants"
50+
:key="variant.id"
51+
class="color-box"
52+
:style="{backgroundColor: variant.color}"
53+
@mouseover="setImage(variant.color)">
54+
</div>
55+
</div>
56+
</div>
57+
</div>
58+
</body>
59+
</html>
60+
61+
62+
<script type="text/javascript">
63+
const app = new Vue({
64+
el: '#app',
65+
data: {
66+
product: 'Socks',
67+
image: './assets/socks-green.jpg',
68+
imageTitle: 'Green Socks',
69+
variants: [
70+
{id: 1, color: 'green'},
71+
{id: 2, color: 'blue'}
72+
],
73+
inventory: 3,
74+
cart: 0
75+
},
76+
methods: {
77+
addToCart() {
78+
this.cart++;
79+
this.inventory--;
80+
},
81+
setImage(color) {
82+
console.log('Vue object with data and methods', this);
83+
this.image = `./assets/socks-${color}.jpg`;
84+
}
85+
},
86+
computed: {
87+
title() {
88+
// Return values are cached
89+
return this.product.toUpperCase();
90+
}
91+
}
92+
});
93+
console.log('Modify data directly from the console with `app.product = "Shoes";`');
94+
</script>
95+
96+
97+
<!-- livereload -->
98+
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>

‎01-HelloWorld/assets/style.css‎

Lines changed: 102 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,103 @@
11
body {
2-
font-family: tahoma;
3-
color:#282828;
4-
margin: 0px;
5-
}
6-
7-
.nav-bar {
8-
background: linear-gradient(-90deg, #84CF6A, #16C0B0);
9-
height: 60px;
10-
}
11-
12-
.product {
13-
display: flex;
14-
flex-flow: wrap;
15-
padding: 0rem 1rem;
16-
}
17-
18-
img {
19-
border: 1px solid #d8d8d8;
20-
width: 70%;
21-
margin: 40px;
22-
box-shadow: 0px .5px 1px #d8d8d8;
23-
}
24-
25-
.product-image {
26-
width: 80%;
27-
}
28-
29-
.product-image,
30-
.product-info {
31-
margin-top: 10px;
32-
width: 50%;
33-
}
34-
35-
.color-box {
36-
width: 40px;
37-
height: 40px;
38-
margin-top: 5px;
39-
}
40-
41-
.active {
42-
border: 2px solid black;
43-
}
44-
45-
.cart {
46-
position: absolute;
47-
border: 1px solid #d8d8d8;
48-
padding: 11px 15px;
49-
top: 8px;
50-
right: 13px;
51-
color: royalblue;
52-
background-color: antiquewhite;
53-
}
54-
55-
button {
56-
margin-top: -95px;
57-
float: right;
58-
border: none;
59-
background-color: #1E95EA;
60-
color: white;
61-
height: 40px;
62-
width: 100px;
63-
font-size: 14px;
64-
}
65-
66-
.disabledButton {
67-
background-color: #d8d8d8;
68-
}
69-
70-
.review-form {
71-
width: 400px;
72-
padding: 20px;
73-
margin: 40px;
74-
border: 1px solid #d8d8d8;
75-
}
76-
77-
input {
78-
width: 100%;
79-
height: 25px;
80-
margin-bottom: 20px;
81-
}
82-
83-
textarea {
84-
width: 100%;
85-
height: 60px;
86-
}
87-
88-
.tab {
89-
margin-left: 20px;
90-
cursor: pointer;
91-
}
92-
93-
.activeTab {
94-
color: #16C0B0;
95-
text-decoration: underline;
96-
}
2+
font-family: tahoma;
3+
color:#282828;
4+
margin: 0px;
5+
}
6+
7+
.nav-bar {
8+
background: linear-gradient(-90deg, #84CF6A, #16C0B0);
9+
height: 60px;
10+
}
11+
12+
.product {
13+
display: flex;
14+
flex-flow: wrap;
15+
padding: 0rem 1rem;
16+
}
17+
18+
img {
19+
border: 1px solid #d8d8d8;
20+
width: 70%;
21+
margin: 40px;
22+
box-shadow: 0px .5px 1px #d8d8d8;
23+
}
24+
25+
.product-image {
26+
width: 80%;
27+
}
28+
29+
.product-image,
30+
.product-info {
31+
margin-top: 10px;
32+
width: 50%;
33+
}
34+
35+
.color-box {
36+
width: 40px;
37+
height: 40px;
38+
margin-top: 5px;
39+
}
40+
41+
.active {
42+
border: 2px solid black;
43+
}
44+
45+
.cart {
46+
position: absolute;
47+
border: 1px solid #d8d8d8;
48+
padding: 11px 15px;
49+
top: 8px;
50+
right: 13px;
51+
color: royalblue;
52+
background-color: antiquewhite;
53+
}
54+
55+
button {
56+
margin-top: -95px;
57+
float: right;
58+
border: none;
59+
background-color: #1E95EA;
60+
color: white;
61+
height: 40px;
62+
width: 100px;
63+
font-size: 14px;
64+
}
65+
66+
.disabledButton {
67+
background-color: #d8d8d8;
68+
}
69+
70+
.review-form {
71+
width: 400px;
72+
padding: 20px;
73+
margin: 40px;
74+
border: 1px solid #d8d8d8;
75+
}
76+
77+
input {
78+
width: 100%;
79+
height: 25px;
80+
margin-bottom: 20px;
81+
}
82+
83+
textarea {
84+
width: 100%;
85+
height: 60px;
86+
}
87+
88+
.tab {
89+
margin-left: 20px;
90+
cursor: pointer;
91+
}
92+
93+
.activeTab {
94+
color: #16C0B0;
95+
text-decoration: underline;
96+
}
97+
98+
a {
99+
text-decoration: none;
100+
color: black;
101+
float: right;
102+
margin-right: 12px;
103+
}

0 commit comments

Comments
 (0)