update solution

vue-project/src/App.vue

@@ -1,26 +1,51 @@
 <script setup>
-import {ref} from "vue";
-import InputMask from "@/components/InputMask.vue";
+import { ref } from "vue";
+
+const name = ref('')
+
+setTimeout(() => {
+  name.value = 'Bob'
+}, 1000)
 
-const name = 'your-name'
-const textClass = 'text'
 const counter = ref(0)
 
 function incrementCounter() {
   counter.value++
 }
 
+const grade_form_input = ref({
+  kuerzel: "",
+  note: 1.0,
+  credits: 5
+})
+
 </script>
 
 <template>
-  <h1 :class="textClass">Hello {{ name }}</h1>
+  <h1>Hello {{ name }}</h1>
   <button @click="incrementCounter">click me for cookies</button>
   You have {{ counter }} cookies
-  <InputMask/>
+
+  <div class="input-mask">
+    <form>
+      <label>
+        Modulkürzel
+        <input type="text" placeholder="z.B. 'IWS'" v-model="grade_form_input.kuerzel">
+      </label>
+      <label>
+        Note
+        <input type="number" min="1" max="5" placeholder="1.0" step="0.1" v-model="grade_form_input.note">
+      </label>
+      <label>
+        Credits
+        <input type="number" min="2" max="30" placeholder="5" v-model="grade_form_input.credits">
+      </label>
+      <button type="submit">Note Eintragen</button>
+    </form>
+    {{ grade_form_input.kuerzel }}
+    {{ grade_form_input.note }}
+    {{ grade_form_input.credits }}
+  </div>
 </template>
 
-<style scoped>
-.text {
-  color: red;
-}
-</style>
+<style scoped></style>

vue-project/src/components/InputMask.vue

@@ -1,36 +0,0 @@
-<template>
-  <div class="input-mask">
-    <span>Ich bin InputMask.vue</span>
-    <form>
-      <label>
-        Modulkürzel
-        <input type="text" placeholder="z.B. 'IWS'" v-model="grade_form_input.kuerzel">
-      </label>
-      <label>
-        Note
-        <input type="number" min="1" max="5" placeholder="1.0" step="0.1" v-model="grade_form_input.note">
-      </label>
-      <label>
-        Credits
-        <input type="number" min="2" max="30" placeholder="5" v-model="grade_form_input.credits">
-      </label>
-      <button type="submit">Note Eintragen</button>
-    </form>
-    <!-- @deleteEntry="deleteGrade"-->
-  </div>
-</template>
-
-<script setup>
-import {ref} from 'vue';
-
-const grade_form_input = ref({
-  kuerzel: "",
-  note: 1.0,
-  credits: 5
-})
-
-</script>
-
-<style scoped>
-
-</style>