L3 ending code

Author: atomjar

src/components/EventCard.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="event-card">
+    <span>@{{ event.time }} on {{ event.date }}</span>
+    <h4>{{ event.title }}</h4>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    event: {
+      type: Array,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.event-card {
+  padding: 20px;
+  width: 250px;
+  cursor: pointer;
+  border: 1px solid #39495c;
+  margin-bottom: 18px;
+}
+.event-card h4 {
+  font-size: 20px;
+}
+.event-card:hover {
+  transform: scale(1.01);
+  box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);
+}
+</style>

src/components/HelloWorld.vue

@@ -1,26 +1,26 @@
-import { createRouter, createWebHistory } from "vue-router";
-import Home from "../views/Home.vue";
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from '../views/Home.vue'
 
 const routes = [
   {
-    path: "/",
-    name: "Home",
+    path: '/',
+    name: 'Home',
     component: Home
   },
   {
-    path: "/about",
-    name: "About",
+    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")
+      import(/* webpackChunkName: "about" */ '../views/About.vue')
   }
-];
+]
 
 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
   routes
-});
+})
 
-export default router;
+export default router

src/router/index.js

@@ -1,18 +1,64 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js App" />
+  <div class="events">
+    <EventCard v-for="event in events" :key="event.id" :event="event" />
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue";
+import EventCard from '@/components/EventCard.vue'
 
 export default {
-  name: "Home",
+  name: 'Home',
   components: {
-    HelloWorld
+    EventCard
+  },
+  data() {
+    return {
+      events: [
+        {
+          id: 5928101,
+          category: 'animal welfare',
+          title: 'Cat Adoption Day',
+          description: 'Find your new feline friend at this event.',
+          location: 'Meow Town',
+          date: 'January 28, 2022',
+          time: '12:00',
+          petsAllowed: true,
+          organizer: 'Kat Laydee'
+        },
+        {
+          id: 4582797,
+          category: 'food',
+          title: 'Community Gardening',
+          description: 'Join us as we tend to the community edible plants.',
+          location: 'Flora City',
+          date: 'March 14, 2022',
+          time: '10:00',
+          petsAllowed: true,
+          organizer: 'Fern Pollin'
+        },
+        {
+          id: 8419988,
+          category: 'sustainability',
+          title: 'Beach Cleanup',
+          description: 'Help pick up trash along the shore.',
+          location: 'Playa Del Carmen',
+          date: 'July 22, 2022',
+          time: '11:00',
+          petsAllowed: false,
+          organizer: 'Carey Wales'
+        }
+      ]
+    }
   }
-};
+}
 </script>
+
+<style scoped>
+.events {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+</style>