L3 start

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "vue": "^3.0.0-0",
     "vue-router": "^4.0.0-0",

src/App.vue

@@ -1,8 +1,8 @@
 <template>
   <div id="app">
     <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+      <router-link :to="{ name: 'EventList' }">Events</router-link> |
+      <router-link :to="{ name: 'About' }">About</router-link>
     </div>
     <router-view />
   </div>
@@ -29,4 +29,8 @@
 #nav a.router-link-exact-active {
   color: #42b983;
 }
+
+h4 {
+  font-size: 20px;
+}
 </style>

src/components/EventCard.vue

@@ -0,0 +1,43 @@
+<template>
+  <router-link
+    class="event-link"
+    :to="{ name: 'EventDetails', params: { id: event.id } }"
+  >
+    <div class="event-card">
+      <span>@ {{ event.time }} on {{ event.date }}</span>
+      <h4>{{ event.title }}</h4>
+    </div>
+  </router-link>
+</template>
+
+<script>
+export default {
+  name: 'EventCard',
+  props: {
+    event: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.event-card {
+  padding: 20px;
+  width: 250px;
+  cursor: pointer;
+  border: 1px solid #39495c;
+  margin-bottom: 18px;
+}
+
+.event-card:hover {
+  transform: scale(1.01);
+  box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);
+}
+
+.event-link {
+  color: #2c3e50;
+  text-decoration: none;
+}
+</style>

src/main.js

@@ -1,9 +1,9 @@
-import { createApp } from "vue";
-import App from "./App.vue";
-import router from "./router";
-import store from "./store";
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
 
 createApp(App)
   .use(store)
   .use(router)
-  .mount("#app");
+  .mount('#app')

src/router/index.js

@@ -1,26 +1,30 @@
-import { createRouter, createWebHistory } from "vue-router";
-import Home from "../views/Home.vue";
+import { createRouter, createWebHistory } from 'vue-router'
+import EventList from '@/views/EventList.vue'
+import About from '@/views/About.vue'
+import EventDetails from '@/views/EventDetails.vue'
 
 const routes = [
   {
-    path: "/",
-    name: "Home",
-    component: Home
+    path: '/',
+    name: 'EventList',
+    component: EventList
   },
   {
-    path: "/about",
-    name: "About",
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () =>
-      import(/* webpackChunkName: "about" */ "../views/About.vue")
+    path: '/event/:id',
+    name: 'EventDetails',
+    props: true,
+    component: EventDetails
+  },
+  {
+    path: '/about',
+    name: 'About',
+    component: About
   }
-];
+]
 
 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
   routes
-});
+})
 
-export default router;
+export default router

src/services/EventService.js

@@ -0,0 +1,19 @@
+import axios from 'axios'
+
+const apiClient = axios.create({
+  baseURL: 'https://my-json-server.typicode.com/Code-Pop/Real-World_Vue-3',
+  withCredentials: false,
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json'
+  }
+})
+
+export default {
+  getEvents() {
+    return apiClient.get('/events')
+  },
+  getEvent(id) {
+    return apiClient.get('/events/' + id)
+  }
+}

src/views/About.vue

@@ -1,5 +1,5 @@
 <template>
   <div class="about">
-    <h1>This is an about page</h1>
+    <h1>A site for events to better the world</h1>
   </div>
 </template>

src/views/EventDetails.vue

@@ -0,0 +1,29 @@
+<template>
+  <div v-if="event">
+    <h1>{{ event.title }}</h1>
+    <p>{{ event.time }} on {{ event.date }} @ {{ event.location }}</p>
+    <p>{{ event.description }}</p>
+  </div>
+</template>
+
+<script>
+import EventService from '@/services/EventService.js'
+
+export default {
+  props: ['id'],
+  data() {
+    return {
+      event: null
+    }
+  },
+  created() {
+    EventService.getEvent(this.id)
+      .then(response => {
+        this.event = response.data
+      })
+      .catch(error => {
+        console.log(error)
+      })
+  }
+}
+</script>

src/views/EventList.vue

@@ -0,0 +1,41 @@
+<template>
+  <h1>Events For Good</h1>
+  <div class="events">
+    <EventCard v-for="event in events" :key="event.id" :event="event" />
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import EventCard from '@/components/EventCard.vue'
+import EventService from '@/services/EventService.js'
+
+export default {
+  name: 'EventList',
+  components: {
+    EventCard
+  },
+  data() {
+    return {
+      events: null
+    }
+  },
+  created() {
+    EventService.getEvents()
+      .then(response => {
+        this.events = response.data
+      })
+      .catch(error => {
+        console.log(error)
+      })
+  }
+}
+</script>
+
+<style scoped>
+.events {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+</style>