Updates

Author: Raphael Ugwu

package-lock.json

@@ -9,7 +9,8 @@
   },
   "dependencies": {
     "core-js": "^2.6.5",
-    "vue": "^2.6.10"
+    "vue": "^2.6.10",
+    "vue-material": "^1.0.0-beta-11"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.10.0",

package.json

@@ -1,28 +1,33 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div>
+    <book></book>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
+import LoadingState from "./components/LoadingState"
+import ErrorState from "./components/ErrorState"
+const Book = import("./components/Book")
 export default {
-  name: 'app',
   components: {
-    HelloWorld
+    Book: () => ({
+      component: Book,
+      loading: LoadingState,
+      error: ErrorState,
+      delay: 100,
+      timeout: 2000
+    })
   }
-}
+};
 </script>
 
 <style>
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
   margin-top: 60px;
 }
-</style>
+</style>

src/App.vue

@@ -0,0 +1,53 @@
+<template>
+ <div id="app">
+  <md-card md-with-hover v-for="(book, key) in books" v-bind:key="key">
+      <md-ripple>
+        <md-card-header>
+          <div class="md-title">{{book.name}}</div>
+          <div class="md-subhead">{{book.genre}}</div>
+        </md-card-header>
+
+        <md-card-actions>
+          <md-button type="primary" @click="addBook(key)">Donate to improve {{book.genre}}</md-button>
+        </md-card-actions>
+      </md-ripple>
+    </md-card>
+
+    <div v-if="show">
+      <md-card-content>
+     <donate v-bind:selectList="selectList"></donate>
+      </md-card-content>
+</div>
+
+    <md-button @click="show = true" id="donate">Donate {{selectList.length}} book(s)</md-button>
+  </div>
+
+  
+</template>
+
+
+
+<script>
+  export default {
+  name: 'RegularButtons',
+  methods: {
+    addBook (key) {
+      if(!this.selectList.includes(key)) {
+        this.selectList.push(key);
+      }
+    }
+  },
+  components: {
+    donate: () => import('./Donate')
+  },
+  data: () => ({
+    books: [
+      { name: 'Using Creatine', genre: 'Workouts' },
+      { name: 'Learn Parkour', genre: 'Sports' },
+      { name: 'Snorkelling', genre: 'Diving' },
+    ],
+    selectList: [],
+    show: false
+  })
+}
+</script>

src/components/Book.vue

@@ -0,0 +1,20 @@
+<template>
+      <div title="Donate Books" key="donate">
+          <p v-for="(x, y) in this.selectList" :key="y">
+          Tip: {{books[Number(x)].name}} is about {{books[Number(x)].genre}}
+          </p>
+      </div>
+</template>
+
+<script>
+export default {
+  props: ['selectList'],
+  data: () => ({
+    books: [
+      { name: 'Using Creatine', genre: 'Workouts' },
+      { name: 'Learn Parkour', genre: 'Sports' },
+      { name: 'Snorkelling', genre: 'Underwater' },
+    ]
+  })
+}
+</script>

src/components/Donate.vue

@@ -0,0 +1,3 @@
+<template>
+  <p>Could not display books. Kindly check your internet conection.</p>
+</template>

src/components/ErrorState.vue

@@ -0,0 +1,3 @@
+<template>
+  <p><em>Loading...</em></p>
+</template>

src/components/HelloWorld.vue

@@ -3,6 +3,12 @@ import App from './App.vue'
 
 Vue.config.productionTip = false
 
+import VueMaterial from 'vue-material'
+import 'vue-material/dist/vue-material.min.css'
+import 'vue-material/dist/theme/default.css'
+
+Vue.use(VueMaterial)
+
 new Vue({
   render: h => h(App),
 }).$mount('#app')