<!-- Braindumps journey cost calculator (UK). Self-contained: no external files. Prices are UK averages; change them to your own. -->
<div id="bd-jcc">
<style>
#bd-jcc{--bd-red:#d63333;--bd-line:rgba(127,127,127,.35);--bd-soft:rgba(127,127,127,.08);font:inherit;color:inherit;max-width:760px;margin:1.5em 0}
#bd-jcc *{box-sizing:border-box}
#bd-jcc [hidden]{display:none!important}
#bd-jcc fieldset{border:1px solid var(--bd-line);border-radius:10px;padding:14px 16px 6px;margin:0 0 14px;min-width:0}
#bd-jcc legend{font-weight:700;padding:0 6px}
#bd-jcc .row{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
@media (max-width:560px){#bd-jcc .row{grid-template-columns:1fr}}
#bd-jcc label{display:block;font-size:.92em;margin-bottom:10px}
#bd-jcc .hint{display:block;opacity:.7;font-size:.88em}
#bd-jcc input,#bd-jcc select{width:100%;padding:8px 10px;margin-top:4px;border:1px solid var(--bd-line);border-radius:6px;font:inherit;background:transparent;color:inherit}
#bd-jcc select option{color:#111}
#bd-jcc .inline{display:flex;gap:8px}
#bd-jcc .inline input{flex:1;min-width:0}
#bd-jcc .inline select{width:auto;flex:0 0 auto}
#bd-jcc .seg{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 12px;border:0;padding:0}
#bd-jcc .seg label{display:flex;align-items:center;gap:6px;margin:0;padding:8px 14px;border:1px solid var(--bd-line);border-radius:999px;cursor:pointer;font-size:.95em}
#bd-jcc .seg input{width:auto;margin:0;accent-color:var(--bd-red)}
#bd-jcc .seg label:has(input:checked){border-color:var(--bd-red);background:var(--bd-soft);font-weight:700}
#bd-jcc .result{border:2px solid var(--bd-red);border-radius:10px;padding:14px 16px;background:var(--bd-soft)}
#bd-jcc .total{font-size:1.7em;font-weight:700;margin:0;line-height:1.2}
#bd-jcc .sub{margin:2px 0 6px}
#bd-jcc .each{font-weight:700;margin:0 0 6px}
#bd-jcc table{width:100%;border-collapse:collapse;margin:8px 0}
#bd-jcc td,#bd-jcc th{padding:5px 0;border-bottom:1px solid var(--bd-line);text-align:left;font-weight:normal}
#bd-jcc td:last-child,#bd-jcc th:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:12px}
#bd-jcc caption{text-align:left;font-weight:700;padding:10px 0 2px}
#bd-jcc details{margin-top:8px}
#bd-jcc summary{cursor:pointer;font-weight:700}
#bd-jcc pre{white-space:pre-wrap;font-size:.85em;margin:8px 0 0;background:transparent;border:0;padding:0}
#bd-jcc .note{font-size:.85em;opacity:.75;margin:10px 0 0}
#bd-jcc .warn{color:var(--bd-red);font-weight:700}
</style>

<fieldset>
<legend>Your journey</legend>
<div class="row">
<label>Distance
<span class="inline"><input id="bd-jc-dist" type="number" min="0" step="any" value="100" inputmode="decimal"><select id="bd-jc-dunit" aria-label="Distance unit"><option value="mi">miles</option><option value="km">km</option></select></span>
<span class="hint">One way. Google Maps or your sat nav shows it.</span></label>
<label>Trip
<select id="bd-jc-trip"><option value="1">One way</option><option value="2">Return (there and back)</option></select></label>
<label>People sharing the cost
<input id="bd-jc-people" type="number" min="1" step="1" value="1" inputmode="numeric">
<span class="hint">Include the driver if they pay a share.</span></label>
<label>Other costs (£)
<input id="bd-jc-extras" type="number" min="0" step="0.01" value="0" inputmode="decimal">
<span class="hint">Parking, tolls, crossings, clean air zones. For the whole trip.</span></label>
</div>
</fieldset>

<fieldset>
<legend>Your car</legend>
<div class="seg" role="radiogroup" aria-label="Fuel">
<label><input type="radio" name="bd-jc-fuel" value="petrol" checked> Petrol or hybrid</label>
<label><input type="radio" name="bd-jc-fuel" value="diesel"> Diesel</label>
<label><input type="radio" name="bd-jc-fuel" value="electric"> Electric</label>
</div>
<div class="row" id="bd-jc-ice">
<label>Fuel economy
<span class="inline"><input id="bd-jc-eco" type="number" min="0" step="any" value="45" inputmode="decimal"><select id="bd-jc-ecounit" aria-label="Fuel economy unit"><option value="mpg">mpg</option><option value="l100">litres per 100 km</option></select></span>
<span class="hint">Your trip computer shows it. Many family cars do 40 to 55 mpg (5 to 7 litres per 100 km).</span></label>
<label>Fuel price (pence per litre)
<input id="bd-jc-price" type="number" min="0" step="0.1" value="175.3" inputmode="decimal">
<span class="hint" id="bd-jc-pricehint"></span></label>
</div>
<div class="row" id="bd-jc-ev" hidden>
<label>Efficiency (miles per kWh)
<input id="bd-jc-mpk" type="number" min="0" step="0.1" value="3.5" inputmode="decimal">
<span class="hint">Most electric cars manage 3 to 4 miles per kWh, and less in winter.</span></label>
<label>Where you charge
<select id="bd-jc-where"><option value="home">At home</option><option value="rapid">Public rapid charger</option><option value="slow">Public slow or fast charger</option><option value="own">My own price</option></select></label>
<label>Electricity price (pence per kWh)
<input id="bd-jc-kwh" type="number" min="0" step="0.01" value="26.32" inputmode="decimal">
<span class="hint" id="bd-jc-kwhhint"></span></label>
</div>
</fieldset>

<div class="result" aria-live="polite">
<p class="total" id="bd-jc-total">£0.00</p>
<p class="sub" id="bd-jc-sub"></p>
<p class="each" id="bd-jc-each" hidden></p>
<table><tbody id="bd-jc-lines"></tbody></table>
<table><caption>The same trip in a typical car</caption><tbody id="bd-jc-compare"></tbody></table>
<details><summary>Show the working</summary><pre id="bd-jc-working"></pre></details>
<p class="note" id="bd-jc-note"></p>
</div>

<p class="bd-credit" style="font-size:.85em;opacity:.75;margin:10px 0 0">Journey cost calculator by <a href="https://braindumps.co.uk/journey-cost-calculator/">Braindumps.co.uk</a></p>
<script>
(function () {
  "use strict";
  /* BEGIN CALC */
  var LITRES_PER_GALLON = 4.54609; // UK gallon
  var KM_PER_MILE = 1.609344;
  function journeyCost(o) {
    var miles = (o.unit === "km" ? o.distance / KM_PER_MILE : o.distance) * o.trips;
    var r = { miles: miles, km: miles * KM_PER_MILE, litres: 0, kwh: 0, energyPence: 0 };
    if (o.fuel === "electric") {
      r.kwh = o.milesPerKwh > 0 ? miles / o.milesPerKwh : 0;
      r.energyPence = r.kwh * o.pencePerKwh;
    } else {
      var litresPerMile = 0;
      if (o.ecoUnit === "l100") { litresPerMile = o.eco * KM_PER_MILE / 100; }
      else if (o.eco > 0) { litresPerMile = LITRES_PER_GALLON / o.eco; }
      r.litres = miles * litresPerMile;
      r.energyPence = r.litres * o.pencePerLitre;
    }
    r.fuelCost = r.energyPence / 100;
    r.extras = o.extras;
    r.total = r.fuelCost + o.extras;
    r.people = Math.max(1, Math.floor(o.people) || 1);
    r.each = r.total / r.people;
    r.pencePerMile = miles > 0 ? r.energyPence / miles : 0;
    return r;
  }
  /* END CALC */

  // UK averages. Update these when prices change.
  var PRICES = {
    petrol: { p: 175.3, label: "UK average petrol price, week of 12 October 2026." },
    diesel: { p: 200.0, label: "UK average diesel price, week of 12 October 2026." },
    home: { p: 26.32, label: "Energy price cap for England, Scotland and Wales, 1 October to 31 December 2026." },
    rapid: { p: 79, label: "UK pay-as-you-go average for rapid chargers, September 2026." },
    slow: { p: 54, label: "UK pay-as-you-go average for slow and fast chargers, September 2026." }
  };
  var TYPICAL = { petrol: 45, diesel: 52, electric: 3.5 };

  var root = document.getElementById("bd-jcc");
  if (!root) { return; }
  function el(id) { return document.getElementById(id); }
  function num(id) { var v = parseFloat(el(id).value); return isFinite(v) && v >= 0 ? v : 0; }
  function money(v) { return "£" + v.toFixed(2); }
  function fixed(v, d) { return v.toLocaleString("en-GB", { minimumFractionDigits: d, maximumFractionDigits: d }); }
  function fuel() { var c = root.querySelector('input[name="bd-jc-fuel"]:checked'); return c ? c.value : "petrol"; }
  var edited = {};
  ["bd-jc-eco", "bd-jc-price", "bd-jc-mpk", "bd-jc-kwh"].forEach(function (id) {
    el(id).addEventListener("input", function () { edited[id] = true; });
  });

  function readInputs(f) {
    return {
      distance: num("bd-jc-dist"), unit: el("bd-jc-dunit").value, trips: parseInt(el("bd-jc-trip").value, 10) || 1,
      fuel: f, eco: num("bd-jc-eco"), ecoUnit: el("bd-jc-ecounit").value, pencePerLitre: num("bd-jc-price"),
      milesPerKwh: num("bd-jc-mpk"), pencePerKwh: num("bd-jc-kwh"), people: num("bd-jc-people"), extras: num("bd-jc-extras")
    };
  }

  function row(tbody, a, b) {
    var tr = document.createElement("tr");
    var td1 = document.createElement("td"); td1.textContent = a;
    var td2 = document.createElement("td"); td2.textContent = b;
    tr.appendChild(td1); tr.appendChild(td2); tbody.appendChild(tr);
  }

  function update() {
    var f = fuel();
    var o = readInputs(f);
    var r = journeyCost(o);
    var ev = f === "electric";
    var missing = ev ? o.milesPerKwh <= 0 : o.eco <= 0;
    var tripWord = o.trips === 2 ? "return" : "one way";
    el("bd-jc-total").textContent = money(r.total);
    el("bd-jc-sub").textContent = "for " + fixed(r.miles, r.miles < 10 ? 1 : 0) + " miles (" + tripWord + ")" + (o.extras > 0 ? ", including " + money(o.extras) + " of other costs" : "");
    el("bd-jc-each").hidden = r.people < 2;
    el("bd-jc-each").textContent = money(r.each) + " each for " + r.people + " people";

    var lines = el("bd-jc-lines"); lines.textContent = "";
    if (ev) { row(lines, "Electricity used", fixed(r.kwh, 1) + " kWh"); row(lines, "Charging cost", money(r.fuelCost)); }
    else { row(lines, "Fuel used", fixed(r.litres, 1) + " litres (" + fixed(r.litres / LITRES_PER_GALLON, 1) + " gallons)"); row(lines, "Fuel cost", money(r.fuelCost)); }
    row(lines, ev ? "Cost per mile (charging)" : "Cost per mile (fuel)", fixed(r.pencePerMile, 1) + "p");
    if (o.extras > 0) { row(lines, "Other costs", money(o.extras)); }

    // The same distance in typical cars, at the prices above.
    var cmp = el("bd-jc-compare"); cmp.textContent = "";
    var base = { distance: o.distance, unit: o.unit, trips: o.trips, ecoUnit: "mpg", people: 1, extras: 0 };
    var opts = [
      ["Petrol, " + TYPICAL.petrol + " mpg", { fuel: "petrol", eco: TYPICAL.petrol, pencePerLitre: PRICES.petrol.p }],
      ["Diesel, " + TYPICAL.diesel + " mpg", { fuel: "diesel", eco: TYPICAL.diesel, pencePerLitre: PRICES.diesel.p }],
      ["Electric, home charging", { fuel: "electric", milesPerKwh: TYPICAL.electric, pencePerKwh: PRICES.home.p }],
      ["Electric, rapid charger", { fuel: "electric", milesPerKwh: TYPICAL.electric, pencePerKwh: PRICES.rapid.p }]
    ];
    opts.forEach(function (x) {
      var c = journeyCost(Object.assign({}, base, x[1]));
      row(cmp, x[0], money(c.fuelCost));
    });

    var w = [];
    var oneWay = o.unit === "km" ? fixed(o.distance, 1) + " km = " + fixed(o.distance / KM_PER_MILE, 1) + " miles" : fixed(o.distance, 1) + " miles";
    w.push("Distance       = " + oneWay + (o.trips === 2 ? " x 2 (return) = " + fixed(r.miles, 1) + " miles" : ""));
    if (ev) {
      w.push("Electricity    = " + fixed(r.miles, 1) + " miles / " + fixed(o.milesPerKwh, 1) + " miles per kWh = " + fixed(r.kwh, 2) + " kWh");
      w.push("Charging cost  = " + fixed(r.kwh, 2) + " kWh x " + fixed(o.pencePerKwh, 2) + "p = " + money(r.fuelCost));
    } else if (o.ecoUnit === "l100") {
      w.push("Fuel used      = " + fixed(r.km, 1) + " km x " + fixed(o.eco, 1) + " litres / 100 km = " + fixed(r.litres, 2) + " litres");
      w.push("Fuel cost      = " + fixed(r.litres, 2) + " litres x " + fixed(o.pencePerLitre, 1) + "p = " + money(r.fuelCost));
    } else {
      w.push("Gallons used   = " + fixed(r.miles, 1) + " miles / " + fixed(o.eco, 1) + " mpg = " + fixed(r.litres / LITRES_PER_GALLON, 3) + " gallons");
      w.push("Litres used    = gallons x 4.546 = " + fixed(r.litres, 2) + " litres");
      w.push("Fuel cost      = " + fixed(r.litres, 2) + " litres x " + fixed(o.pencePerLitre, 1) + "p = " + money(r.fuelCost));
    }
    if (o.extras > 0) { w.push("Other costs    = " + money(o.extras)); }
    w.push("Total          = " + money(r.total));
    if (r.people > 1) { w.push("Each           = " + money(r.total) + " / " + r.people + " = " + money(r.each)); }
    el("bd-jc-working").textContent = w.join("\n");

    var note = el("bd-jc-note");
    if (missing) { note.innerHTML = '<span class="warn">Enter your car’s ' + (ev ? "miles per kWh" : "fuel economy") + " to see the cost.</span>"; }
    else { note.textContent = "Fuel economy changes with speed, traffic, load and weather, so treat the answer as a good estimate, not an exact figure."; }
  }

  function setFuel() {
    var f = fuel();
    var ev = f === "electric";
    el("bd-jc-ice").hidden = ev;
    el("bd-jc-ev").hidden = !ev;
    if (!ev) {
      if (!edited["bd-jc-price"]) { el("bd-jc-price").value = PRICES[f].p.toFixed(1); }
      if (!edited["bd-jc-eco"] && el("bd-jc-ecounit").value === "mpg") { el("bd-jc-eco").value = TYPICAL[f]; }
      el("bd-jc-pricehint").textContent = PRICES[f].label + " Change it to what you pay.";
    }
    update();
  }

  function setWhere() {
    var w = el("bd-jc-where").value;
    if (w !== "own") {
      el("bd-jc-kwh").value = PRICES[w].p;
      edited["bd-jc-kwh"] = false;
      el("bd-jc-kwhhint").textContent = PRICES[w].label + " Change it to your own rate.";
    } else {
      el("bd-jc-kwhhint").textContent = "Enter the rate on your bill or charging app.";
      el("bd-jc-kwh").focus();
    }
    update();
  }

  el("bd-jc-ecounit").addEventListener("change", function () {
    // Convert the figure already entered so the answer stays the same.
    var v = num("bd-jc-eco");
    if (v > 0) {
      var conv = 100 * LITRES_PER_GALLON / (KM_PER_MILE * v); // mpg <-> litres per 100 km uses the same formula both ways
      var dp = el("bd-jc-ecounit").value === "l100" ? 100 : 10;
      el("bd-jc-eco").value = Math.round(conv * dp) / dp;
    }
    update();
  });
  root.querySelectorAll('input[name="bd-jc-fuel"]').forEach(function (r) { r.addEventListener("change", setFuel); });
  el("bd-jc-where").addEventListener("change", setWhere);
  el("bd-jc-kwh").addEventListener("input", function () { el("bd-jc-where").value = "own"; el("bd-jc-kwhhint").textContent = "Your own rate."; });
  root.addEventListener("input", update);
  root.addEventListener("change", update);
  el("bd-jc-kwhhint").textContent = PRICES.home.label + " Change it to your own rate.";
  setFuel();
})();
</script>
</div>