src/script/newRecipe.ts

@@ -29,12 +29,26 @@ document.addEventListener('DOMContentLoaded', function() {
     // show plus button once the user types in the text fields
     ingredientFields.forEach(f => {
         f.addEventListener('input', showAddIngredientButton)
-        f.addEventListener('keyup', showAddIngredientButton)
+        f.addEventListener('keydown', showAddIngredientButton)
     })
     // onclick for add button
     document.querySelector('#add-ingredient-btn')?.addEventListener('click', addIngredient);
-    // for pressing enter to reset cursor
+    
-    ingredientFields[2].addEventListener('keyup', e => {if (e.key === 'Enter') addIngredient()} )
+    // Enter key navigation for ingredient fields
+    ingredientFields[0].addEventListener('keydown', e => {
+        if (e.key === 'Enter') {
+            ingredientFields[1].focus() // Move from qty to unit
+        }
+    })
+    
+    ingredientFields[1].addEventListener('keydown', e => {
+        if (e.key === 'Enter') {
+            ingredientFields[2].focus() // Move from unit to name
+        }
+    })
+    
+    // for pressing enter to add ingredient (on the last field)
+    ingredientFields[2].addEventListener('keydown', e => {if (e.key === 'Enter') addIngredient()} )
     
     // Initial check for button state
     showAddIngredientButton()
@@ -92,7 +106,7 @@ function renderSteps() {
         const newStep = document.createElement('div')
         // times like this i regret using astro
         newStep.innerHTML = `
-            <div class="flex justify-between items-start mb-2">
+            <div class="flex justify-between items-start ">
                 <div class="flex flex-col">
                     <p class="text-bold text-[10pt]">Step ${displayIndex + 1}</p>
                     <div class="flex flex-col md:flex-row md:items-stretch">
@@ -102,6 +116,7 @@ function renderSteps() {
 
                 <div class="flex flex-col gap-1">
                     <button id="move-up-btn" class="px-2 py-1 bg-white/10 hover:bg-white/30 transition-colors rounded text-xs" data-step-index="${step.index}" ${displayIndex === 0 ? 'disabled' : ''}>↑</button>
+                    
                     <button id="move-down-btn" class="px-2 py-1 bg-white/10 hover:bg-white/30 transition-colors rounded text-xs" data-step-index="${step.index}" ${displayIndex === steps.length - 1 ? 'disabled' : ''}>↓</button>
                 </div>
             </div>