Pressing enter/return clears the fields and returns the cursor to the Qty input

src/pages/recipe/new.astro

@@ -10,6 +10,7 @@ async function submitRecipe() {
 
 ---
 
+<!-- INGREDIENT SCRIPT -->
 <script>
     let ingredientFields: HTMLInputElement[] = []
     let ingredientTable: HTMLTableSectionElement = document.querySelector('#ingredient-table')!
@@ -27,6 +28,8 @@ async function submitRecipe() {
         ingredientFields.forEach(f => f.addEventListener('beforeinput', showAddIngredientButton))
         // onclick for add button
         document.querySelector('#add-ingredient-btn')?.addEventListener('click', addIngredient);
+        // for pressing enter to reset cursor
+        ingredientFields[2].addEventListener('keyup', e => clearInputFields(e))
     });
     
     let ingredients: {qty: string, unit: string, name: string}[] = []
@@ -39,20 +42,28 @@ async function submitRecipe() {
 
         ingredients.push(ing)
         
-        // Create the table row HTML directly
         const newRow = document.createElement('tr')
         newRow.innerHTML = `
-            <td class="px-2 py-1 border-t border-white/10">${ing.qty}</td>
+            <td class="px-4 py-2 border-t border-white/10">${ing.qty}</td>
-            <td class="px-2 py-1 border-t border-white/10">${ing.unit}</td>
+            <td class="px-4 py-2 border-t border-white/10">${ing.unit}</td>
-            <td class="px-2 py-1 border-t border-white/10">${ing.name}</td>
+            <td class="px-4 py-2 border-t border-white/10">${ing.name}</td>
         `
         
         ingredientTable.appendChild(newRow)
-
+        ingredientFields.forEach(f => f.value = '')
-        ingredientFields.forEach(f => f.value = "")
         ingredientAddButton.style.display = 'none'
     }
 
+    function clearInputFields(e: KeyboardEvent) {
+        // clear input fields
+        if (e.key === 'Enter') {
+            addIngredient()
+            ingredientFields.forEach(f => f.value == '')
+            // move cursor to Qty field again
+            ingredientFields[0].focus()
+        }
+    }
+
     function showAddIngredientButton() {
         // only show if there is text in the field
 
@@ -67,7 +78,7 @@ async function submitRecipe() {
 <SiteLayout>
     <div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
         <div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
-            <div class="w-full bg-white/20 rounded-lg h-50">
+            <div class="w-full bg-white/10 rounded-lg h-50">
                 Image Upload
             </div>
             <!-- <ImageCarousel class="w-full" recipe={re} /> -->
@@ -76,7 +87,7 @@ async function submitRecipe() {
                 name="name"
                 rows="1"
                 placeholder="Name"
-                class="text-[28pt] font-bold p-1 leading-none mt-2 bg-white/20 rounded-lg resize-none overflow-hidden"
+                class="text-[28pt] font-bold p-1 leading-none mt-2 bg-white/10 rounded-lg resize-none overflow-hidden"
                 oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"
             />
                 <!-- if it works :3  -->
@@ -99,14 +110,14 @@ async function submitRecipe() {
                 <tbody id="ingredient-table" class="w-full border-t px-4 py-2 border-gray-600">
                     <tr id="ingredient-input" class="">
                         <td class="px-2 py-1">
-                            <input id="ing-qty" class="w-full h-11 bg-white/20 rounded-lg px-2 py-2" type="text" placeholder="Qty">
+                            <input id="ing-qty" class="w-full h-9 bg-white/10 rounded-lg px-2 py-2" type="text" placeholder="Qty">
                         </td>
                         <td class="px-2 py-1">
-                            <input id="ing-unit" class="w-full h-11 bg-white/20 rounded-lg px-2 py-2" type="text" placeholder="Unit">
+                            <input id="ing-unit" class="w-full h-9 bg-white/10 rounded-lg px-2 py-2" type="text" placeholder="Unit">
                         </td>
                         <td class="px-2 py-1">
                             <!-- <textarea id="ing-name" class="w-full h-11 bg-white/20 rounded-lg px-2 py-3 mt-1 resize-none leading-tight" placeholder="Ingredient" rows="1"/> -->
-                             <input id="ing-name" class="w-full h-11 bg-white/20 rounded-lg px-2 py-2" type="text" placeholder="Ingredient">
+                             <input id="ing-name" class="w-full h-9 bg-white/10 rounded-lg px-2 py-2" type="text" placeholder="Ingredient">
                         </td>
                     </tr>
                 </tbody>