Merge pull request #345 from KoustavDeveloper/tip-calculator

added Tip Calculator

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.

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/)

tip-calculator/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tip Calculator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Tip Calculator</h1>
+        <div class="input-group">
+            <label for="bill">Bill Amount ($)</label>
+            <input type="number" id="bill" min="0" step="0.01" placeholder="Enter bill amount">
+            <div id="billError" class="error">Please enter a valid bill amount</div>
+        </div>
+        <div class="input-group">
+            <label for="tip">Tip Percentage (%)</label>
+            <input type="number" id="tip" min="0" max="100" step="1" placeholder="Enter tip percentage">
+            <div id="tipError" class="error">Please enter a valid tip percentage (0-100)</div>
+        </div>
+        <button id="calculate">Calculate</button>
+        <div class="result">
+            Total: $<span id="total">0.00</span>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

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();
+    });
+});

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;
+}