add solution

vue-project/src/components/InputMask.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="input-mask">
     <span>Ich bin InputMask.vue</span>
-    <form>
+    <form @submit.prevent="addGrade">
       <label>
         Modulkürzel
         <input type="text" placeholder="z.B. 'IWS'" v-model="grade_form_input.kuerzel">
@@ -16,20 +16,47 @@
       </label>
       <button type="submit">Note Eintragen</button>
     </form>
-    <List/>
+    <List :grades="grades"/>
   </div>
 </template>
 
 <script setup>
 import {ref} from 'vue';
-import List from "@/components/List.vue";
+import List from './List.vue';
 
 const grade_form_input = ref({
   kuerzel: "",
   note: 1.0,
   credits: 5
 })
+const id = ref(4)
+const grades = ref([
+  {kuerzel: "IWS", note: 1.0, credits: 5, id: 1},
+  {kuerzel: "KRY", note: 2.0, credits: 6, id: 2},
+  {kuerzel: "WIF", note: 1.7, credits: 4, id: 3},
+])
 
+function addGrade() {
+  const is_every_input_set = validateInput();
+  if (is_every_input_set) {
+    grades.value.push({
+      kuerzel: grade_form_input.value.kuerzel,
+      note: grade_form_input.value.note,
+      credits: grade_form_input.value.credits,
+      id: id.value
+    })
+  }
+  // clear inputmask variables
+  grade_form_input.value = {kuerzel: "", note: 1.0, credits: 5}
+  id.value++
+}
+
+function validateInput() {
+  const grade_steps = [1.0, 1.3, 1.5, 1.7, 2.0, 2.3, 2.5, 2.7, 3.0, 3.3, 3.5, 3.7, 4.0, 5.0];
+  const not_empty = Object.values(grade_form_input.value).every(value => value !== "");
+  const valid_grade = grade_steps.includes(parseFloat(grade_form_input.value.note));
+  return valid_grade && not_empty ? true : false;
+}
 </script>
 
 <style scoped>

vue-project/src/components/List.vue

@@ -10,17 +10,29 @@
         <th></th>
       </tr>
       </thead>
+      <tbody>
+      <ListItem v-for="(entry, index) in props.grades" :kuerzel="entry.kuerzel"
+                :credits="entry.credits"
+                :note="entry.note" :id="entry.id"/>
+      </tbody>
     </table>
   </div>
 </template>
 
 <script setup>
+import ListItem from './ListItem.vue';
+
+const props = defineProps(['grades'])
+
 </script>
 
 <style lang="css">
 .list {
   padding: 1em;
   background-color: cadetblue;
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
 }
 
 table {

vue-project/src/components/ListItem.vue

@@ -0,0 +1,22 @@
+<template>
+  <tr>
+    <td>{{ kuerzel }}</td>
+    <td>{{ note }}</td>
+    <td>{{ credits }}</td>
+    <td>{{ id }}</td>
+  </tr>
+
+</template>
+
+<script setup>
+
+const props = defineProps({
+  kuerzel: null,
+  note: null,
+  credits: null,
+  id: null
+})
+
+</script>
+
+<style></style>