Skip to content

Commit ef9ea6a

Browse files
17GuptaIshitasumn2u
17GuptaIshita
authored and
sumn2u
committed
adding tip calculator implementation with Readme
1 parent b8c75ee commit ef9ea6a

4 files changed

Lines changed: 199 additions & 0 deletions

File tree

‎examples/Tip_Calculator/README.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# Tip Calculator Example
2+
3+
This is a simple Tip Calculator web app, created to help beginners practice JavaScript math operations, DOM manipulation, and event handling.
4+
5+
## Features
6+
7+
- Enter the bill amount
8+
- Select a tip percentage (10%, 20%, 30%) or enter a custom percentage
9+
- Optionally split the bill among multiple people
10+
- Displays tip, total, and per-person amount dynamically
11+
- Basic input validation and feedback
12+
13+
## How to Run
14+
15+
1. Open `index.html` in your browser.
16+
2. Enter a bill amount and choose a tip percentage.
17+
3. (Optional) Set the number of people to split the bill.
18+
4. The calculated values update instantly in the results area.
19+
20+
## Files
21+
22+
- `index.html` – Main HTML structure
23+
- `style.css` – Styling and transitions
24+
- `script.js` – App logic and interactivity
25+
26+
---
27+
28+
Feel free to improve the design or add features!

‎examples/Tip_Calculator/index.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Tip Calculator Example</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<h1>Tip Calculator</h1>
14+
<label for="bill">Bill Amount:</label>
15+
<input type="number" id="bill" min="0" placeholder="Enter bill amount" />
16+
17+
<label>Tip Percentage:</label>
18+
<div class="tips">
19+
<button class="tip-btn" data-tip="10">10%</button>
20+
<button class="tip-btn" data-tip="20">20%</button>
21+
<button class="tip-btn" data-tip="30">30%</button>
22+
<input type="number" id="customTip" min="0" max="100" placeholder="Custom %" />
23+
</div>
24+
25+
<label for="split">Split Bill (people):</label>
26+
<input type="number" id="split" min="1" value="1" />
27+
28+
<div id="results">
29+
<p>Tip: ₹<span id="tip">0.00</span></p>
30+
<p>Total: ₹<span id="total">0.00</span></p>
31+
<p>Each Pays: ₹<span id="each">0.00</span></p>
32+
</div>
33+
</div>
34+
<script src="script.js"></script>
35+
</body>
36+
37+
</html>

‎examples/Tip_Calculator/script.js‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
// Tip Calculator Logic
2+
3+
const billInput = document.getElementById('bill');
4+
const tipButtons = document.querySelectorAll('.tip-btn');
5+
const customTipInput = document.getElementById('customTip');
6+
const splitInput = document.getElementById('split');
7+
const tipDisplay = document.getElementById('tip');
8+
const totalDisplay = document.getElementById('total');
9+
const eachDisplay = document.getElementById('each');
10+
const resultsDiv = document.getElementById('results');
11+
12+
let selectedTip = 10;
13+
14+
// Event listeners for tip buttons
15+
tipButtons.forEach(btn => {
16+
btn.addEventListener('click', () => {
17+
tipButtons.forEach(b => b.classList.remove('active'));
18+
btn.classList.add('active');
19+
selectedTip = parseFloat(btn.dataset.tip);
20+
customTipInput.value = '';
21+
calculate();
22+
});
23+
});
24+
25+
// Custom tip input
26+
customTipInput.addEventListener('input', () => {
27+
tipButtons.forEach(b => b.classList.remove('active'));
28+
selectedTip = parseFloat(customTipInput.value) || 0;
29+
calculate();
30+
});
31+
32+
// Bill, split inputs
33+
billInput.addEventListener('input', calculate);
34+
splitInput.addEventListener('input', calculate);
35+
36+
function calculate() {
37+
const bill = parseFloat(billInput.value);
38+
const people = Math.max(1, parseInt(splitInput.value, 10) || 1);
39+
40+
if (isNaN(bill) || bill <= 0 || isNaN(selectedTip) || selectedTip < 0) {
41+
tipDisplay.textContent = "0.00";
42+
totalDisplay.textContent = "0.00";
43+
eachDisplay.textContent = "0.00";
44+
resultsDiv.style.background = '#fee2e2';
45+
return;
46+
}
47+
48+
const tip = bill * selectedTip / 100;
49+
const total = bill + tip;
50+
const each = total / people;
51+
52+
tipDisplay.textContent = tip.toFixed(2);
53+
totalDisplay.textContent = total.toFixed(2);
54+
eachDisplay.textContent = each.toFixed(2);
55+
56+
resultsDiv.style.background = '#f1f5f9';
57+
}
58+
59+
// Initial calculation on load
60+
calculate();

‎examples/Tip_Calculator/style.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
background: #f3f4f6;
4+
margin: 0;
5+
padding: 0;
6+
}
7+
8+
.container {
9+
background: #fff;
10+
max-width: 350px;
11+
margin: 50px auto;
12+
padding: 24px 16px;
13+
border-radius: 10px;
14+
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
15+
}
16+
17+
h1 {
18+
margin-bottom: 20px;
19+
font-size: 1.6em;
20+
text-align: center;
21+
}
22+
23+
label {
24+
display: block;
25+
margin: 12px 0 4px;
26+
}
27+
28+
input[type="number"] {
29+
width: 100%;
30+
padding: 8px;
31+
margin-bottom: 10px;
32+
border-radius: 5px;
33+
border: 1px solid #ddd;
34+
}
35+
36+
.tips {
37+
display: flex;
38+
gap: 8px;
39+
margin-bottom: 10px;
40+
}
41+
42+
.tip-btn {
43+
flex: 1;
44+
padding: 8px 0;
45+
background: #e5e7eb;
46+
border: none;
47+
border-radius: 5px;
48+
cursor: pointer;
49+
transition: background 0.2s;
50+
}
51+
52+
.tip-btn.active,
53+
.tip-btn:hover {
54+
background: #38bdf8;
55+
color: #fff;
56+
}
57+
58+
#customTip {
59+
flex: 1;
60+
padding: 8px;
61+
}
62+
63+
#results {
64+
margin-top: 18px;
65+
background: #f1f5f9;
66+
padding: 12px;
67+
border-radius: 6px;
68+
transition: background 0.4s;
69+
}
70+
71+
#results p {
72+
margin: 8px 0;
73+
font-size: 1.05em;
74+
}

0 commit comments

Comments
 (0)