<!-- Braindumps temperature converter: Celsius, Fahrenheit and UK oven gas marks. Self-contained: no external files. -->
<div id="bd-tc">
<style>
#bd-tc{--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-tc *{box-sizing:border-box}
#bd-tc fieldset{border:1px solid var(--bd-line);border-radius:10px;padding:14px 16px 10px;margin:0 0 14px;min-width:0}
#bd-tc legend{font-weight:700;padding:0 6px}
#bd-tc .pair{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:end}
#bd-tc .eq{font-size:1.6em;font-weight:700;padding-bottom:6px;opacity:.6}
#bd-tc label{display:block;font-size:.92em}
#bd-tc input,#bd-tc select{width:100%;padding:10px 12px;margin-top:4px;border:1px solid var(--bd-line);border-radius:6px;font:inherit;font-size:1.25em;background:transparent;color:inherit}
#bd-tc select{font-size:1em}
#bd-tc select option{color:#111}
#bd-tc .chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px}
#bd-tc .chips button{padding:5px 11px;border:1px solid var(--bd-line);border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:.88em;cursor:pointer}
#bd-tc .chips button:hover,#bd-tc .chips button:focus{border-color:var(--bd-red)}
#bd-tc .result{border:2px solid var(--bd-red);border-radius:10px;padding:12px 16px;background:var(--bd-soft);margin-top:12px}
#bd-tc .big{font-size:1.4em;font-weight:700;margin:0}
#bd-tc .small{font-size:.9em;margin:6px 0 0;opacity:.85}
#bd-tc pre{white-space:pre-wrap;font-size:.85em;margin:8px 0 0;background:transparent;border:0;padding:0}
#bd-tc .oven{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.bd-tc-chart th,.bd-tc-chart td{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:6px;padding-right:6px}
.bd-tc-chart td:nth-child(odd){font-weight:600}
.bd-tc-chart td:nth-child(2n+3),.bd-tc-chart th:nth-child(2n+3){border-left:1px solid rgba(127,127,127,.35)}
@media (max-width:560px){.bd-tc-chart{font-size:.85em}.bd-tc-chart th,.bd-tc-chart td{padding-left:3px;padding-right:3px}}
@media (max-width:560px){#bd-tc .oven{grid-template-columns:1fr}#bd-tc .eq{display:none}#bd-tc .pair{grid-template-columns:1fr 1fr}}
</style>

<fieldset>
<legend>Celsius and Fahrenheit</legend>
<div class="pair">
<label>Celsius (°C)<input id="bd-tc-c" type="number" step="any" value="20" aria-describedby="bd-tc-out"></label>
<div class="eq" aria-hidden="true">=</div>
<label>Fahrenheit (°F)<input id="bd-tc-f" type="number" step="any" value="68" aria-describedby="bd-tc-out"></label>
</div>
<div class="chips" aria-label="Common temperatures">
<button type="button" data-c="-40">−40 °C</button>
<button type="button" data-c="-18">Freezer, −18 °C</button>
<button type="button" data-c="0">Water freezes, 0 °C</button>
<button type="button" data-c="20">Room, 20 °C</button>
<button type="button" data-c="37">Body, 37 °C</button>
<button type="button" data-c="38">High temperature, 38 °C</button>
<button type="button" data-c="100">Water boils, 100 °C</button>
<button type="button" data-c="180">Oven, 180 °C</button>
</div>
<div class="result" aria-live="polite" id="bd-tc-out">
<p class="big" id="bd-tc-line"></p>
<p class="small" id="bd-tc-quick"></p>
<details><summary>Show the working</summary><pre id="bd-tc-working"></pre></details>
</div>
</fieldset>

<fieldset>
<legend>Oven temperatures and gas marks</legend>
<div class="oven">
<label>Gas mark
<select id="bd-tc-gas">
<option value="">Choose a gas mark</option>
<option value="0.25">Gas mark ¼</option>
<option value="0.5">Gas mark ½</option>
<option value="1">Gas mark 1</option>
<option value="2">Gas mark 2</option>
<option value="3">Gas mark 3</option>
<option value="4" selected>Gas mark 4</option>
<option value="5">Gas mark 5</option>
<option value="6">Gas mark 6</option>
<option value="7">Gas mark 7</option>
<option value="8">Gas mark 8</option>
<option value="9">Gas mark 9</option>
</select></label>
<label>Or a recipe temperature (conventional °C)
<input id="bd-tc-ovenc" type="number" step="5" min="50" max="300" placeholder="For example 200"></label>
</div>
<div class="result" aria-live="polite">
<p class="big" id="bd-tc-oven"></p>
<p class="small" id="bd-tc-ovennote"></p>
</div>
</fieldset>

<p class="bd-credit" style="font-size:.85em;opacity:.75;margin:10px 0 0">Temperature converter by <a href="https://braindumps.co.uk/convert-celsius-to-farenheit-or-farenheit-to-celsius/">Braindumps.co.uk</a></p>
<script>
(function () {
  "use strict";
  /* BEGIN CALC */
  function cToF(c) { return c * 9 / 5 + 32; }
  function fToC(f) { return (f - 32) * 5 / 9; }
  // UK recipe values for each gas mark: conventional °C and °F. Fan ovens: about 20 °C lower.
  var GAS = [
    { mark: 0.25, label: "¼", c: 110, f: 225, word: "very cool" },
    { mark: 0.5, label: "½", c: 120, f: 250, word: "very cool" },
    { mark: 1, label: "1", c: 140, f: 275, word: "cool" },
    { mark: 2, label: "2", c: 150, f: 300, word: "cool" },
    { mark: 3, label: "3", c: 170, alt: 160, f: 325, word: "moderate" },
    { mark: 4, label: "4", c: 180, f: 350, word: "moderate" },
    { mark: 5, label: "5", c: 190, f: 375, word: "moderately hot" },
    { mark: 6, label: "6", c: 200, f: 400, word: "moderately hot" },
    { mark: 7, label: "7", c: 220, f: 425, word: "hot" },
    { mark: 8, label: "8", c: 230, f: 450, word: "hot" },
    { mark: 9, label: "9", c: 240, f: 475, word: "very hot" }
  ];
  function nearestGas(c) {
    var best = GAS[0];
    GAS.forEach(function (g) { if (Math.abs(g.c - c) < Math.abs(best.c - c)) { best = g; } });
    return best;
  }
  /* END CALC */

  var root = document.getElementById("bd-tc");
  if (!root) { return; }
  function el(id) { return document.getElementById(id); }
  function fmt(v) {
    var r = Math.round(v * 10) / 10;
    if (Object.is(r, -0)) { r = 0; }
    return r.toLocaleString("en-GB", { maximumFractionDigits: 1 }).replace("-", "−");
  }
  function show(c, f) {
    el("bd-tc-line").textContent = fmt(c) + " °C = " + fmt(f) + " °F";
    var quick = c >= -10 && c <= 35 ? "Quick estimate in your head: double it and add 30, which gives " + fmt(c * 2 + 30) + " °F. " : "";
    el("bd-tc-quick").textContent = quick + "In kelvin: " + fmt(c + 273.15) + " K.";
    el("bd-tc-working").textContent =
      "°F = °C × 9 ÷ 5 + 32\n   = " + fmt(c) + " × 9 ÷ 5 + 32\n   = " + fmt(c * 9 / 5) + " + 32\n   = " + fmt(f) + " °F\n\n" +
      "°C = (°F − 32) × 5 ÷ 9\n   = (" + fmt(f) + " − 32) × 5 ÷ 9\n   = " + fmt(c) + " °C";
  }
  function blank() { el("bd-tc-line").textContent = "Enter a temperature."; el("bd-tc-quick").textContent = ""; el("bd-tc-working").textContent = ""; }
  function fromC() {
    var c = parseFloat(el("bd-tc-c").value);
    if (!isFinite(c)) { blank(); return; }
    var f = cToF(c);
    el("bd-tc-f").value = Math.round(f * 100) / 100;
    show(c, f);
  }
  function fromF() {
    var f = parseFloat(el("bd-tc-f").value);
    if (!isFinite(f)) { blank(); return; }
    var c = fToC(f);
    el("bd-tc-c").value = Math.round(c * 100) / 100;
    show(c, f);
  }
  el("bd-tc-c").addEventListener("input", fromC);
  el("bd-tc-f").addEventListener("input", fromF);
  root.querySelectorAll(".chips button").forEach(function (b) {
    b.addEventListener("click", function () { el("bd-tc-c").value = b.getAttribute("data-c"); fromC(); });
  });

  function ovenFromGas() {
    var v = parseFloat(el("bd-tc-gas").value);
    var g = null;
    GAS.forEach(function (x) { if (x.mark === v) { g = x; } });
    if (!g) { el("bd-tc-oven").textContent = ""; el("bd-tc-ovennote").textContent = ""; return; }
    el("bd-tc-ovenc").value = "";
    var cText = g.alt ? g.alt + " to " + g.c + " °C (" + (g.alt - 20) + " to " + (g.c - 20) + " °C fan)" : g.c + " °C (" + (g.c - 20) + " °C fan)";
    el("bd-tc-oven").textContent = "Gas mark " + g.label + " = " + cText + " = " + g.f + " °F";
    el("bd-tc-ovennote").textContent = "A " + g.word + " oven." + (g.alt ? " Recipes use either figure: " + g.f + " °F is " + fmt(fToC(g.f)) + " °C." : "");
  }
  function ovenFromC() {
    var c = parseFloat(el("bd-tc-ovenc").value);
    if (!isFinite(c)) { ovenFromGas(); return; }
    var g = nearestGas(c);
    el("bd-tc-gas").value = "";
    el("bd-tc-oven").textContent = fmt(c) + " °C = " + fmt(c - 20) + " °C fan = " + fmt(cToF(c)) + " °F";
    el("bd-tc-ovennote").textContent = "Nearest gas mark: " + g.label + " (" + g.c + " °C). " + (Math.abs(g.c - c) > 15 ? "This is outside the usual gas mark range." : "");
  }
  el("bd-tc-gas").addEventListener("change", ovenFromGas);
  el("bd-tc-ovenc").addEventListener("input", ovenFromC);

  fromC();
  ovenFromGas();
})();
</script>
</div>