diff --git a/examples/Tip_Calculator/README.md b/examples/Tip_Calculator/README.md new file mode 100644 index 00000000..cb5510c2 --- /dev/null +++ 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 new file mode 100644 index 00000000..4e9f27ee --- /dev/null +++ b/examples/Tip_Calculator/index.html @@ -0,0 +1,37 @@ + + + + + + + Tip Calculator Example + + + + +
+

Tip Calculator

+ + + + +
+ + + + +
+ + + + +
+

Tip: ₹0.00

+

Total: ₹0.00

+

Each Pays: ₹0.00

+
+
+ + + + \ No newline at end of file diff --git a/examples/Tip_Calculator/script.js b/examples/Tip_Calculator/script.js new file mode 100644 index 00000000..65925947 --- /dev/null +++ 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(); \ No newline at end of file diff --git a/examples/Tip_Calculator/style.css b/examples/Tip_Calculator/style.css new file mode 100644 index 00000000..8f1af449 --- /dev/null +++ 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; +} \ No newline at end of file