Skip to content

Commit 9cc8775

Browse files
LaoujinLaoujin
committed
CLI Socks copy
1 parent 23c4330 commit 9cc8775

File tree

10 files changed

+301
-154
lines changed

10 files changed

+301
-154
lines changed

‎cli-socks/.eslintrc.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ module.exports = {
33
env: {
44
node: true
55
},
6-
extends: ["plugin:vue/essential", "@vue/prettier", "@vue/typescript"],
6+
extends: ["plugin:vue/essential", "@vue/typescript"],
77
rules: {
88
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
99
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"

‎cli-socks/public/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width,initial-scale=1.0">
77
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8-
<title>cli-socks</title>
8+
<title>CLI Socks</title>
9+
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet">
910
</head>
1011
<body>
1112
<noscript>

‎cli-socks/src/App.vue‎

Lines changed: 43 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,56 @@
11
<template>
22
<div id="app">
3-
<div id="nav">
4-
<router-link to="/">Home</router-link> |
5-
<router-link to="/about">About</router-link>
3+
<div class="nav-bar">
4+
<h1>CLI Socks</h1>
5+
6+
<div class="links">
7+
<router-link to="/">Home</router-link> |
8+
<router-link to="/about">About</router-link>
9+
</div>
610
</div>
11+
712
<router-view />
813
</div>
914
</template>
1015

1116
<style lang="scss">
12-
#app {
13-
font-family: "Avenir", Helvetica, Arial, sans-serif;
14-
-webkit-font-smoothing: antialiased;
15-
-moz-osx-font-smoothing: grayscale;
16-
text-align: center;
17-
color: #2c3e50;
17+
body {
18+
font-family: tahoma;
19+
color: #282828;
20+
margin: 0px;
1821
}
19-
#nav {
20-
padding: 30px;
22+
23+
.nav-bar {
24+
background: linear-gradient(-90deg, #84cf6a, #16c0b0);
25+
height: 60px;
26+
27+
h1 {
28+
padding: 5px;
29+
font-family: cursive;
30+
margin-left: 10px;
31+
margin-top: 0;
32+
float: left;
33+
}
34+
35+
.links {
36+
float: right;
37+
margin-top: 20px;
38+
margin-right: 100px;
39+
}
40+
2141
a {
22-
font-weight: bold;
23-
color: #2c3e50;
24-
&.router-link-exact-active {
25-
color: #42b983;
26-
}
42+
text-decoration: none;
43+
color: black;
2744
}
2845
}
46+
47+
.cart {
48+
position: absolute;
49+
border: 1px solid #d8d8d8;
50+
padding: 11px 15px;
51+
top: 8px;
52+
right: 13px;
53+
color: royalblue;
54+
background-color: antiquewhite;
55+
}
2956
</style>

‎cli-socks/src/assets/logo.png‎

-6.69 KB
Binary file not shown.

‎cli-socks/src/assets/socks-blue.jpg‎

676 KB
Loading

‎cli-socks/src/assets/socks-green.jpg‎

762 KB
Loading

‎cli-socks/src/components/HelloWorld.vue‎

Lines changed: 0 additions & 130 deletions
This file was deleted.

‎cli-socks/src/components/Product.vue‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
<template>
2+
<div class="product">
3+
<div class="product-image">
4+
<img :src="require(`@/assets/socks-${imageColor}.jpg`)">
5+
</div>
6+
7+
<div class="product-info">
8+
<h1>
9+
{{ product }}
10+
<!-- eslint-disable-next-line vue/no-unused-vars -->
11+
<i v-for="i in averageReviewScore" class="fa fa-star" :key="i"></i>
12+
</h1>
13+
14+
<div>
15+
<p v-if="inventory > 10">In Stock</p>
16+
<p v-else-if="inventory">Almost sold out</p>
17+
<p v-else>Out of Stock</p>
18+
</div>
19+
20+
<p v-if="premium">FREE Shipping</p>
21+
<p v-else>Shipping: $4.99</p>
22+
23+
<button
24+
@click="addToCart"
25+
:disabled="!inventory"
26+
:class="['add-to-cart', inventory ? '' : 'disabledButton']"
27+
>
28+
Add to Cart
29+
</button>
30+
31+
<div v-for="(variant, index) in variants"
32+
:key="variant.id"
33+
class="color-box"
34+
:class="{active: selectedVariantIndex === index}"
35+
:style="{backgroundColor: variant.color}"
36+
@mouseover="selectedVariantIndex = index"
37+
></div>
38+
39+
<ProductReview @add-review="addReview"></ProductReview>
40+
</div>
41+
</div>
42+
</template>
43+
44+
<script lang="ts">
45+
import { Component, Prop, Vue } from "vue-property-decorator";
46+
import ProductReview from './ProductReview.vue';
47+
48+
@Component({
49+
components: {
50+
ProductReview
51+
}
52+
})
53+
export default class Product extends Vue {
54+
@Prop({default: false}) private premium!: boolean;
55+
56+
product = "Socks";
57+
selectedVariantIndex = 0;
58+
variants = [
59+
{id: 1, color: "green"},
60+
{id: 2, color: "blue"}
61+
];
62+
inventory = 3;
63+
reviews: number[] = [];
64+
65+
get imageColor(): string {
66+
return this.variants[this.selectedVariantIndex].color;
67+
}
68+
69+
get averageReviewScore(): number | null {
70+
if (!this.reviews.length) {
71+
return null;
72+
}
73+
return Math.round(this.reviews.reduce((a, c) => a + c, 0) / this.reviews.length);
74+
}
75+
76+
addToCart() {
77+
console.log('uhoh', this.inventory);
78+
this.inventory--;
79+
const selectedVariant = this.variants[this.selectedVariantIndex];
80+
this.$emit('add-to-cart', {product: this.product, variant: selectedVariant});
81+
}
82+
83+
addReview(review: any) {
84+
this.reviews.push(review.rating);
85+
}
86+
}
87+
</script>
88+
89+
<!-- Add "scoped" attribute to limit CSS to this component only -->
90+
<style scoped lang="scss">
91+
.product {
92+
display: flex;
93+
flex-flow: wrap;
94+
padding: 0rem 1rem;
95+
}
96+
97+
.fa.fa-star {
98+
color: rgb(219, 219, 91);
99+
font-size: 20px;
100+
}
101+
102+
img {
103+
border: 1px solid #d8d8d8;
104+
width: 70%;
105+
margin: 40px;
106+
box-shadow: 0px 0.5px 1px #d8d8d8;
107+
}
108+
109+
.product-image {
110+
width: 80%;
111+
}
112+
113+
.product-image,
114+
.product-info {
115+
margin-top: 10px;
116+
width: 50%;
117+
}
118+
119+
.color-box {
120+
width: 40px;
121+
height: 40px;
122+
margin-top: 5px;
123+
}
124+
125+
.active {
126+
box-sizing: border-box;
127+
border: 2px solid black;
128+
}
129+
130+
button.add-to-cart {
131+
border: none;
132+
background-color: #1E95EA;
133+
color: white;
134+
height: 40px;
135+
width: 100px;
136+
font-size: 14px;
137+
position: absolute;
138+
top: 85px;
139+
right: 13px;
140+
}
141+
142+
.disabledButton {
143+
background-color: #d8d8d8 !important;
144+
}
145+
146+
h3 {
147+
margin-bottom: 6px;
148+
}
149+
</style>

0 commit comments

Comments
 (0)