Change bill amount for product/price table

Author: jgangel

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">

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 = "";

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;