isdieselcheaper/fuel-calc.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Diesel vs Petrol Cost Calculator</title>
    <style>
        body { font-family: sans-serif; margin: 20px; background-color: #f4f7f6; color: #333; }
        .container { max-width: 800px; margin: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        h2 { color: #2c3e50; text-align: center; }
        .input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
        .input-group { display: flex; flex-direction: column; }
        label { font-size: 0.9rem; margin-bottom: 5px; font-weight: bold; }
        input { padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; }
        .result-box { background: #eef2f7; padding: 15px; border-radius: 8px; margin-bottom: 20px; text-align: center; border-left: 5px solid #3498db; }
        .result-box b { color: #2980b9; font-size: 1.2rem; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        th, td { border: 1px solid #ddd; padding: 12px; text-align: center; }
        th { background-color: #f8f9fa; }
        .saving { color: green; font-weight: bold; }
        .loss { color: red; font-weight: bold; }
    </style>
</head>
<body>

<div class="container">
    <h2>Car Cost Comparison</h2>
    
    <div class="input-grid">
        <!-- Diesel Inputs -->
        <div class="input-group">
            <label>Diesel Annual Tax (€)</label>
            <input type="number" id="dTax" value="600" oninput="calculate()">
        </div>
        <div class="input-group">
            <label>Diesel Price per Liter (€)</label>
            <input type="number" id="dPrice" value="2.51" step="0.01" oninput="calculate()">
        </div>
        <div class="input-group">
            <label>Diesel Consumption (L/100km)</label>
            <input type="number" id="dCons" value="5.5" step="0.1" oninput="calculate()">
        </div>
        
        <!-- Petrol Inputs -->
        <div class="input-group">
            <label>Petrol Annual Tax (€)</label>
            <input type="number" id="pTax" value="200" oninput="calculate()">
        </div>
        <div class="input-group">
            <label>Petrol Price per Liter (€)</label>
            <input type="number" id="pPrice" value="2.32" step="0.01" oninput="calculate()">
        </div>
        <div class="input-group">
            <label>Petrol Consumption (L/100km)</label>
            <input type="number" id="pCons" value="6.2" step="0.1" oninput="calculate()">
        </div>
    </div>

    <div class="input-group" style="margin-bottom: 20px; max-width: 300px; margin-left: auto; margin-right: auto;">
        <label>Your Annual Distance (km) for Break-even</label>
        <input type="number" id="annualKm" value="17500" oninput="calculate()">
    </div>

    <div class="result-box">
        To offset the tax difference at <span id="displayKm">17500</span> km/year, 
        a petrol car would need to consume at least <b id="breakEvenCons">0.00</b> L/100km.
    </div>

    <table id="comparisonTable">
        <thead>
            <tr>
                <th>Annual Distance</th>
                <th>Diesel Total</th>
                <th>Petrol Total</th>
                <th>Difference</th>
            </tr>
        </thead>
        <tbody>
            <!-- Rows generated by JS -->
        </tbody>
    </table>
</div>

<script>
function calculate() {
    // Get values
    const dTax = parseFloat(document.getElementById('dTax').value) || 0;
    const dPrice = parseFloat(document.getElementById('dPrice').value) || 0;
    const dCons = parseFloat(document.getElementById('dCons').value) || 0;
    
    const pTax = parseFloat(document.getElementById('pTax').value) || 0;
    const pPrice = parseFloat(document.getElementById('pPrice').value) || 0;
    const pCons = parseFloat(document.getElementById('pCons').value) || 0;
    
    const annualKm = parseFloat(document.getElementById('annualKm').value) || 0;

    // 1. Calculate Break-Even Petrol Consumption
    // Formula: P_Cons = (100 * (dTax - pTax) / (annualKm * pPrice)) + (dCons * dPrice / pPrice)
    const taxDiff = dTax - pTax;
    const breakEven = (100 * taxDiff / (annualKm * pPrice)) + (dCons * dPrice / pPrice);
    
    document.getElementById('displayKm').innerText = annualKm.toLocaleString();
    document.getElementById('breakEvenCons').innerText = isFinite(breakEven) ? breakEven.toFixed(2) : "0.00";

    // 2. Generate Table
    const distances = [5000, 10000, 15000, 20000, 25000, 30000];
    const tbody = document.querySelector('#comparisonTable tbody');
    tbody.innerHTML = '';

    distances.forEach(km => {
        const dTotal = dTax + (km * dCons / 100 * dPrice);
        const pTotal = pTax + (km * pCons / 100 * pPrice);
        const diff = pTotal - dTotal;
        
        const row = document.createElement('tr');
        const diffClass = diff >= 0 ? 'saving' : 'loss';
        const diffText = diff >= 0 ? `Saving €${diff.toFixed(2)}` : `Loss €${Math.abs(diff).toFixed(2)}`;

        row.innerHTML = `
            <td>${km.toLocaleString()} km</td>
            <td>€${dTotal.toFixed(2)}</td>
            <td>€${pTotal.toFixed(2)}</td>
            <td class="${diffClass}">${diffText}</td>
        `;
        tbody.appendChild(row);
    });
}

// Initial run
calculate();
</script>

</body>
</html>