Add comments

Author: lulunac27a

index.html

@@ -15,7 +15,9 @@ <h1>Tip Calculator</h1>
             step="0.01"
             required
         /><br />
-        <button id="calculate">Calculate Tip Amount</button>
+        <!--button to calculate total amount--><button id="calculate">
+            Calculate Tip Amount
+        </button>
         <div id="output"></div>
         <script src="main.js"></script>
     </body>

main.js

@@ -1,10 +1,11 @@
-const amountInput = document.getElementById("amount");
-const tipPercentInput = document.getElementById("tip-percent");
-const calculateButton = document.getElementById("calculate");
-const outputText = document.getElementById("output");
+const amountInput = document.getElementById("amount"); //amount input
+const tipPercentInput = document.getElementById("tip-percent"); //tip percent input
+const calculateButton = document.getElementById("calculate"); //calculate button
+const outputText = document.getElementById("output"); //output text
 calculateButton.addEventListener("click", () => {
-    let amount = parseFloat(amountInput.value);
-    let tipPercent = parseFloat(tipPercentInput.value);
-    let totalAmount = amount * (1 + tipPercent / 100);
-    outputText.innerText = `Total Amount: ${totalAmount.toFixed(2)}`;
+    //when calculate button is pressed
+    let amount = parseFloat(amountInput.value); //get amount value
+    let tipPercent = parseFloat(tipPercentInput.value); //get tip percent value
+    let totalAmount = amount * (1 + tipPercent / 100); //get total billing amount
+    outputText.innerText = `Total Amount: ${totalAmount.toFixed(2)}`; //format total billing amount
 });