Add step button which acts like a click

src/pages/recipe/new.astro

@@ -85,6 +85,8 @@ async function submitRecipe() {
                     />
             </div>
 
+            <button disabled class="disabled:text-white/20 ml-auto mb-2 text-white bg-white/10 rounded-lg px-3 py-1 " id="add-step-btn" >Add</button>
+
             <ul id="step-list"></ul>
         </div>
 

src/script/newRecipe.ts

@@ -3,6 +3,7 @@ let ingredientTable: HTMLTableSectionElement = document.querySelector('#ingredie
 let ingredientAddButton: HTMLButtonElement = document.querySelector('#add-ingredient-btn')!
 
 let stepInput: HTMLTextAreaElement = document.querySelector('#new-instruction')!
+let stepAddButton: HTMLButtonElement = document.querySelector('#add-step-btn')!
 let stepList: HTMLUListElement = document.querySelector('#step-list')!
 let currentStepIndex = 0
 
@@ -22,6 +23,8 @@ document.addEventListener('DOMContentLoaded', function() {
         document.querySelector('#ing-unit')!,
         document.querySelector('#ing-name')!
     )
+
+    stepInput.addEventListener('input', showAddStepButton)
     
     // show plus button once the user types in the text fields
     ingredientFields.forEach(f => {
@@ -35,9 +38,11 @@ document.addEventListener('DOMContentLoaded', function() {
     
     // Initial check for button state
     showAddIngredientButton()
+    showAddStepButton()
 
     // Steps
     stepInput.addEventListener('keyup', e => { if (e.key === 'Enter' && e.shiftKey) addStep()  } )
+    stepAddButton.addEventListener('click', addStep)
 });
 
 // - ADD
@@ -60,7 +65,7 @@ function addIngredient() {
     // Add row to table and clear fields
     ingredientTable.appendChild(newRow)
     ingredientFields.forEach(f => f.value = '')
-    ingredientAddButton.style.display = 'none' // Hide Add Ingredient button
+    ingredientAddButton.disabled = true // Hide Add Ingredient button
     // move cursor to Qty field again
     ingredientFields[0].focus()
 }
@@ -75,6 +80,7 @@ function addStep() {
     steps.push(step)
     renderSteps()
     stepInput.value = ''
+    stepAddButton.disabled = true
 }
 
 function renderSteps() {
@@ -133,6 +139,14 @@ function showAddIngredientButton() {
     }
 }
 
+function showAddStepButton() {
+    if (stepInput.value.trim().length > 0) {
+        stepAddButton.disabled = false
+    } else {
+        stepAddButton.disabled = true
+    }
+}
+
 // shift: the direction to move. should be +1 to move down or -1 to move up the list
 function moveStep(stepIndex: number, shift: number) {
     // Find the step in the array