From e9d95dd989abf2e989f51937c84f04f5a3d2f2c8 Mon Sep 17 00:00:00 2001
From: Shaun <shaun@thenetninja.co.uk>
Date: Tue, 22 Sep 2020 13:06:06 +0100
Subject: [PATCH] lesson-14

---
 app.js     |  7 +++----
 index.html | 35 +++++++++++++++++++++++------------
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/app.js b/app.js
index 334ecd308..10d708240 100644
--- 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
index 76a488560..e1c57ef3d 100644
--- a/index.html
+++ b/index.html
@@ -5,13 +5,28 @@
   <title>Learning Vue</title>
   <script src="https://unpkg.com/vue@3.0.0"></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>
@@ -19,13 +34,9 @@
   <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>