| 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> |
