commit | author | age
|
f31b9e
|
1 |
<template> |
498b47
|
2 |
<section> |
CM |
3 |
<header> |
|
4 |
<h1>My friends</h1> |
|
5 |
</header> |
2759e2
|
6 |
<new-friend @add-contact="addContact"></new-friend> |
498b47
|
7 |
<ul> |
2759e2
|
8 |
<friend-contact v-for="friend in friends" |
CM |
9 |
:key="friend.id" |
|
10 |
:id="friend.id" |
|
11 |
:name="friend.name" |
|
12 |
:phone-number="friend.phone" |
|
13 |
:email-address="friend.email" |
|
14 |
:is-favorite="friend.isFavorite" |
1630a9
|
15 |
@toggle-favorite="toggleFavoriteStatus" |
CM |
16 |
@delete="deleteContact" |
|
17 |
> |
|
18 |
</friend-contact> |
498b47
|
19 |
</ul> |
CM |
20 |
</section> |
f31b9e
|
21 |
</template> |
CM |
22 |
|
|
23 |
<script> |
|
24 |
export default { |
498b47
|
25 |
data() { |
CM |
26 |
return { |
|
27 |
friends: [ |
|
28 |
{ |
|
29 |
id: "manuel", |
|
30 |
name: "Manuel Lorenz", |
|
31 |
phone: "01234 5678 991", |
|
32 |
email: "manuel@localhost.com", |
8480d4
|
33 |
isFavorite: true, |
498b47
|
34 |
}, |
CM |
35 |
{ |
|
36 |
id: "julie", |
|
37 |
name: "Julie Jones", |
|
38 |
phone: "09876 543 221", |
|
39 |
email: "julie@localhost.com", |
2759e2
|
40 |
isFavorite: true, |
498b47
|
41 |
}, |
CM |
42 |
], |
|
43 |
} |
|
44 |
}, |
2759e2
|
45 |
watch: { |
CM |
46 |
|
|
47 |
}, |
|
48 |
methods: { |
|
49 |
toggleFavoriteStatus(friendId) { |
|
50 |
const found = this.friends.find( |
8480d4
|
51 |
(friend) => friend.id === friendId |
CM |
52 |
); |
|
53 |
found.isFavorite = !found.isFavorite; |
2759e2
|
54 |
}, |
CM |
55 |
|
|
56 |
addContact(name, phone, email) { |
|
57 |
const newFriendContact={ |
|
58 |
id: new Date().toISOString + name, |
|
59 |
name: name, |
|
60 |
phone: phone, |
|
61 |
email:email, |
|
62 |
}; |
|
63 |
|
|
64 |
this.friends.push(newFriendContact); |
1630a9
|
65 |
}, |
CM |
66 |
deleteContact (friendId){ |
|
67 |
this.friends = this.friends.filter( |
|
68 |
(friend) => friend.id != friendId |
|
69 |
); |
|
70 |
}, |
2759e2
|
71 |
|
8480d4
|
72 |
} |
f31b9e
|
73 |
}; |
f54162
|
74 |
</script> |
CM |
75 |
|
|
76 |
<style> |
498b47
|
77 |
@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap'); |
f54162
|
78 |
|
CM |
79 |
* { |
|
80 |
box-sizing: border-box; |
|
81 |
} |
|
82 |
|
|
83 |
html { |
|
84 |
font-family: 'Jost', sans-serif; |
|
85 |
} |
|
86 |
|
|
87 |
body { |
|
88 |
margin: 0; |
|
89 |
} |
|
90 |
|
|
91 |
header { |
|
92 |
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); |
|
93 |
margin: 3rem auto; |
|
94 |
border-radius: 10px; |
|
95 |
padding: 1rem; |
|
96 |
background-color: #58004d; |
|
97 |
color: white; |
|
98 |
text-align: center; |
|
99 |
width: 90%; |
|
100 |
max-width: 40rem; |
|
101 |
} |
|
102 |
|
|
103 |
#app ul { |
|
104 |
margin: 0; |
|
105 |
padding: 0; |
|
106 |
list-style: none; |
|
107 |
} |
|
108 |
|
2759e2
|
109 |
#app li, |
CM |
110 |
#app form { |
f54162
|
111 |
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); |
CM |
112 |
margin: 1rem auto; |
|
113 |
border-radius: 10px; |
|
114 |
padding: 1rem; |
|
115 |
text-align: center; |
|
116 |
width: 90%; |
|
117 |
max-width: 40rem; |
|
118 |
} |
|
119 |
|
|
120 |
#app h2 { |
|
121 |
font-size: 2rem; |
|
122 |
border-bottom: 4px solid #ccc; |
|
123 |
color: #58004d; |
|
124 |
margin: 0 0 1rem 0; |
|
125 |
} |
|
126 |
|
|
127 |
#app button { |
|
128 |
font: inherit; |
|
129 |
cursor: pointer; |
|
130 |
border: 1px solid #ff0077; |
|
131 |
background-color: #ff0077; |
|
132 |
color: white; |
|
133 |
padding: 0.05rem 1rem; |
|
134 |
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26); |
|
135 |
} |
|
136 |
|
|
137 |
#app button:hover, |
|
138 |
#app button:active { |
|
139 |
background-color: #ec3169; |
|
140 |
border-color: #ec3169; |
|
141 |
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26); |
|
142 |
} |
2759e2
|
143 |
|
CM |
144 |
#app input { |
|
145 |
font: inherit; |
|
146 |
padding: 0.15rem; |
|
147 |
} |
|
148 |
|
|
149 |
#app label { |
|
150 |
font-weight: bold; |
|
151 |
margin-right: 1rem; |
|
152 |
width: 7rem; |
|
153 |
display: inline-block; |
|
154 |
} |
|
155 |
|
|
156 |
#app form div { |
|
157 |
margin: 1rem 0; |
|
158 |
} |
f54162
|
159 |
</style> |