Practical Projects

1<style>
2  body{font-family:system-ui;max-width:320px}
3  label{display:block;margin:10px 0 4px} input,select{width:100%;padding:8px}
4  #result{margin-top:16px;padding:12px;border-radius:10px;background:#eef2ff;font-weight:600}
5</style>
6<label for="bill">Bill amount (₹)</label>
7<input id="bill" type="number" min="0" value="1200">
8<label for="tip">Tip</label>
9<select id="tip"><option value="0.05">5%</option><option value="0.1" selected>10%</option><option value="0.15">15%</option></select>
10<label for="people">People</label>
11<input id="people" type="number" min="1" value="3">
12<div id="result"></div>
13

14<script>
15  const $ = id => document.getElementById(id);
16  const inr = n => n.toLocaleString('en-IN', { style: 'currency', currency: 'INR' });
17

18  function update() {
19    const bill = Number($('bill').value), tip = Number($('tip').value), people = Number($('people').value);
20    if (bill < 0 || people < 1) { $('result').textContent = 'Please enter a valid bill and at least 1 person.'; return; }
21    const total = bill * (1 + tip);
22    $('result').textContent = `Tip ${inr(bill * tip)} · Total ${inr(total)} · Each ${inr(total / people)}`;
23  }
24  ['bill', 'tip', 'people'].forEach(id => $(id).addEventListener('input', update));
25  update();
26</script>

Tip ₹120.00 · Total ₹1,320.00 · Each ₹440.00 — updating live as you change the inputs.