js file update

index.html

@@ -20,38 +20,55 @@
     <h1>SPLI<span class="h1-span">TTER</span></h1>
     <div class="hero-container">
       <div class="section-left">
-        <form class="content">
+        <div class="content">
           <p class="left-ptag">Bill</p>
-          <input type="text" class="input-field input-1" />
-        </form>
-        <div class="content content-btn">
+          <input
+            type="number"
+            class="input-field input-1"
+            placeholder="0"
+            min="1"
+          />
+        </div>
+        <div class="content">
           <p class="left-ptag">Select Tip %</p>
           <div class="grid-btns">
-            <button class="btn">5%</button>
-            <button class="btn">10%</button>
-            <button class="btn">15%</button>
-            <button class="btn">25%</button>
-            <button class="btn">50%</button>
-            <input type="text" value="Custom" class="custom-btn" />
+            <button class="btn click-btn" value="5">5%</button>
+            <button class="btn click-btn" value="10">10%</button>
+            <button class="btn click-btn" value="15">15%</button>
+            <button class="btn click-btn" value="25">25%</button>
+            <button class="btn click-btn" value="50">50%</button>
+            <input
+              type="number"
+              class="custom-btn click-btn"
+              placeholder="Custom"
+              min="1"
+            />
           </div>
         </div>
-        <form class="content">
+        <div class="content">
           <p class="left-ptag">
-            Number of People<span class="error">Can't be zero</span>
+            Number of People<span class="error-span">Can't be zero</span>
           </p>
-          <input type="text" class="input-field input-2" />
-        </form>
+          <input
+            type="number"
+            class="input-field input-2"
+            placeholder="0"
+            min="1"
+          />
+        </div>
       </div>
       <div class="section-right">
         <div class="content-right">
           <p class="right-ptag">
             Tip Amount<span class="right-ptag-span">/ person</span>
           </p>
+          <span class="amount">$0.00</span>
         </div>
-        <div>
+        <div class="content-right">
           <p class="right-ptag">
             Total<span class="right-ptag-span">/ person</span>
           </p>
+          <span class="total">$0.00</span>
           <button class="reset-btn">Reset</button>
         </div>
       </div>

index.js

@@ -0,0 +1,111 @@
+const firstInputField = document.querySelector(".input-1");
+const secondInputField = document.querySelector(".input-2");
+const customNumber = document.querySelector(".custom-btn");
+const resetBtn = document.querySelector(".reset-btn");
+const tipAmount = document.querySelector(".amount");
+const tipTotal = document.querySelector(".total");
+const gridButtons = document.querySelector(".grid-btns");
+
+// function validateInputs(inputs) {
+//   inputs.forEach((input) => {
+//     if (input.value.trim() === "") {
+//       showError();
+//       console.log("error");
+//     } else {
+//       showSuccess();
+//       console.log("success");
+//     }
+//   });
+// }
+// function showError() {
+//   document.querySelector(".input-2").classList.add("error");
+//   // secondInputField.;
+// }
+// function showSuccess() {
+//   document.querySelector("input").classList.add("success");
+// }
+function calcBill(amount, people) {
+  return (parseFloat(amount / people) + parseFloat(tipAmountPerPerson)).toFixed(
+    2
+  );
+}
+
+function calcTip(percentageNum, amount, people) {
+  // let percentAmount = ((percentageNum / 100) * amount).toFixed(2);
+  // let percentBillPerPerson = amount + percentAmount / 2;
+  // let totalPerPerson = (((percentageNum / 100) * amount) / people).toFixed(2);
+  tipAmountPerPerson = (((percentageNum / 100) * amount) / people).toFixed(2);
+  tipAmount.textContent = `$${tipAmountPerPerson}`;
+  tipTotal.textContent = `$${calcBill(amount, people)}`;
+}
+
+gridButtons.addEventListener("click", function (e) {
+  e.preventDefault();
+  const percentageNum = e.target.value;
+  const amount = firstInputField.value;
+  const numPeople = secondInputField.value;
+
+  if (e.target.classList.contains("click-btn")) {
+    if (amount === "" || numPeople === "") {
+      tipAmount.textContent = `$0.00`;
+      tipTotal.textContent = `$0.00`;
+      validateInputs([amount, numPeople]);
+    } else {
+      calcTip(percentageNum, amount, numPeople);
+    }
+  }
+});
+
+resetBtn.addEventListener("click", function (e) {
+  e.preventDefault();
+  tipAmount.textContent = "$0.00";
+  tipTotal.textContent = "$0.00";
+  firstInputField.value = "";
+  secondInputField.value = "";
+  customNumber.value = "";
+});
+
+// function calcPercentage(percentageNum, amount) {
+//   return ((percentageNum / 100) * amount).toFixed(2);
+// }
+
+// const amount = firstInputField.value.trim();
+// const customized = customBtn.value.trim();
+// const numPeople = secondInputField.value.trim();
+
+// //Check to match the target element clicked
+// if (e.target.classList.contains("btn")) {
+//   const btnId = e.target.id;
+//   console.log(btnId);
+
+//   if (btnId === "five") {
+//     let fivePercent = calcPercentage(5, amount);
+//     tipAmount.textContent = `$${fivePercent}`;
+//     let fivePercentTotal = calcTotal(customized, amount, numPeople);
+//     tipTotal.textContent = `$${fivePercentTotal}`;
+//   }
+//   if (btnId === "ten") {
+//     let tenPercent = calcPercentage(10, amount);
+//     tipAmount.textContent = `$${tenPercent}`;
+//     let tenPercentTotal = calcTotal(10, amount, numPeople);
+//     tipTotal.textContent = `$${tenPercentTotal}`;
+//   }
+//   if (btnId === "fifteen") {
+//     let fifteenPercent = calcPercentage(15, amount);
+//     tipAmount.textContent = `$${fifteenPercent}`;
+//     let fifteenPercentTotal = calcTotal(15, amount, numPeople);
+//     tipTotal.textContent = `$${fifteenPercentTotal}`;
+//   }
+//   if (btnId === "twenty-five") {
+//     let twentyFivePercent = calcPercentage(25, amount);
+//     tipAmount.textContent = `$${twentyFivePercent}`;
+//     let twentyFivePercentTotal = calcTotal(25, amount, numPeople);
+//     tipTotal.textContent = `$${twentyFivePercentTotal}`;
+//   }
+//   if (btnId === "fifty") {
+//     let fiftyPercent = calcPercentage(50, amount);
+//     tipAmount.textContent = `$${fiftyPercent}`;
+//     let fiftyPercentTotal = calcTotal(50, amount, numPeople);
+//     tipTotal.textContent = `$${fiftyPercentTotal}`;
+//   }
+// }

style.css

@@ -87,12 +87,17 @@ h1 {
 input:focus {
   outline: none;
 }
-.error {
-  visibility: hidden;
+.error-span {
+  /* visibility: hidden; */
   color: orangered;
   float: right;
-
-  /* border: 2px solid orangered; */
+  margin-left: 1rem;
+}
+.error {
+  border: 2px solid orangered;
+}
+.success {
+  border: 2px solid green;
 }
 .grid-btns {
   width: 40%;
@@ -153,6 +158,14 @@ input:focus {
   color: var(--Dark-grayish-cyan);
   display: block;
 }
+.amount,
+.total {
+  color: var(--Dark-cyan);
+  display: block;
+  float: right;
+  margin-top: -2rem;
+  font-size: 20px;
+}
 .reset-btn {
   width: 100%;
   height: 2rem;