US Tip Calculator

US Tip Calculator

<div class="tip-calculator-container">
    <h2>US Tip Calculator</h2>
    
    <div class="input-group">
        <label for="billAmount">Bill Amount ($)</label>
        <input type="number" id="billAmount" placeholder="0.00" min="0" step="0.01">
    </div>

    <div class="input-group">
        <label for="tipPercentage">Tip Percentage (%)</label>
        <select id="tipPercentage">
            <option value="15">15% (Standard)</option>
            <option value="18" selected>18% (Good Service)</option>
            <option value="20">20% (Excellent)</option>
            <option value="25">25% (Amazing)</option>
        </select>
    </div>

    <div class="input-group">
        <label for="numPeople">Number of People</label>
        <input type="number" id="numPeople" value="1" min="1">
    </div>

    <div class="results-box">
        <div class="result-row">
            <span>Tip Per Person:</span>
            <span id="tipPerPerson" class="amount">$0.00</span>
        </div>
        <div class="result-row">
            <span>Total Per Person:</span>
            <span id="totalPerPerson" class="amount">$0.00</span>
        </div>
    </div>
</div>

<style>
    .tip-calculator-container {
        max-width: 400px;
        margin: 20px auto;
        padding: 25px;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        border: 1px solid #eef2f5;
    }
    .tip-calculator-container h2 {
        text-align: centre;
        color: #2c3e50;
        margin-bottom: 20px;
        font-size: 24px;
    }
    .input-group {
        margin-bottom: 18px;
    }
    .input-group label {
        display: block;
        margin-bottom: 6px;
        color: #5a738e;
        font-weight: 600;
        font-size: 14px;
    }
    .input-group input, .input-group select {
        width: 100%;
        padding: 12px;
        border: 2px solid #cbd5e1;
        border-radius: 8px;
        font-size: 16px;
        box-sizing: border-box;
        transition: all 0.3s ease;
    }
    .input-group input:focus, .input-group select:focus {
        border-color: #3498db;
        outline: none;
    }
    .results-box {
        background: #f8fafc;
        padding: 15px;
        border-radius: 8px;
        margin-top: 20px;
        border: 1px dashed #cbd5e1;
    }
    .result-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        font-size: 16px;
        color: #2c3e50;
    }
    .result-row:last-child {
        margin-bottom: 0;
        font-weight: bold;
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
    }
    .amount {
        color: #2ecc71;
        font-size: 18px;
    }
</style>

<script>
    const billInput = document.getElementById('billAmount');
    const tipSelect = document.getElementById('tipPercentage');
    const peopleInput = document.getElementById('numPeople');
    
    const tipPerPersonEl = document.getElementById('tipPerPerson');
    const totalPerPersonEl = document.getElementById('totalPerPerson');

    function calculateTip() {
        const bill = parseFloat(billInput.value) || 0;
        const tipPercent = parseFloat(tipSelect.value) || 0;
        const people = parseInt(peopleInput.value) || 1;

        if (bill <= 0) {
            tipPerPersonEl.innerText = '$0.00';
            totalPerPersonEl.innerText = '$0.00';
            return;
        }

        const totalTip = bill * (tipPercent / 100);
        const totalBill = bill + totalTip;

        const tipPerPerson = totalTip / people;
        const totalPerPerson = totalBill / people;

        tipPerPersonEl.innerText = `$${tipPerPerson.toFixed(2)}`;
        totalPerPersonEl.innerText = `$${totalPerPerson.toFixed(2)}`;
    }

    billInput.addEventListener('input', calculateTip);
    tipSelect.addEventListener('change', calculateTip);
    peopleInput.addEventListener('input', calculateTip);
</script>