From 05c4e09aced800fc42c314552c96df29372eaddf Mon Sep 17 00:00:00 2001
From: valerio <v.cocco73@gmail.com>
Date: Sat, 25 Jan 2025 11:29:27 +0100
Subject: [PATCH] add solution

---
 vue-project/src/components/InputMask.vue |  3 +-
 vue-project/src/components/List.vue      | 39 ++++++++++++++++++++++++
 2 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 vue-project/src/components/List.vue

diff --git a/vue-project/src/components/InputMask.vue b/vue-project/src/components/InputMask.vue
index 5892c3e..c9bd767 100644
--- a/vue-project/src/components/InputMask.vue
+++ b/vue-project/src/components/InputMask.vue
@@ -16,12 +16,13 @@
       </label>
       <button type="submit">Note Eintragen</button>
     </form>
-    <!-- @deleteEntry="deleteGrade"-->
+    <List/>
   </div>
 </template>
 
 <script setup>
 import {ref} from 'vue';
+import List from "@/components/List.vue";
 
 const grade_form_input = ref({
   kuerzel: "",
diff --git a/vue-project/src/components/List.vue b/vue-project/src/components/List.vue
new file mode 100644
index 0000000..bc5c944
--- /dev/null
+++ b/vue-project/src/components/List.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="list">
+    <span>Ich bin List.vue</span>
+    <table>
+      <thead>
+      <tr>
+        <th>Kürzel</th>
+        <th>Note</th>
+        <th>Credits</th>
+        <th></th>
+      </tr>
+      </thead>
+    </table>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="css">
+.list {
+  padding: 1em;
+  background-color: cadetblue;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+th, td {
+  border: 1px solid #ddd;
+  padding: 8px;
+  text-align: left;
+}
+
+th {
+  background-color: #f4f4f4;
+}
+</style>
\ No newline at end of file