Create AddProduct button

Author: jgangel

projects/tip-calculator/index.html

@@ -35,22 +35,9 @@ <h1>Tip Calculator</h1>
               <span></span>
             </td>
           </tr>
-          <tr>
-            <td>
-              <input type="text" />
-            </td>
-            <td>
-              <input type="number" />
-            </td>
-            <td>
-              <input type="number" />
-            </td>
-            <td>
-              <span></span>
-            </td>
-          </tr>
         </tbody>
       </table>
+      <button class="btn-success" id="add-product">Add Product +</button>
       <br />
       <label for="tip">Tip percentage:</label>
       <input type="number" id="tip" />

projects/tip-calculator/index.js

@@ -1,6 +1,7 @@
 const productTable = document.getElementById("product-table");
 const productRows = productTable.children;
 
+const btnAddProduct = document.getElementById("add-product");
 const tipInput = document.getElementById("tip");
 
 const btnCalculate = document.getElementById("calculate");
@@ -10,6 +11,35 @@ const subtotalSpan = document.getElementById("subtotal");
 const finalTipSpan = document.getElementById("final-tip");
 const totalSpan = document.getElementById("total");
 
+let totalRows = 0;
+
+function addProduct() {
+  totalRows++;
+  const currentRow = totalRows;
+  const htmlString = `
+            <td>
+              <input type="text" />
+            </td>
+            <td>
+              <input type="number" />
+            </td>
+            <td>
+              <input type="number" />
+            </td>
+            <td>
+              <span></span>
+            </td>
+        `;
+
+  const row = document.createElement("tr");
+  row.innerHTML = htmlString;
+  const priceInput = row.children[1].firstElementChild;
+  const unitInput = row.children[2].firstElementChild;
+  priceInput.addEventListener("focusout", () => calculateRow(currentRow));
+  unitInput.addEventListener("focusout", () => calculateRow(currentRow));
+  productTable.appendChild(row);
+}
+
 function calculateRow(row) {
   const priceValue = productRows[row].children[1].firstElementChild.value;
   const unitValue = productRows[row].children[2].firstElementChild.value;
@@ -66,5 +96,6 @@ for (let row = 0; row < productRows.length; row++) {
   unitInput.addEventListener("focusout", () => calculateRow(row));
 }
 
+btnAddProduct.addEventListener("click", addProduct);
 btnCalculate.addEventListener("click", calculateTotal);
 btnClean.addEventListener("click", cleanTotal);