From 3a774dcf1dda36107a2e8c1f71af4d6af8ec8577 Mon Sep 17 00:00:00 2001 From: "Koustav.S" Date: Thu, 31 Oct 2024 11:32:21 +0530 Subject: [PATCH] added Tip Calculator 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. --- tip-calculator/LICENSE | 21 +++++++ tip-calculator/README.md | 112 ++++++++++++++++++++++++++++++++++++++ tip-calculator/index.html | 29 ++++++++++ tip-calculator/script.js | 59 ++++++++++++++++++++ tip-calculator/style.css | 85 +++++++++++++++++++++++++++++ 5 files changed, 306 insertions(+) create mode 100644 tip-calculator/LICENSE create mode 100644 tip-calculator/README.md create mode 100644 tip-calculator/index.html create mode 100644 tip-calculator/script.js create mode 100644 tip-calculator/style.css diff --git a/tip-calculator/LICENSE b/tip-calculator/LICENSE new file mode 100644 index 00000000..d1ec2554 --- /dev/null +++ b/tip-calculator/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2024 Koustav Singh + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/tip-calculator/README.md b/tip-calculator/README.md new file mode 100644 index 00000000..b4f9d1a2 --- /dev/null +++ b/tip-calculator/README.md @@ -0,0 +1,112 @@ +# 💰 Tip Calculator + +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. + + +## ✨ Features + +- 🧮 Instant tip calculations +- 💻 Clean, responsive design +- ⌨️ Keyboard support (Enter key) +- ❌ Input validation with error messages +- 📱 Mobile-friendly interface +- 🎨 Modern UI with smooth animations +- 🔢 Supports decimal values for precise calculations + + +## 🛠️ Installation + +1. Clone the repository: +```bash +git clone https://github.com/KoustavDeveloper/tip-calculator.git +``` + +2. Navigate to the project directory: +```bash +cd tip-calculator +``` + +3. Open `index.html` in your preferred browser + +That's it! No build process or dependencies required. + +## 💻 Usage + +1. Enter the bill amount in the first input field +2. Enter the desired tip percentage in the second input field +3. Click "Calculate" or press Enter +4. The total amount (bill + tip) will be displayed below + +## 🔧 Technical Details + +### File Structure +``` +tip-calculator/ +│ +├── index.html # Main HTML file +├── style.css # Styles and animations +├── script.js # JavaScript logic +└── README.md # Project documentation +``` + +### Technologies Used +- HTML5 +- CSS3 + - Flexbox for layout + - CSS transitions for animations + - Mobile-first responsive design +- Vanilla JavaScript + - DOM manipulation + - Event handling + - Input validation + +## ⚡ Performance + +- Lightweight: No external dependencies +- Fast loading: Single page application +- Optimized: Minimal DOM operations + +## 🎯 Browser Support + +- ✅ Chrome (latest) +- ✅ Firefox (latest) +- ✅ Safari (latest) +- ✅ Edge (latest) +- ✅ Opera (latest) + +## 🤝 Contributing + +1. Fork the repository +2. Create your feature branch (`git checkout -b feature/AmazingFeature`) +3. Commit your changes (`git commit -m 'Add some AmazingFeature'`) +4. Push to the branch (`git push origin feature/AmazingFeature`) +5. Open a Pull Request + +## 📝 Future Enhancements + +- [ ] Add split bill functionality +- [ ] Save calculation history +- [ ] Dark mode support +- [ ] Multiple currency support +- [ ] Custom tip presets +- [ ] PWA support for offline use + +## 📜 License + +This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. + +## 👏 Acknowledgments + +- Design inspired by modern UI/UX principles +- Icons provided by [Font Awesome](https://fontawesome.com) +- Color scheme based on Material Design + +## 📧 Contact + +[Koustav Singh](https://github.com/KoustavDeveloper/) + +[Project Link](https://github.com/KoustavDeveloper/tip-calculator) + +--- + +Made with ❤️ by [Koustav Singh](https://github.com/KoustavDeveloper/) \ No newline at end of file diff --git a/tip-calculator/index.html b/tip-calculator/index.html new file mode 100644 index 00000000..5a476f4a --- /dev/null +++ b/tip-calculator/index.html @@ -0,0 +1,29 @@ + + + + + + Tip Calculator + + + +
+

Tip Calculator

+
+ + +
Please enter a valid bill amount
+
+
+ + +
Please enter a valid tip percentage (0-100)
+
+ +
+ Total: $0.00 +
+
+ + + \ No newline at end of file diff --git a/tip-calculator/script.js b/tip-calculator/script.js new file mode 100644 index 00000000..92e9e628 --- /dev/null +++ b/tip-calculator/script.js @@ -0,0 +1,59 @@ +const btnEl = document.getElementById("calculate"); +const billInput = document.getElementById("bill"); +const tipInput = document.getElementById("tip"); +const totalSpan = document.getElementById("total"); +const billError = document.getElementById("billError"); +const tipError = document.getElementById("tipError"); + +function validateInputs() { + let isValid = true; + + // Validate bill amount + const billValue = parseFloat(billInput.value); + if (isNaN(billValue) || billValue < 0) { + billError.style.display = "block"; + isValid = false; + } else { + billError.style.display = "none"; + } + + // Validate tip percentage + const tipValue = parseFloat(tipInput.value); + if (isNaN(tipValue) || tipValue < 0 || tipValue > 100) { + tipError.style.display = "block"; + isValid = false; + } else { + tipError.style.display = "none"; + } + + return isValid; +} + +function calculateTotal() { + if (!validateInputs()) { + totalSpan.innerText = "0.00"; + return; + } + + const billValue = parseFloat(billInput.value); + const tipValue = parseFloat(tipInput.value); + const totalValue = billValue * (1 + tipValue / 100); + totalSpan.innerText = totalValue.toFixed(2); +} + +// Add event listeners +btnEl.addEventListener("click", calculateTotal); + +// Calculate on Enter key press +[billInput, tipInput].forEach(input => { + input.addEventListener("keypress", (e) => { + if (e.key === "Enter") { + calculateTotal(); + } + }); + + // Clear error message on input + input.addEventListener("input", () => { + validateInputs(); + }); +}); \ No newline at end of file diff --git a/tip-calculator/style.css b/tip-calculator/style.css new file mode 100644 index 00000000..12e40b86 --- /dev/null +++ b/tip-calculator/style.css @@ -0,0 +1,85 @@ +* { + box-sizing: border-box; +} + +body { + background-color: #f2f2f2; + font-family: "Helvetica", sans-serif; + margin: 0; + padding: 0; +} + +.container { + background-color: white; + max-width: 600px; + margin: 100px auto; + padding: 20px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + border-radius: 10px; +} + +h1 { + margin-top: 0; + text-align: center; + color: #333; +} + +.input-group { + margin-bottom: 15px; +} + +label { + display: block; + margin-bottom: 5px; + color: #555; +} + +input { + padding: 10px; + border: 1px solid #ccc; + border-radius: 4px; + width: 100%; + font-size: 16px; +} + +input:focus { + outline: none; + border-color: #6c7bb4; + box-shadow: 0 0 5px rgba(108, 123, 180, 0.3); +} + +button { + background-color: #6c7bb4; + color: white; + padding: 12px; + border: none; + border-radius: 4px; + cursor: pointer; + width: 100%; + font-size: 18px; + text-transform: uppercase; + transition: background-color 0.2s ease; +} + +button:hover { + background-color: #5a68a3; +} + +.result { + margin-top: 20px; + text-align: center; +} + +#total { + font-size: 24px; + font-weight: bold; + color: #6c7bb4; + display: inline-block; +} + +.error { + color: #ff4444; + font-size: 14px; + margin-top: 5px; + display: none; +} \ No newline at end of file