Skip to content

Commit 1dd0f14

Browse files
SamarthTechSamarthTech
authored
Merge pull request #345 from KoustavDeveloper/tip-calculator
added Tip Calculator
2 parents b68cbe9 + 3a774dc commit 1dd0f14

File tree

5 files changed

+306
-0
lines changed

5 files changed

+306
-0
lines changed

‎tip-calculator/LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2024 Koustav Singh
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎tip-calculator/README.md‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
# 💰 Tip Calculator
2+
3+
A sleek, modern tip calculator that helps you quickly calculate the total bill amount including tip. Built with vanilla JavaScript, this calculator features a clean UI, input validation, and keyboard support.
4+
5+
6+
## ✨ Features
7+
8+
- 🧮 Instant tip calculations
9+
- 💻 Clean, responsive design
10+
- ⌨️ Keyboard support (Enter key)
11+
- ❌ Input validation with error messages
12+
- 📱 Mobile-friendly interface
13+
- 🎨 Modern UI with smooth animations
14+
- 🔢 Supports decimal values for precise calculations
15+
16+
17+
## 🛠️ Installation
18+
19+
1. Clone the repository:
20+
```bash
21+
git clone https://github.com/KoustavDeveloper/tip-calculator.git
22+
```
23+
24+
2. Navigate to the project directory:
25+
```bash
26+
cd tip-calculator
27+
```
28+
29+
3. Open `index.html` in your preferred browser
30+
31+
That's it! No build process or dependencies required.
32+
33+
## 💻 Usage
34+
35+
1. Enter the bill amount in the first input field
36+
2. Enter the desired tip percentage in the second input field
37+
3. Click "Calculate" or press Enter
38+
4. The total amount (bill + tip) will be displayed below
39+
40+
## 🔧 Technical Details
41+
42+
### File Structure
43+
```
44+
tip-calculator/
45+
│
46+
├── index.html # Main HTML file
47+
├── style.css # Styles and animations
48+
├── script.js # JavaScript logic
49+
└── README.md # Project documentation
50+
```
51+
52+
### Technologies Used
53+
- HTML5
54+
- CSS3
55+
- Flexbox for layout
56+
- CSS transitions for animations
57+
- Mobile-first responsive design
58+
- Vanilla JavaScript
59+
- DOM manipulation
60+
- Event handling
61+
- Input validation
62+
63+
## ⚡ Performance
64+
65+
- Lightweight: No external dependencies
66+
- Fast loading: Single page application
67+
- Optimized: Minimal DOM operations
68+
69+
## 🎯 Browser Support
70+
71+
- ✅ Chrome (latest)
72+
- ✅ Firefox (latest)
73+
- ✅ Safari (latest)
74+
- ✅ Edge (latest)
75+
- ✅ Opera (latest)
76+
77+
## 🤝 Contributing
78+
79+
1. Fork the repository
80+
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
81+
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
82+
4. Push to the branch (`git push origin feature/AmazingFeature`)
83+
5. Open a Pull Request
84+
85+
## 📝 Future Enhancements
86+
87+
- [ ] Add split bill functionality
88+
- [ ] Save calculation history
89+
- [ ] Dark mode support
90+
- [ ] Multiple currency support
91+
- [ ] Custom tip presets
92+
- [ ] PWA support for offline use
93+
94+
## 📜 License
95+
96+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
97+
98+
## 👏 Acknowledgments
99+
100+
- Design inspired by modern UI/UX principles
101+
- Icons provided by [Font Awesome](https://fontawesome.com)
102+
- Color scheme based on Material Design
103+
104+
## 📧 Contact
105+
106+
[Koustav Singh](https://github.com/KoustavDeveloper/)
107+
108+
[Project Link](https://github.com/KoustavDeveloper/tip-calculator)
109+
110+
---
111+
112+
Made with ❤️ by [Koustav Singh](https://github.com/KoustavDeveloper/)

‎tip-calculator/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Tip Calculator</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>Tip Calculator</h1>
12+
<div class="input-group">
13+
<label for="bill">Bill Amount ($)</label>
14+
<input type="number" id="bill" min="0" step="0.01" placeholder="Enter bill amount">
15+
<div id="billError" class="error">Please enter a valid bill amount</div>
16+
</div>
17+
<div class="input-group">
18+
<label for="tip">Tip Percentage (%)</label>
19+
<input type="number" id="tip" min="0" max="100" step="1" placeholder="Enter tip percentage">
20+
<div id="tipError" class="error">Please enter a valid tip percentage (0-100)</div>
21+
</div>
22+
<button id="calculate">Calculate</button>
23+
<div class="result">
24+
Total: $<span id="total">0.00</span>
25+
</div>
26+
</div>
27+
<script src="script.js"></script>
28+
</body>
29+
</html>

‎tip-calculator/script.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
const btnEl = document.getElementById("calculate");
2+
const billInput = document.getElementById("bill");
3+
const tipInput = document.getElementById("tip");
4+
const totalSpan = document.getElementById("total");
5+
const billError = document.getElementById("billError");
6+
const tipError = document.getElementById("tipError");
7+
8+
function validateInputs() {
9+
let isValid = true;
10+
11+
// Validate bill amount
12+
const billValue = parseFloat(billInput.value);
13+
if (isNaN(billValue) || billValue < 0) {
14+
billError.style.display = "block";
15+
isValid = false;
16+
} else {
17+
billError.style.display = "none";
18+
}
19+
20+
// Validate tip percentage
21+
const tipValue = parseFloat(tipInput.value);
22+
if (isNaN(tipValue) || tipValue < 0 || tipValue > 100) {
23+
tipError.style.display = "block";
24+
isValid = false;
25+
} else {
26+
tipError.style.display = "none";
27+
}
28+
29+
return isValid;
30+
}
31+
32+
function calculateTotal() {
33+
if (!validateInputs()) {
34+
totalSpan.innerText = "0.00";
35+
return;
36+
}
37+
38+
const billValue = parseFloat(billInput.value);
39+
const tipValue = parseFloat(tipInput.value);
40+
const totalValue = billValue * (1 + tipValue / 100);
41+
totalSpan.innerText = totalValue.toFixed(2);
42+
}
43+
44+
// Add event listeners
45+
btnEl.addEventListener("click", calculateTotal);
46+
47+
// Calculate on Enter key press
48+
[billInput, tipInput].forEach(input => {
49+
input.addEventListener("keypress", (e) => {
50+
if (e.key === "Enter") {
51+
calculateTotal();
52+
}
53+
});
54+
55+
// Clear error message on input
56+
input.addEventListener("input", () => {
57+
validateInputs();
58+
});
59+
});

‎tip-calculator/style.css‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
background-color: #f2f2f2;
7+
font-family: "Helvetica", sans-serif;
8+
margin: 0;
9+
padding: 0;
10+
}
11+
12+
.container {
13+
background-color: white;
14+
max-width: 600px;
15+
margin: 100px auto;
16+
padding: 20px;
17+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
18+
border-radius: 10px;
19+
}
20+
21+
h1 {
22+
margin-top: 0;
23+
text-align: center;
24+
color: #333;
25+
}
26+
27+
.input-group {
28+
margin-bottom: 15px;
29+
}
30+
31+
label {
32+
display: block;
33+
margin-bottom: 5px;
34+
color: #555;
35+
}
36+
37+
input {
38+
padding: 10px;
39+
border: 1px solid #ccc;
40+
border-radius: 4px;
41+
width: 100%;
42+
font-size: 16px;
43+
}
44+
45+
input:focus {
46+
outline: none;
47+
border-color: #6c7bb4;
48+
box-shadow: 0 0 5px rgba(108, 123, 180, 0.3);
49+
}
50+
51+
button {
52+
background-color: #6c7bb4;
53+
color: white;
54+
padding: 12px;
55+
border: none;
56+
border-radius: 4px;
57+
cursor: pointer;
58+
width: 100%;
59+
font-size: 18px;
60+
text-transform: uppercase;
61+
transition: background-color 0.2s ease;
62+
}
63+
64+
button:hover {
65+
background-color: #5a68a3;
66+
}
67+
68+
.result {
69+
margin-top: 20px;
70+
text-align: center;
71+
}
72+
73+
#total {
74+
font-size: 24px;
75+
font-weight: bold;
76+
color: #6c7bb4;
77+
display: inline-block;
78+
}
79+
80+
.error {
81+
color: #ff4444;
82+
font-size: 14px;
83+
margin-top: 5px;
84+
display: none;
85+
}

0 commit comments

Comments
 (0)