adding tip calculator implementation with Readme

17GuptaIshita · sumn2u · commit ef9ea6a3b3a9 · 2025-10-07T06:59:57.000-04:00
diff --git a/examples/Tip_Calculator/README.md b/examples/Tip_Calculator/README.md
@@ -0,0 +1,28 @@
+# Tip Calculator Example
+
+This is a simple Tip Calculator web app, created to help beginners practice JavaScript math operations, DOM manipulation, and event handling.
+
+## Features
+
+- Enter the bill amount
+- Select a tip percentage (10%, 20%, 30%) or enter a custom percentage
+- Optionally split the bill among multiple people
+- Displays tip, total, and per-person amount dynamically
+- Basic input validation and feedback
+
+## How to Run
+
+1. Open `index.html` in your browser.
+2. Enter a bill amount and choose a tip percentage.
+3. (Optional) Set the number of people to split the bill.
+4. The calculated values update instantly in the results area.
+
+## Files
+
+- `index.html` – Main HTML structure
+- `style.css` – Styling and transitions
+- `script.js` – App logic and interactivity
+
+---
+
+Feel free to improve the design or add features!
diff --git a/examples/Tip_Calculator/index.html b/examples/Tip_Calculator/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tip Calculator Example</title>
+    <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+    <div class="container">
+        <h1>Tip Calculator</h1>
+        <label for="bill">Bill Amount:</label>
+        <input type="number" id="bill" min="0" placeholder="Enter bill amount" />
+
+        <label>Tip Percentage:</label>
+        <div class="tips">
+            <button class="tip-btn" data-tip="10">10%</button>
+            <button class="tip-btn" data-tip="20">20%</button>
+            <button class="tip-btn" data-tip="30">30%</button>
+            <input type="number" id="customTip" min="0" max="100" placeholder="Custom %" />
+        </div>
+
+        <label for="split">Split Bill (people):</label>
+        <input type="number" id="split" min="1" value="1" />
+
+        <div id="results">
+            <p>Tip: ₹<span id="tip">0.00</span></p>
+            <p>Total: ₹<span id="total">0.00</span></p>
+            <p>Each Pays: ₹<span id="each">0.00</span></p>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/examples/Tip_Calculator/script.js b/examples/Tip_Calculator/script.js
@@ -0,0 +1,60 @@
+// Tip Calculator Logic
+
+const billInput = document.getElementById('bill');
+const tipButtons = document.querySelectorAll('.tip-btn');
+const customTipInput = document.getElementById('customTip');
+const splitInput = document.getElementById('split');
+const tipDisplay = document.getElementById('tip');
+const totalDisplay = document.getElementById('total');
+const eachDisplay = document.getElementById('each');
+const resultsDiv = document.getElementById('results');
+
+let selectedTip = 10;
+
+// Event listeners for tip buttons
+tipButtons.forEach(btn => {
+  btn.addEventListener('click', () => {
+    tipButtons.forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    selectedTip = parseFloat(btn.dataset.tip);
+    customTipInput.value = '';
+    calculate();
+  });
+});
+
+// Custom tip input
+customTipInput.addEventListener('input', () => {
+  tipButtons.forEach(b => b.classList.remove('active'));
+  selectedTip = parseFloat(customTipInput.value) || 0;
+  calculate();
+});
+
+// Bill, split inputs
+billInput.addEventListener('input', calculate);
+splitInput.addEventListener('input', calculate);
+
+function calculate() {
+  const bill = parseFloat(billInput.value);
+  const people = Math.max(1, parseInt(splitInput.value, 10) || 1);
+
+  if (isNaN(bill) || bill <= 0 || isNaN(selectedTip) || selectedTip < 0) {
+    tipDisplay.textContent = "0.00";
+    totalDisplay.textContent = "0.00";
+    eachDisplay.textContent = "0.00";
+    resultsDiv.style.background = '#fee2e2';
+    return;
+  }
+
+  const tip = bill * selectedTip / 100;
+  const total = bill + tip;
+  const each = total / people;
+
+  tipDisplay.textContent = tip.toFixed(2);
+  totalDisplay.textContent = total.toFixed(2);
+  eachDisplay.textContent = each.toFixed(2);
+
+  resultsDiv.style.background = '#f1f5f9';
+}
+
+// Initial calculation on load
+calculate();
diff --git a/examples/Tip_Calculator/style.css b/examples/Tip_Calculator/style.css
@@ -0,0 +1,74 @@
+body {
+    font-family: Arial, sans-serif;
+    background: #f3f4f6;
+    margin: 0;
+    padding: 0;
+}
+
+.container {
+    background: #fff;
+    max-width: 350px;
+    margin: 50px auto;
+    padding: 24px 16px;
+    border-radius: 10px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
+}
+
+h1 {
+    margin-bottom: 20px;
+    font-size: 1.6em;
+    text-align: center;
+}
+
+label {
+    display: block;
+    margin: 12px 0 4px;
+}
+
+input[type="number"] {
+    width: 100%;
+    padding: 8px;
+    margin-bottom: 10px;
+    border-radius: 5px;
+    border: 1px solid #ddd;
+}
+
+.tips {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 10px;
+}
+
+.tip-btn {
+    flex: 1;
+    padding: 8px 0;
+    background: #e5e7eb;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+.tip-btn.active,
+.tip-btn:hover {
+    background: #38bdf8;
+    color: #fff;
+}
+
+#customTip {
+    flex: 1;
+    padding: 8px;
+}
+
+#results {
+    margin-top: 18px;
+    background: #f1f5f9;
+    padding: 12px;
+    border-radius: 6px;
+    transition: background 0.4s;
+}
+
+#results p {
+    margin: 8px 0;
+    font-size: 1.05em;
+}
