savuiux
diff --git a/‎components/CardComponent.js
+26 b/‎components/CardComponent.js
+26
diff --git a/‎components/FinalComponent.js
+93 b/‎components/FinalComponent.js
+93
diff --git a/‎components/ToDoComponent.js
+14 b/‎components/ToDoComponent.js
+14
diff --git a/‎final.html
+30 b/‎final.html
+30
@@ -0,0 +1,26 @@
+landing.component("card-component", {
+    props: {
+        title: {
+            type: String,
+            required: true
+        },
+        description: {
+            type: String,
+            required: true
+        },
+        link: {
+            type: Object,
+            required: true
+        }
+    },
+    template:
+    /*html*/
+    `<div class="card">
+        <h2>{{ title }}</h2>
+        <img :src="link.image" width="400" height="400"/>
+        <br />
+        <p>{{ description }}</p>
+        <br /><br />
+        <a :href="link.url" class="button">Visit {{ title }} website</a>
+    </div>`
+})
@@ -0,0 +1,93 @@
+final.component("game-detail", {
+    template:
+    /*html*/
+    `<table>
+        <thead>
+            <tr>
+                <th class="table-columns"
+                    v-for="key in columns"
+                    @click="sortBy(key)"
+                    :class="{ active: sortKey === key }">
+                    {{ key }}
+                    <span class="arrow" :class="sortColumns[key] > 0 ? 'asc' : 'desc'"></span>
+                </th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="game in filteredTitles">
+                <td v-for="key in columns" class="game-data" :class="game[key] == 'Y'? 'yes' : game[key] == 'N' ? 'no' : ''"><span>{{ game[key] }}</span></td>
+            </tr>
+        </tbody>
+    </table>`,
+    props: {
+        entries: {
+            type: Array,
+            required: true
+        },
+        columns: {
+            type: Array,
+            required: true
+        },
+        filterKey: {
+            type: String,
+            required: true
+        }
+    },
+    data: function() {
+        return {
+            sortKey: ""
+        }
+    },
+    computed: {
+        filteredTitles: function() {
+            const sortKey = this.sortKey
+            const filterKey = this.filterKey && this.filterKey.toLowerCase()
+            const order = this.sortColumns[sortKey] || 1
+
+            let entries = this.entries
+            if (filterKey) {
+                entries = entries.filter(function(row) {
+                    return Object.keys(row).some(function(key) {
+                        return (
+                            String(row[key])
+                                .toLowerCase()
+                                .indexOf(filterKey) > -1
+                        )
+                    })
+                })
+            }
+
+            if (sortKey) {
+                entries = entries.slice().sort(function(x,y) {
+                    x = x[sortKey]
+                    y = y[sortKey]
+
+                    return (x === y ? 0 : x > y ? 1 : -1) * order
+                })
+            }
+
+            return entries
+
+        },
+
+        sortColumns() {
+            const sortedColumns = {}
+
+            this.columns.forEach(function(key) {
+                sortedColumns[key] = 1
+            })
+
+            return sortedColumns
+        }
+    },
+    methods: {
+        capitalize(data) {
+            return data.charAt(0).toUpperCase() + data.slice(1)
+        },
+
+        sortBy(key) {
+            this.sortKey = key
+            this.sortColumns[key] = this.sortColumns[key] * -1
+        }
+    }
+})
@@ -0,0 +1,14 @@
+toDo.component("todo-item", {
+    props: {
+        title: {
+            type: String,
+            required: true
+        }
+    },
+    template:
+    /*html*/
+    `<li>
+        <h4>{{ title }}</h4>
+        <button @click="$emit('remove')">Remove Task</button>
+    </li>`
+})
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8" />
+    <title>To Do List</title>
+    <link href="style.css" rel="stylesheet" type="text/css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <script src="https://unpkg.com/vue@next"></script>
+</head>
+<body>
+    <div id="final">
+        <h1>Final Project</h1>
+        <div id="game-database">
+            <form id="search">
+                <label for="search">Search: <input type="text" id="search" v-model="searchInput" /></label>
+            </form>
+            <br />
+            <game-detail
+                :entries="dataset"
+                :columns="dataColumns"
+                :filter-key="searchInput"
+            ></game-detail>
+        </div>
+    </div>
+    
+    <script src="final.js"></script>
+    <script src="./components/FinalComponent.js"></script>
+    <script>const mountedFinal = final.mount("#final")</script>
+</body>
+</html>