Refactored AddRecipe to its own script file, started implementing adding steps

src/script/newRecipe.ts

@@ -0,0 +1,69 @@
+let ingredientFields: HTMLInputElement[] = []
+let ingredientTable: HTMLTableSectionElement = document.querySelector('#ingredient-table')!
+let ingredientAddButton: HTMLButtonElement = document.querySelector('#add-ingredient-btn')!
+
+// - VARS
+let ingredients: {qty: string, unit: string, name: string}[] = []
+let steps: {
+    name: string,
+    description: string,
+    servings: number,
+    rating: number,
+    worktime: number,
+    waittime: number,
+    images: string[], // record ID of uploaded image
+
+}[] = []
+
+// - INIT
+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);
+    // for pressing enter to reset cursor
+    ingredientFields[2].addEventListener('keyup', e => {if (e.key === 'Enter') addIngredient()} )
+});
+
+// - ADD
+function addIngredient() {
+    const ing = {
+        qty: ingredientFields[0].value,
+        unit: ingredientFields[1].value,
+        name: ingredientFields[2].value
+    }
+
+    ingredients.push(ing)
+    
+    const newRow = document.createElement('tr')
+    newRow.innerHTML = `
+        <td class="px-4 py-2 border-t border-white/10">${ing.qty}</td>
+        <td class="px-4 py-2 border-t border-white/10">${ing.unit}</td>
+        <td class="px-4 py-2 border-t border-white/10">${ing.name}</td>
+    `
+    
+    // Add row to table and clear fields
+    ingredientTable.appendChild(newRow)
+    ingredientFields.forEach(f => f.value = '')
+    ingredientAddButton.style.display = 'none' // Hide Add Ingredient button
+    // move cursor to Qty field again
+    ingredientFields[0].focus()
+}
+
+// - UTILS
+function showAddIngredientButton() {
+    // only show if there is text in the field
+
+    if (ingredientFields[0].value && ingredientFields[2].value) {
+        ingredientAddButton.style.display = 'block'
+    } else {
+        ingredientAddButton.style.display = 'hidden'
+    }
+}