From edcedbea7460815b9647965049d5d065d3abda34 Mon Sep 17 00:00:00 2001
From: Jesus Angel <jesus.angel.9703@gmail.com>
Date: Mon, 28 Oct 2024 10:43:39 -0500
Subject: [PATCH 01/14] Limit tip to 20

---
 projects/tip-calculator/index.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/projects/tip-calculator/index.js b/projects/tip-calculator/index.js
index 98cb079..bf2372a 100644
--- a/projects/tip-calculator/index.js
+++ b/projects/tip-calculator/index.js
@@ -6,8 +6,16 @@ const totalSpan = document.getElementById("total");
 function calculateTotal() {
   const billValue = billInput.value;
   const tipValue = tipInput.value;
-  const totalValue = billValue * (1 + tipValue / 100);
-  totalSpan.innerText = totalValue.toFixed(2);
+  if(tipValue<20){
+    const totalValue = billValue * (1 + tipValue / 100);
+    totalSpan.innerText = totalValue.toFixed(2);
+  }
+  else{
+    totalValue = String("The tip is abusive");
+    totalSpan.innerText= totalValue;
+  }
+    
+  
 }
 
 btnEl.addEventListener("click", calculateTotal);

From 9e1eb6f8743cb88441934ee36b2622f1f2952e2c Mon Sep 17 00:00:00 2001
From: Jesus Angel <jesus.angel.9703@gmail.com>
Date: Mon, 28 Oct 2024 10:53:19 -0500
Subject: [PATCH 02/14] Remove Unnecessary String

---
 projects/tip-calculator/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/tip-calculator/index.js b/projects/tip-calculator/index.js
index bf2372a..c7d74b2 100644
--- a/projects/tip-calculator/index.js
+++ b/projects/tip-calculator/index.js
@@ -11,7 +11,7 @@ function calculateTotal() {
     totalSpan.innerText = totalValue.toFixed(2);
   }
   else{
-    totalValue = String("The tip is abusive");
+    totalValue = "The tip is abusive";
     totalSpan.innerText= totalValue;
   }
     

From 5d698b5345a1e947fe4f60cfba8c8a32552e8d9a Mon Sep 17 00:00:00 2001
From: Jesus Angel <jesus.angel.9703@gmail.com>
Date: Mon, 28 Oct 2024 13:12:18 -0500
Subject: [PATCH 03/14] Add clean button and split the total calculation

---
 projects/tip-calculator/index.html |  9 ++++++++-
 projects/tip-calculator/index.js   | 24 +++++++++++++++++++++---
 projects/tip-calculator/style.css  | 19 +++++++++++++++----
 3 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/projects/tip-calculator/index.html b/projects/tip-calculator/index.html
index 029457b..3618bbf 100644
--- a/projects/tip-calculator/index.html
+++ b/projects/tip-calculator/index.html
@@ -17,7 +17,14 @@ <h1>Tip Calculator</h1>
         <label for="tip">Tip percentage:</label>
         <input type="number" id="tip">
         <br/>
-        <button id="calculate">Calculate</button>
+        <button class="btn-success" id="calculate">Calculate</button>
+        <button class="btn-danger" id="clean">Clean</button>
+        <br/>
+        <label for="subtotal">Subtotal:</label>
+        <span id="subtotal"></span>
+        <br/>
+        <label for="final-tip">Tip:</label>
+        <span id="final-tip"></span>
         <br/>
         <label for="total">Total:</label>
         <span id="total"></span>
diff --git a/projects/tip-calculator/index.js b/projects/tip-calculator/index.js
index c7d74b2..c3ab438 100644
--- a/projects/tip-calculator/index.js
+++ b/projects/tip-calculator/index.js
@@ -1,21 +1,39 @@
-const btnEl = document.getElementById("calculate");
+const btnCalculate = document.getElementById("calculate");
+const btnClean = document.getElementById("clean");
 const billInput = document.getElementById("bill");
 const tipInput = document.getElementById("tip");
+const subtotalSpan = document.getElementById("subtotal");
+const finalTipSpan = document.getElementById("final-tip");
 const totalSpan = document.getElementById("total");
 
 function calculateTotal() {
   const billValue = billInput.value;
   const tipValue = tipInput.value;
   if(tipValue<20){
+    const finalTipValue = billValue * tipValue / 100;
     const totalValue = billValue * (1 + tipValue / 100);
+    subtotalSpan.innerText = billValue;
+    finalTipSpan.innerText = finalTipValue.toFixed(2);
     totalSpan.innerText = totalValue.toFixed(2);
   }
   else{
+    subtotalSpan.innerText = billValue;
+    finalTipValue = "The tip is abusive";
+    finalTipSpan.innerText = finalTipValue;
     totalValue = "The tip is abusive";
-    totalSpan.innerText= totalValue;
+    totalSpan.innerText = totalValue;
   }
     
   
 }
 
-btnEl.addEventListener("click", calculateTotal);
+function cleanTotal() {
+billInput.value=null;
+tipInput.value=null;
+subtotalSpan.innerText = "";
+finalTipSpan.innerText = "";
+totalSpan.innerText = "";
+}
+
+btnCalculate.addEventListener("click", calculateTotal);
+btnClean.addEventListener("click", cleanTotal);
diff --git a/projects/tip-calculator/style.css b/projects/tip-calculator/style.css
index 786e129..0b6b9de 100644
--- a/projects/tip-calculator/style.css
+++ b/projects/tip-calculator/style.css
@@ -30,7 +30,6 @@ input {
 }
 
 button {
-  background-color: #4caf50;
   color: white;
   padding: 10px;
   border: none;
@@ -42,12 +41,24 @@ button {
   transition: background-color 0.2s ease;
 }
 
-button:hover {
-  background-color: #45a049;
+.btn-success {
+  background-color: #4caf50;
+}
+
+.btn-success:hover {
+  background-color: #021f02;
+}
+
+.btn-danger {
+  background-color: #890303;
+}
+
+.btn-danger:hover {
+  background-color: #220202;
 }
 
 #total {
   font-size: 24px;
   font-weight: bold;
   margin-top: 10px;
-}
+}
\ No newline at end of file

From 351c268666017a6ec01af7c521f2b0542f5082a4 Mon Sep 17 00:00:00 2001
From: Jesus Angel <jesus.angel.9703@gmail.com>
Date: Mon, 28 Oct 2024 14:45:47 -0500
Subject: [PATCH 04/14] Change bill amount for product/price table

---
 projects/tip-calculator/index.html | 24 ++++++++++++++++++++++--
 projects/tip-calculator/index.js   | 25 ++++++++++++++-----------
 projects/tip-calculator/style.css  | 13 +++++++++++++
 3 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/projects/tip-calculator/index.html b/projects/tip-calculator/index.html
index 3618bbf..b52a349 100644
--- a/projects/tip-calculator/index.html
+++ b/projects/tip-calculator/index.html
@@ -11,8 +11,28 @@
     <div class="container">
         <h1>Tip Calculator</h1>
         <p>Enter the bill amount and tip percentage to calculate the total.</p>
-        <label for="bill">Bill amount:</label>
-        <input type="number" id="bill">
+        <table>
+            <tr>
+              <th>Product</th>
+              <th>Price</th>
+            </tr>
+            <tr>
+              <td>
+<input type="text" id="product-one">
+              </td>
+              <td>
+<input type="number" id="price-one">
+              </td>
+            </tr>
+            <tr>
+              <td>
+<input type="text" id="product-two">
+              </td>
+              <td>
+<input type="number" id="price-two">
+              </td>
+            </tr>
+          </table>
         <br/>
         <label for="tip">Tip percentage:</label>
         <input type="number" id="tip">
diff --git a/projects/tip-calculator/index.js b/projects/tip-calculator/index.js
index c3ab438..e01fc00 100644
--- a/projects/tip-calculator/index.js
+++ b/projects/tip-calculator/index.js
@@ -1,34 +1,37 @@
 const btnCalculate = document.getElementById("calculate");
 const btnClean = document.getElementById("clean");
-const billInput = document.getElementById("bill");
+const productOneInput = document.getElementById("product-one");
+const productTwoInput = document.getElementById("product-two");
+const priceOneInput = document.getElementById("price-one");
+const priceTwoInput = document.getElementById("price-two");
 const tipInput = document.getElementById("tip");
 const subtotalSpan = document.getElementById("subtotal");
 const finalTipSpan = document.getElementById("final-tip");
 const totalSpan = document.getElementById("total");
 
 function calculateTotal() {
-  const billValue = billInput.value;
+  const priceOneValue = 0 + priceOneInput.value;
+  const priceTwoValue = 0 + priceTwoInput.value;
+  const billValue = parseFloat(priceOneValue) + parseFloat(priceTwoValue);
   const tipValue = tipInput.value;
+  subtotalSpan.innerText = billValue;
   if(tipValue<20){
     const finalTipValue = billValue * tipValue / 100;
     const totalValue = billValue * (1 + tipValue / 100);
-    subtotalSpan.innerText = billValue;
     finalTipSpan.innerText = finalTipValue.toFixed(2);
     totalSpan.innerText = totalValue.toFixed(2);
   }
   else{
-    subtotalSpan.innerText = billValue;
-    finalTipValue = "The tip is abusive";
-    finalTipSpan.innerText = finalTipValue;
-    totalValue = "The tip is abusive";
-    totalSpan.innerText = totalValue;
+    finalTipSpan.innerText = "The tip is abusive";
+    totalSpan.innerText = "The tip is abusive";
   }
-    
-  
 }
 
 function cleanTotal() {
-billInput.value=null;
+productOneInput.value=null;
+productTwoInput.value=null;
+priceOneInput.value=null;
+priceTwoInput.value=null;
 tipInput.value=null;
 subtotalSpan.innerText = "";
 finalTipSpan.innerText = "";
diff --git a/projects/tip-calculator/style.css b/projects/tip-calculator/style.css
index 0b6b9de..de4c820 100644
--- a/projects/tip-calculator/style.css
+++ b/projects/tip-calculator/style.css
@@ -2,6 +2,19 @@
   box-sizing: border-box;
 }
 
+table {
+  font-family: arial, sans-serif;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+td,
+th {
+  border: 1px solid #dddddd;
+  text-align: left;
+  padding: 15px;
+}
+
 body {
   background-color: #f2f2f2;
   font-family: "Helvetica", sans-serif;

From 6220d1f9f124b2800503017f5d1b42503b892f81 Mon Sep 17 00:00:00 2001
From: Jesus Angel <jesus.angel.9703@gmail.com>
Date: Mon, 28 Oct 2024 15:52:09 -0500
Subject: [PATCH 05/14] Change Table to 2x4

---
 projects/tip-calculator/index.html | 14 ++++++++++++++
 projects/tip-calculator/index.js   | 21 ++++++++++++++++++---
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/projects/tip-calculator/index.html b/projects/tip-calculator/index.html
index b52a349..bb4a913 100644
--- a/projects/tip-calculator/index.html
+++ b/projects/tip-calculator/index.html
@@ -15,6 +15,8 @@ <h1>Tip Calculator</h1>
             <tr>
               <th>Product</th>
               <th>Price</th>
+              <th>Unit</th>
+              <th>Money</th>
             </tr>
             <tr>
               <td>
@@ -23,6 +25,12 @@ <h1>Tip Calculator</h1>
               <td>
 <input type="number" id="price-one">
               </td>
+              <td>
+                <input type="number" id="unit-one">
+              </td>
+              <td>
+                <span id="money-one"></span>
+              </td>
             </tr>
             <tr>
               <td>
@@ -31,6 +39,12 @@ <h1>Tip Calculator</h1>
               <td>
 <input type="number" id="price-two">
               </td>
+              <td>
+                <input type="number" id="unit-two">
+              </td>
+              <td>
+                <span id="money-two"></span>
+              </td>
             </tr>
           </table>
         <br/>
diff --git a/projects/tip-calculator/index.js b/projects/tip-calculator/index.js
index e01fc00..360ea2d 100644
--- a/projects/tip-calculator/index.js
+++ b/projects/tip-calculator/index.js
@@ -4,15 +4,26 @@ const productOneInput = document.getElementById("product-one");
 const productTwoInput = document.getElementById("product-two");
 const priceOneInput = document.getElementById("price-one");
 const priceTwoInput = document.getElementById("price-two");
+const unitOneInput = document.getElementById("unit-one");
+const unitTwoInput = document.getElementById("unit-two");
 const tipInput = document.getElementById("tip");
+const moneyOneSpan = document.getElementById("money-one");
+const moneyTwoSpan = document.getElementById("money-two");
 const subtotalSpan = document.getElementById("subtotal");
 const finalTipSpan = document.getElementById("final-tip");
 const totalSpan = document.getElementById("total");
 
 function calculateTotal() {
-  const priceOneValue = 0 + priceOneInput.value;
-  const priceTwoValue = 0 + priceTwoInput.value;
-  const billValue = parseFloat(priceOneValue) + parseFloat(priceTwoValue);
+  const priceOneValue = priceOneInput.value;
+  const priceTwoValue = priceTwoInput.value;
+  const unitOneValue = unitOneInput.value;
+  const unitTwoValue = unitTwoInput.value;
+  const priceOneTotalValue = priceOneValue*unitOneValue;
+  const priceTwoTotalValue = priceTwoValue*unitTwoValue;
+  moneyOneSpan.innerText = priceOneTotalValue;
+  moneyTwoSpan.innerText = priceTwoTotalValue;
+  
+  const billValue = priceOneTotalValue + priceTwoTotalValue;
   const tipValue = tipInput.value;
   subtotalSpan.innerText = billValue;
   if(tipValue<20){
@@ -32,6 +43,10 @@ productOneInput.value=null;
 productTwoInput.value=null;
 priceOneInput.value=null;
 priceTwoInput.value=null;
+unitOneInput.value=null;
+unitTwoInput.value=null;
+moneyOneSpan.innerText="";
+moneyTwoSpan.innerText="";
 tipInput.value=null;
 subtotalSpan.innerText = "";
 finalTipSpan.innerText = "";

From bacf083504ceca3534aa439403602d6f7a4fe1f8 Mon Sep 17 00:00:00 2001
From: Jesus Angel <jesus.angel.9703@gmail.com>
Date: Thu, 31 Oct 2024 10:19:31 -0500
Subject: [PATCH 06/14] Split subtotal behavior from button

---
 projects/tip-calculator/index.js | 74 +++++++++++++++++++-------------
 1 file changed, 45 insertions(+), 29 deletions(-)

diff --git a/projects/tip-calculator/index.js b/projects/tip-calculator/index.js
index 360ea2d..1eb9547 100644
--- a/projects/tip-calculator/index.js
+++ b/projects/tip-calculator/index.js
@@ -1,57 +1,73 @@
-const btnCalculate = document.getElementById("calculate");
-const btnClean = document.getElementById("clean");
 const productOneInput = document.getElementById("product-one");
-const productTwoInput = document.getElementById("product-two");
 const priceOneInput = document.getElementById("price-one");
-const priceTwoInput = document.getElementById("price-two");
 const unitOneInput = document.getElementById("unit-one");
-const unitTwoInput = document.getElementById("unit-two");
-const tipInput = document.getElementById("tip");
 const moneyOneSpan = document.getElementById("money-one");
+
+const productTwoInput = document.getElementById("product-two");
+const priceTwoInput = document.getElementById("price-two");
+const unitTwoInput = document.getElementById("unit-two");
 const moneyTwoSpan = document.getElementById("money-two");
+
+const tipInput = document.getElementById("tip");
+
+const btnCalculate = document.getElementById("calculate");
+const btnClean = document.getElementById("clean");
+
 const subtotalSpan = document.getElementById("subtotal");
 const finalTipSpan = document.getElementById("final-tip");
 const totalSpan = document.getElementById("total");
 
+function calculateFirst() {
+  const priceOneValue = priceOneInput.value;
+  const unitOneValue = unitOneInput.value;
+  const priceOneTotalValue = priceOneValue * unitOneValue;
+  moneyOneSpan.innerText = priceOneTotalValue;
+}
+
 function calculateTotal() {
   const priceOneValue = priceOneInput.value;
-  const priceTwoValue = priceTwoInput.value;
   const unitOneValue = unitOneInput.value;
+  const priceOneTotalValue = priceOneValue * unitOneValue;
+
+  const priceTwoValue = priceTwoInput.value;
   const unitTwoValue = unitTwoInput.value;
-  const priceOneTotalValue = priceOneValue*unitOneValue;
-  const priceTwoTotalValue = priceTwoValue*unitTwoValue;
-  moneyOneSpan.innerText = priceOneTotalValue;
-  moneyTwoSpan.innerText = priceTwoTotalValue;
-  
+  const priceTwoTotalValue = priceTwoValue * unitTwoValue;
+
   const billValue = priceOneTotalValue + priceTwoTotalValue;
-  const tipValue = tipInput.value;
   subtotalSpan.innerText = billValue;
-  if(tipValue<20){
-    const finalTipValue = billValue * tipValue / 100;
+
+  const tipValue = tipInput.value;
+  232;
+  if (tipValue < 20) {
+    const finalTipValue = (billValue * tipValue) / 100;
     const totalValue = billValue * (1 + tipValue / 100);
     finalTipSpan.innerText = finalTipValue.toFixed(2);
     totalSpan.innerText = totalValue.toFixed(2);
-  }
-  else{
+  } else {
     finalTipSpan.innerText = "The tip is abusive";
     totalSpan.innerText = "The tip is abusive";
   }
 }
 
 function cleanTotal() {
-productOneInput.value=null;
-productTwoInput.value=null;
-priceOneInput.value=null;
-priceTwoInput.value=null;
-unitOneInput.value=null;
-unitTwoInput.value=null;
-moneyOneSpan.innerText="";
-moneyTwoSpan.innerText="";
-tipInput.value=null;
-subtotalSpan.innerText = "";
-finalTipSpan.innerText = "";
-totalSpan.innerText = "";
+  productOneInput.value = null;
+  priceOneInput.value = null;
+  unitOneInput.value = null;
+  moneyOneSpan.innerText = "";
+
+  productTwoInput.value = null;
+  priceTwoInput.value = null;
+  unitTwoInput.value = null;
+  moneyTwoSpan.innerText = "";
+
+  tipInput.value = null;
+  subtotalSpan.innerText = "";
+  finalTipSpan.innerText = "";
+  totalSpan.innerText = "";
 }
 
+priceOneInput.addEventListener("focusout", calculateFirst);
+unitOneInput.addEventListener("focusout", calculateFirst);
+
 btnCalculate.addEventListener("click", calculateTotal);
 btnClean.addEventListener("click", cleanTotal);

From f723c2d4030f671878c1c1f96dfec9e2298941b7 Mon Sep 17 00:00:00 2001
From: Jesus Angel <jesus.angel.9703@gmail.com>
Date: Thu, 31 Oct 2024 17:46:45 -0500
Subject: [PATCH 07/14] Give a red message of high tip

---
 projects/tip-calculator/index.js  | 4 ++++
 projects/tip-calculator/style.css | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/projects/tip-calculator/index.js b/projects/tip-calculator/index.js
index 1eb9547..76ac3a1 100644
--- a/projects/tip-calculator/index.js
+++ b/projects/tip-calculator/index.js
@@ -43,9 +43,13 @@ function calculateTotal() {
     const totalValue = billValue * (1 + tipValue / 100);
     finalTipSpan.innerText = finalTipValue.toFixed(2);
     totalSpan.innerText = totalValue.toFixed(2);
+    finalTipSpan.classList.remove("error-highlight");
+    totalSpan.classList.remove("error-highlight");
   } else {
     finalTipSpan.innerText = "The tip is abusive";
     totalSpan.innerText = "The tip is abusive";
+    finalTipSpan.classList.add("error-highlight");
+    totalSpan.classList.add("error-highlight");
   }
 }
 
diff --git a/projects/tip-calculator/style.css b/projects/tip-calculator/style.css
index de4c820..1dff52d 100644
--- a/projects/tip-calculator/style.css
+++ b/projects/tip-calculator/style.css
@@ -70,6 +70,10 @@ button {
   background-color: #220202;
 }
 
+.error-highlight {
+  color: #890303;
+}
+
 #total {
   font-size: 24px;
   font-weight: bold;

From 33d1511380fdb2ca3cf9323a29594cb90b2dc05b Mon Sep 17 00:00:00 2001
From: Jesus Angel <jesus.angel.9703@gmail.com>
Date: Thu, 31 Oct 2024 19:09:16 -0500
Subject: [PATCH 08/14] Implement table lookup

---
 projects/tip-calculator/index.html | 129 +++++++++++++++--------------
 projects/tip-calculator/index.js   |  73 ++++++++--------
 2 files changed, 99 insertions(+), 103 deletions(-)

diff --git a/projects/tip-calculator/index.html b/projects/tip-calculator/index.html
index bb4a913..f012241 100644
--- a/projects/tip-calculator/index.html
+++ b/projects/tip-calculator/index.html
@@ -1,69 +1,72 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Tip Calculator</title>
-    <link rel="stylesheet" href="style.css">
-</head>
-<body>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
     <div class="container">
-        <h1>Tip Calculator</h1>
-        <p>Enter the bill amount and tip percentage to calculate the total.</p>
-        <table>
-            <tr>
-              <th>Product</th>
-              <th>Price</th>
-              <th>Unit</th>
-              <th>Money</th>
-            </tr>
-            <tr>
-              <td>
-<input type="text" id="product-one">
-              </td>
-              <td>
-<input type="number" id="price-one">
-              </td>
-              <td>
-                <input type="number" id="unit-one">
-              </td>
-              <td>
-                <span id="money-one"></span>
-              </td>
-            </tr>
-            <tr>
-              <td>
-<input type="text" id="product-two">
-              </td>
-              <td>
-<input type="number" id="price-two">
-              </td>
-              <td>
-                <input type="number" id="unit-two">
-              </td>
-              <td>
-                <span id="money-two"></span>
-              </td>
-            </tr>
-          </table>
-        <br/>
-        <label for="tip">Tip percentage:</label>
-        <input type="number" id="tip">
-        <br/>
-        <button class="btn-success" id="calculate">Calculate</button>
-        <button class="btn-danger" id="clean">Clean</button>
-        <br/>
-        <label for="subtotal">Subtotal:</label>
-        <span id="subtotal"></span>
-        <br/>
-        <label for="final-tip">Tip:</label>
-        <span id="final-tip"></span>
-        <br/>
-        <label for="total">Total:</label>
-        <span id="total"></span>
-
+      <h1>Tip Calculator</h1>
+      <p>Enter the bill amount and tip percentage to calculate the total.</p>
+      <table>
+        <thead>
+          <tr>
+            <th>Product</th>
+            <th>Price</th>
+            <th>Unit</th>
+            <th>Money</th>
+          </tr>
+        </thead>
+        <tbody id="product-table">
+          <tr>
+            <td>
+              <input type="text" />
+            </td>
+            <td>
+              <input type="number" />
+            </td>
+            <td>
+              <input type="number" />
+            </td>
+            <td>
+              <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>
+      <br />
+      <label for="tip">Tip percentage:</label>
+      <input type="number" id="tip" />
+      <br />
+      <button class="btn-success" id="calculate">Calculate</button>
+      <button class="btn-danger" id="clean">Clean</button>
+      <br />
+      <label for="subtotal">Subtotal:</label>
+      <span id="subtotal"></span>
+      <br />
+      <label for="final-tip">Tip:</label>
+      <span id="final-tip"></span>
+      <br />
+      <label for="total">Total:</label>
+      <span id="total"></span>
     </div>
     <script src="index.js"></script>
-</body>
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/projects/tip-calculator/index.js b/projects/tip-calculator/index.js
index 76ac3a1..28a3716 100644
--- a/projects/tip-calculator/index.js
+++ b/projects/tip-calculator/index.js
@@ -1,12 +1,5 @@
-const productOneInput = document.getElementById("product-one");
-const priceOneInput = document.getElementById("price-one");
-const unitOneInput = document.getElementById("unit-one");
-const moneyOneSpan = document.getElementById("money-one");
-
-const productTwoInput = document.getElementById("product-two");
-const priceTwoInput = document.getElementById("price-two");
-const unitTwoInput = document.getElementById("unit-two");
-const moneyTwoSpan = document.getElementById("money-two");
+const productTable = document.getElementById("product-table");
+const productRows = productTable.children;
 
 const tipInput = document.getElementById("tip");
 
@@ -17,30 +10,29 @@ const subtotalSpan = document.getElementById("subtotal");
 const finalTipSpan = document.getElementById("final-tip");
 const totalSpan = document.getElementById("total");
 
-function calculateFirst() {
-  const priceOneValue = priceOneInput.value;
-  const unitOneValue = unitOneInput.value;
-  const priceOneTotalValue = priceOneValue * unitOneValue;
-  moneyOneSpan.innerText = priceOneTotalValue;
+function calculateRow(row) {
+  const priceValue = productRows[row].children[1].firstElementChild.value;
+  const unitValue = productRows[row].children[2].firstElementChild.value;
+  const totalValue = priceValue * unitValue;
+  const moneySpan = productRows[row].children[3].firstElementChild;
+  moneySpan.innerText = totalValue;
 }
 
 function calculateTotal() {
-  const priceOneValue = priceOneInput.value;
-  const unitOneValue = unitOneInput.value;
-  const priceOneTotalValue = priceOneValue * unitOneValue;
-
-  const priceTwoValue = priceTwoInput.value;
-  const unitTwoValue = unitTwoInput.value;
-  const priceTwoTotalValue = priceTwoValue * unitTwoValue;
+  let subTotal = 0;
+  for (let row = 0; row < productRows.length; row++) {
+    const priceValue = productRows[row].children[1].firstElementChild.value;
+    const unitValue = productRows[row].children[2].firstElementChild.value;
+    subTotal += priceValue * unitValue;
+  }
 
-  const billValue = priceOneTotalValue + priceTwoTotalValue;
-  subtotalSpan.innerText = billValue;
+  subtotalSpan.innerText = subTotal;
 
   const tipValue = tipInput.value;
-  232;
+
   if (tipValue < 20) {
-    const finalTipValue = (billValue * tipValue) / 100;
-    const totalValue = billValue * (1 + tipValue / 100);
+    const finalTipValue = (subTotal * tipValue) / 100;
+    const totalValue = subTotal * (1 + tipValue / 100);
     finalTipSpan.innerText = finalTipValue.toFixed(2);
     totalSpan.innerText = totalValue.toFixed(2);
     finalTipSpan.classList.remove("error-highlight");
@@ -54,24 +46,25 @@ function calculateTotal() {
 }
 
 function cleanTotal() {
-  productOneInput.value = null;
-  priceOneInput.value = null;
-  unitOneInput.value = null;
-  moneyOneSpan.innerText = "";
-
-  productTwoInput.value = null;
-  priceTwoInput.value = null;
-  unitTwoInput.value = null;
-  moneyTwoSpan.innerText = "";
+  for (let row = 0; row < productRows.length; row++) {
+    productRows[row].children[0].firstElementChild.value = null;
+    productRows[row].children[1].firstElementChild.value = null;
+    productRows[row].children[2].firstElementChild.value = null;
+    productRows[row].children[3].firstElementChild.innerText = null;
+  }
 
   tipInput.value = null;
-  subtotalSpan.innerText = "";
-  finalTipSpan.innerText = "";
-  totalSpan.innerText = "";
+  subtotalSpan.innerText = null;
+  finalTipSpan.innerText = null;
+  totalSpan.innerText = null;
 }
 
-priceOneInput.addEventListener("focusout", calculateFirst);
-unitOneInput.addEventListener("focusout", calculateFirst);
+for (let row = 0; row < productRows.length; row++) {
+  const priceInput = productRows[row].children[1].firstElementChild;
+  const unitInput = productRows[row].children[2].firstElementChild;
+  priceInput.addEventListener("focusout", () => calculateRow(row));
+  unitInput.addEventListener("focusout", () => calculateRow(row));
+}
 
 btnCalculate.addEventListener("click", calculateTotal);
 btnClean.addEventListener("click", cleanTotal);

From 52c98f19345814898adbc3dc355be9e36e33527b Mon Sep 17 00:00:00 2001
From: Jesus Angel <jesus.angel.9703@gmail.com>
Date: Thu, 31 Oct 2024 20:21:19 -0500
Subject: [PATCH 09/14] Create AddProduct button

---
 projects/tip-calculator/index.html | 15 +--------------
 projects/tip-calculator/index.js   | 31 ++++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/projects/tip-calculator/index.html b/projects/tip-calculator/index.html
index f012241..5eac78d 100644
--- a/projects/tip-calculator/index.html
+++ b/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" />
diff --git a/projects/tip-calculator/index.js b/projects/tip-calculator/index.js
index 28a3716..3cca6d2 100644
--- a/projects/tip-calculator/index.js
+++ b/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);

From b8b7b41f7f7bd6a7907524a1f4b5f9a37955ee87 Mon Sep 17 00:00:00 2001
From: Jesus Angel <jesus.angel.9703@gmail.com>
Date: Thu, 31 Oct 2024 21:23:36 -0500
Subject: [PATCH 10/14] Add remove button in table

---
 projects/tip-calculator/index.html |  4 ++++
 projects/tip-calculator/index.js   | 37 +++++++++++++++++++-----------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/projects/tip-calculator/index.html b/projects/tip-calculator/index.html
index 5eac78d..96e9bf9 100644
--- a/projects/tip-calculator/index.html
+++ b/projects/tip-calculator/index.html
@@ -18,6 +18,7 @@ <h1>Tip Calculator</h1>
             <th>Price</th>
             <th>Unit</th>
             <th>Money</th>
+            <th>Action</th>
           </tr>
         </thead>
         <tbody id="product-table">
@@ -34,6 +35,9 @@ <h1>Tip Calculator</h1>
             <td>
               <span></span>
             </td>
+            <td>
+              <button class="btn-danger">Remove</button>
+            </td>
           </tr>
         </tbody>
       </table>
diff --git a/projects/tip-calculator/index.js b/projects/tip-calculator/index.js
index 3cca6d2..34003ea 100644
--- a/projects/tip-calculator/index.js
+++ b/projects/tip-calculator/index.js
@@ -11,11 +11,7 @@ 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;
+function addRow() {
   const htmlString = `
             <td>
               <input type="text" />
@@ -29,22 +25,32 @@ function addProduct() {
             <td>
               <span></span>
             </td>
+            <td>
+              <button class="btn-danger">Remove</button>
+            </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));
+  const btnRemove = row.children[4].firstElementChild;
+  priceInput.addEventListener("focusout", () => calculateRow(row));
+  unitInput.addEventListener("focusout", () => calculateRow(row));
+  btnRemove.addEventListener("click", () => removeRow(row));
+
   productTable.appendChild(row);
 }
 
+function removeRow(row) {
+  productTable.removeChild(row);
+}
+
 function calculateRow(row) {
-  const priceValue = productRows[row].children[1].firstElementChild.value;
-  const unitValue = productRows[row].children[2].firstElementChild.value;
+  const priceValue = row.children[1].firstElementChild.value;
+  const unitValue = row.children[2].firstElementChild.value;
   const totalValue = priceValue * unitValue;
-  const moneySpan = productRows[row].children[3].firstElementChild;
+  const moneySpan = row.children[3].firstElementChild;
   moneySpan.innerText = totalValue;
 }
 
@@ -89,13 +95,16 @@ function cleanTotal() {
   totalSpan.innerText = null;
 }
 
-for (let row = 0; row < productRows.length; row++) {
-  const priceInput = productRows[row].children[1].firstElementChild;
-  const unitInput = productRows[row].children[2].firstElementChild;
+for (let rowNumber = 0; rowNumber < productRows.length; rowNumber++) {
+  const row = productRows[rowNumber];
+  const priceInput = row.children[1].firstElementChild;
+  const unitInput = row.children[2].firstElementChild;
+  const btnRemove = row.children[4].firstElementChild;
   priceInput.addEventListener("focusout", () => calculateRow(row));
   unitInput.addEventListener("focusout", () => calculateRow(row));
+  btnRemove.addEventListener("click", () => removeRow(row));
 }
 
-btnAddProduct.addEventListener("click", addProduct);
+btnAddProduct.addEventListener("click", addRow);
 btnCalculate.addEventListener("click", calculateTotal);
 btnClean.addEventListener("click", cleanTotal);

From 24f65371a64626a236d380c1f23be0fe37523526 Mon Sep 17 00:00:00 2001
From: Jesus Angel <jesus.angel.9703@gmail.com>
Date: Mon, 25 Nov 2024 12:18:59 -0500
Subject: [PATCH 11/14] Add display json console

---
 projects/tip-calculator/index.html |  2 +-
 projects/tip-calculator/index.js   | 11 +++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/projects/tip-calculator/index.html b/projects/tip-calculator/index.html
index 96e9bf9..a4a3aa8 100644
--- a/projects/tip-calculator/index.html
+++ b/projects/tip-calculator/index.html
@@ -14,7 +14,7 @@ <h1>Tip Calculator</h1>
       <table>
         <thead>
           <tr>
-            <th>Product</th>
+            <th>Name</th>
             <th>Price</th>
             <th>Unit</th>
             <th>Money</th>
diff --git a/projects/tip-calculator/index.js b/projects/tip-calculator/index.js
index 34003ea..01a77a9 100644
--- a/projects/tip-calculator/index.js
+++ b/projects/tip-calculator/index.js
@@ -79,6 +79,17 @@ function calculateTotal() {
     finalTipSpan.classList.add("error-highlight");
     totalSpan.classList.add("error-highlight");
   }
+
+  const report = { products: [], tip: tipValue };
+
+  for (let row = 0; row < productRows.length; row++) {
+    const nameValue = productRows[row].children[0].firstElementChild.value;
+    const priceValue = productRows[row].children[1].firstElementChild.value;
+    const unitValue = productRows[row].children[2].firstElementChild.value;
+    const product = { name: nameValue, price: priceValue, unit: unitValue };
+    report.products.push(product);
+  }
+  console.log(report);
 }
 
 function cleanTotal() {

From d6c1dbac109387a316717ab7eb23fdf23b9250f5 Mon Sep 17 00:00:00 2001
From: Jesus Angel <jesus.angel.9703@gmail.com>
Date: Tue, 3 Dec 2024 16:12:39 -0500
Subject: [PATCH 12/14] Modify report

---
 projects/tip-calculator/index.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/projects/tip-calculator/index.js b/projects/tip-calculator/index.js
index 01a77a9..6864347 100644
--- a/projects/tip-calculator/index.js
+++ b/projects/tip-calculator/index.js
@@ -80,12 +80,16 @@ function calculateTotal() {
     totalSpan.classList.add("error-highlight");
   }
 
-  const report = { products: [], tip: tipValue };
+  const report = { products: [], tip: parseFloat(tipValue) };
 
   for (let row = 0; row < productRows.length; row++) {
     const nameValue = productRows[row].children[0].firstElementChild.value;
-    const priceValue = productRows[row].children[1].firstElementChild.value;
-    const unitValue = productRows[row].children[2].firstElementChild.value;
+    const priceValue = parseFloat(
+      productRows[row].children[1].firstElementChild.value
+    );
+    const unitValue = parseInt(
+      productRows[row].children[2].firstElementChild.value
+    );
     const product = { name: nameValue, price: priceValue, unit: unitValue };
     report.products.push(product);
   }

From d321b8fd58e59f6e5562538d3a5bd9c5152c5539 Mon Sep 17 00:00:00 2001
From: Jesus Angel <jesus.angel.9703@gmail.com>
Date: Tue, 3 Dec 2024 19:47:51 -0500
Subject: [PATCH 13/14] Send report on calculate

---
 projects/tip-calculator/index.js | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/projects/tip-calculator/index.js b/projects/tip-calculator/index.js
index 6864347..39cd8db 100644
--- a/projects/tip-calculator/index.js
+++ b/projects/tip-calculator/index.js
@@ -93,9 +93,28 @@ function calculateTotal() {
     const product = { name: nameValue, price: priceValue, unit: unitValue };
     report.products.push(product);
   }
-  console.log(report);
+  sendReport(report);
 }
 
+const sendReport = (report) => {
+  const url = "http://127.0.0.1:8000/report/";
+
+  fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(report),
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      console.log("Success:", data);
+    })
+    .catch((error) => {
+      console.error("Error:", error);
+    });
+};
+
 function cleanTotal() {
   for (let row = 0; row < productRows.length; row++) {
     productRows[row].children[0].firstElementChild.value = null;

From 19257d8c5e443582270824af7aa2ad46331658dc Mon Sep 17 00:00:00 2001
From: Jesus Angel <jesus.angel.9703@gmail.com>
Date: Mon, 9 Dec 2024 10:50:59 -0500
Subject: [PATCH 14/14] Add correspondence between js and py to save the orders
 in db

---
 projects/tip-calculator/index.js | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/projects/tip-calculator/index.js b/projects/tip-calculator/index.js
index 39cd8db..7be25f1 100644
--- a/projects/tip-calculator/index.js
+++ b/projects/tip-calculator/index.js
@@ -80,31 +80,30 @@ function calculateTotal() {
     totalSpan.classList.add("error-highlight");
   }
 
-  const report = { products: [], tip: parseFloat(tipValue) };
+  const order = { products: [], tip: parseFloat(tipValue) };
 
   for (let row = 0; row < productRows.length; row++) {
-    const nameValue = productRows[row].children[0].firstElementChild.value;
-    const priceValue = parseFloat(
-      productRows[row].children[1].firstElementChild.value
+    const productId = parseInt(
+      productRows[row].children[0].firstElementChild.value
     );
-    const unitValue = parseInt(
+    const units = parseInt(
       productRows[row].children[2].firstElementChild.value
     );
-    const product = { name: nameValue, price: priceValue, unit: unitValue };
-    report.products.push(product);
+    const product = { productId, units };
+    order.products.push(product);
   }
-  sendReport(report);
+  sendOrder(order);
 }
 
-const sendReport = (report) => {
-  const url = "http://127.0.0.1:8000/report/";
+const sendOrder = (order) => {
+  const url = "http://127.0.0.1:8000/order/";
 
   fetch(url, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
     },
-    body: JSON.stringify(report),
+    body: JSON.stringify(order),
   })
     .then((response) => response.json())
     .then((data) => {