lesson-14

iamshaunjp · Sep 22, 2020 · e9d95dd · e9d95dd · Brooks990 · Sep 15, 2023
1 parent e30e48c
commit e9d95dd
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 16 deletions.
diff --git a/app.js b/app.js
@@ -1,12 +1,11 @@
 const app = Vue.createApp({
   data() {
     return {
-      url: 'https://www.thenetninja.co.uk',
       showBooks: true,
       books: [
-        { title: 'name of the wind', author: 'patrick rothfuss', img: 'assets/1.jpg' },
-        { title: 'the way of kings', author: 'brandon sanderson', img: 'assets/2.jpg' },
-        { title: 'the final empire', author: 'brandon sanderson', img: 'assets/3.jpg' },
+        { title: 'name of the wind', author: 'patrick rothfuss', img: 'assets/1.jpg', isFav: true },
+        { title: 'the way of kings', author: 'brandon sanderson', img: 'assets/2.jpg', isFav: false },
+        { title: 'the final empire', author: 'brandon sanderson', img: 'assets/3.jpg', isFav: true },
       ],
     }
   },

diff --git a/index.html b/index.html
@@ -5,27 +5,38 @@
   <title>Learning Vue</title>
   <script src="https://unpkg.com/[email protected]"></script>
   <style>
-    .box {
-      padding: 100px 0;
-      width: 400px;
-      text-align: center;
-      background: #ddd;
-      margin: 20px;
-      display: inline-block;
+    body{
+      background: #eee;
+      max-width: 960px;
+      margin: 20px auto;
+    }
+    p, h3, ul{
+      margin: 0;
+      padding: 0;
+    }
+    li{
+      list-style-type: none;
+      background: #fff;
+      margin: 20px auto;
+      padding: 10px 20px;
+      border-radius: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    li.fav{
+      background: #ff9ed2;
+      color: white;
     }
   </style>
 </head>
 <body>
   <h1>Hello, Vue :)</h1>
 
   <div id="app">
-    <!-- attribute binding -->
-    <!-- <a v-bind:href="url">Best website ever!</a> -->
-    <a :href="url">Best website ever!</a>
-
     <div v-if="showBooks">
       <ul>
-        <li v-for="book in books">
+        <li v-for="book in books" :class="{ fav: book.isFav }">
           <img :src="book.img" :alt="book.title">
           <h3>{{ book.title }}</h3>
           <p>{{ book.author }}</p>