Starting to add script for adding ingredients

src/pages/recipe/new.astro

@@ -8,13 +8,50 @@ import InfoView from "@/components/Detail/InfoView";
 
 const { recipeid } = Astro.params;
 
+// Actually post the recipe with the stored variables
+async function submitRecipe() {
+    
+}
+
 ---
 
 <script>
-    let ingredients: {qty: string, unit: string, name: string}[] = []
+    let ingredientFields: HTMLInputElement[] = []
+    
+    document.addEventListener('DOMContentLoaded', function() {
+        
+        ingredientFields.push(
+            document.querySelector('#ing-qty')!,
+            document.querySelector('#ing-unit')!,
+            document.querySelector('#ing-name')!
+        )
+        
+        // show plus button once the user clicks off one of the text fields
+        ingredientFields.forEach(f => f.addEventListener('beforeinput', showAddIngredientButton))
+        // onclick for add button
+        document.querySelector('#add-ingredient-btn')?.addEventListener('click', addIngredient);
+    });
+    
+    let ingredients: {qty: string, unit: string, name: string}[] = []
+    function addIngredient() {
+        ingredients.push({
+            qty: ingredientFields[0].value,
+            unit: ingredientFields[1].value,
+            name: ingredientFields[2].value
+        })
+        console.log(ingredients)
+    }
+
+    function showAddIngredientButton() {
+        // only show if there is text in the field
+        console.log(ingredientFields[2].value === "")
+        if (ingredientFields[0].value && ingredientFields[2].value) {
+            (document.querySelector('#add-ingredient-btn') as HTMLButtonElement).style.display = 'block'
+        } else {
+            (document.querySelector('#add-ingredient-btn') as HTMLButtonElement).style.display = 'hidden'
+        }
+        
     
-    function addIngredient(q: string, u: string, n: string) {
-        ingredients.push({qty: q, unit: u, name: n})
     }
 </script>
 
@@ -40,6 +77,7 @@ const { recipeid } = Astro.params;
 
             <div class="flex flex-row align-middle items-center">
                 <p class="mt-4 text-[22pt] font-bold 'mt-4'">Ingredients</p>
+                <button class="hidden" id="add-ingredient-btn">add</button>
             </div>
             <table class={`table-fixed  text-left bg-[#2a2b2c] rounded-lg w-full`}>
                 <thead>