<!-- Braindumps LED resistor calculator (UK): works out the series resistor for one or more LEDs. Self-contained: no external files. -->
<div id="bd-ledr">
<style>
#bd-ledr{--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-ledr *{box-sizing:border-box}
#bd-ledr [hidden]{display:none!important}
#bd-ledr fieldset{border:1px solid var(--bd-line);border-radius:10px;padding:14px 16px 6px;margin:0 0 14px;min-width:0}
#bd-ledr legend{font-weight:700;padding:0 6px}
#bd-ledr .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 14px}
#bd-ledr label{display:block;font-size:.92em;margin-bottom:10px}
#bd-ledr input,#bd-ledr select{width:100%;padding:9px 10px;margin-top:4px;border:1px solid var(--bd-line);border-radius:6px;font:inherit;background:transparent;color:inherit}
#bd-ledr select option{color:#000;background:#fff}
#bd-ledr .chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
#bd-ledr .chips button{padding:5px 12px;border:1px solid var(--bd-line);border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:.9em;cursor:pointer}
#bd-ledr .chips button:hover{border-color:var(--bd-red)}
#bd-ledr .seg{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px;border:0;padding:0}
#bd-ledr .seg label{display:flex;align-items:center;gap:6px;margin:0;padding:7px 14px;border:1px solid var(--bd-line);border-radius:999px;cursor:pointer;font-size:.92em}
#bd-ledr .seg input{width:auto;margin:0;accent-color:var(--bd-red)}
#bd-ledr .seg label:has(input:checked){border-color:var(--bd-red);background:var(--bd-soft);font-weight:700}
#bd-ledr .result{border:2px solid var(--bd-red);border-radius:10px;padding:12px 16px;background:var(--bd-soft)}
#bd-ledr .big{font-size:1.6em;font-weight:700;margin:0 0 4px}
#bd-ledr table{width:100%;border-collapse:collapse;margin:8px 0 0}
#bd-ledr td{padding:6px 0;border-bottom:1px solid var(--bd-line)}
#bd-ledr td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
#bd-ledr .warn{margin:10px 0 0;padding:8px 12px;border-left:4px solid var(--bd-red);background:var(--bd-soft);font-size:.92em}
#bd-ledr .note{margin:10px 0 0;font-size:.92em}
#bd-ledr details{margin-top:8px}
#bd-ledr summary{cursor:pointer;font-weight:700}
#bd-ledr pre{white-space:pre-wrap;font-size:.85em;margin:8px 0 0;background:transparent;border:0;padding:0}
</style>

<fieldset>
<legend>Your circuit</legend>
<label>Supply voltage (V)<input id="bd-ledr-vs" type="number" min="0" step="0.1" value="12" inputmode="decimal"></label>
<div class="chips" aria-label="Common supply voltages">
<button type="button" data-v="3.3">3.3 V</button><button type="button" data-v="5">5 V</button><button type="button" data-v="9">9 V</button><button type="button" data-v="12">12 V</button><button type="button" data-v="24">24 V</button>
</div>
<div class="grid">
<label>LED colour<select id="bd-ledr-col">
<option value="2.0" selected>Red (about 2.0 V)</option>
<option value="2.1">Yellow or amber (about 2.1 V)</option>
<option value="2.2">Green, traditional (about 2.2 V)</option>
<option value="3.2">Blue (about 3.2 V)</option>
<option value="3.2w">White (about 3.2 V)</option>
<option value="other">Other: type the voltage</option>
</select></label>
<label>LED forward voltage (V)<input id="bd-ledr-vf" type="number" min="0" step="0.05" value="2" inputmode="decimal"></label>
<label>Current wanted (mA)<input id="bd-ledr-ma" type="number" min="0" step="1" value="20" inputmode="decimal"></label>
<label>LEDs in series<input id="bd-ledr-n" type="number" min="1" max="20" step="1" value="1" inputmode="numeric"></label>
</div>
<fieldset class="seg" role="radiogroup" aria-label="Standard resistor values">
<label><input type="radio" name="bd-ledr-ser" value="E24" checked> E24 (5% resistors)</label>
<label><input type="radio" name="bd-ledr-ser" value="E12"> E12 (fewer values)</label>
</fieldset>
</fieldset>

<div class="result" aria-live="polite">
<p class="big" id="bd-ledr-big"></p>
<table><tbody>
<tr><td>Exact value</td><td id="bd-ledr-exact"></td></tr>
<tr><td>Standard value to buy (next one up)</td><td id="bd-ledr-std"></td></tr>
<tr><td>Actual current with that resistor</td><td id="bd-ledr-act"></td></tr>
<tr><td>Power in the resistor</td><td id="bd-ledr-pow"></td></tr>
<tr><td>Resistor power rating to buy</td><td id="bd-ledr-watt"></td></tr>
</tbody></table>
<div class="warn" id="bd-ledr-warn" hidden></div>
<p class="note" id="bd-ledr-car" hidden></p>
<details><summary>Show the working</summary><pre id="bd-ledr-working"></pre></details>
</div>

<p class="bd-credit" style="font-size:.85em;opacity:.75;margin:10px 0 0">LED resistor calculator by <a href="https://braindumps.co.uk/led-resistor-calculator/">Braindumps.co.uk</a></p>
<script>
(function () {
  "use strict";
  /* BEGIN CALC */
  var E12 = [1.0, 1.2, 1.5, 1.8, 2.2, 2.7, 3.3, 3.9, 4.7, 5.6, 6.8, 8.2];
  var E24 = [1.0, 1.1, 1.2, 1.3, 1.5, 1.6, 1.8, 2.0, 2.2, 2.4, 2.7, 3.0, 3.3, 3.6, 3.9, 4.3, 4.7, 5.1, 5.6, 6.2, 6.8, 7.5, 8.2, 9.1];
  var RATINGS = [0.25, 0.5, 1, 2, 5];
  function nextStandard(ohms, series) {
    var base = series === "E12" ? E12 : E24;
    var target = ohms * (1 - 1e-9);
    for (var decade = 0; decade <= 7; decade++) {
      for (var i = 0; i < base.length; i++) {
        var v = Number((base[i] * Math.pow(10, decade)).toPrecision(8));
        if (v >= target) { return v; }
      }
    }
    return null;
  }
  function ratingFor(watts) {
    for (var i = 0; i < RATINGS.length; i++) {
      if (watts <= RATINGS[i] / 2 + 1e-12) { return RATINGS[i]; }
    }
    return null;
  }
  function ledCalc(vs, vf, mA, n, series) {
    var vfTotal = vf * n;
    var amps = mA / 1000;
    if (!(vs > 0) || !(vf > 0) || !(mA > 0) || !(n >= 1)) { return { ok: false, reason: "input" }; }
    if (vs <= vfTotal) { return { ok: false, reason: "voltage", vfTotal: vfTotal }; }
    var drop = vs - vfTotal;
    var exact = drop / amps;
    var std = nextStandard(exact, series);
    if (std === null) { return { ok: false, reason: "range" }; }
    var actual = drop / std;
    var power = drop * drop / std;
    return { ok: true, vfTotal: vfTotal, drop: drop, exact: exact, std: std, actualMA: actual * 1000, power: power, rating: ratingFor(power) };
  }
  /* END CALC */
  function $(id) { return document.getElementById("bd-ledr-" + id); }
  function fmtOhms(r) {
    if (r >= 1e6) { return (Math.round(r / 1e4) / 100) + " MΩ"; }
    if (r >= 1e3) { return (Math.round(r / 10) / 100) + " kΩ"; }
    return (Math.round(r * 100) / 100) + " Ω";
  }
  function num(x, dp) { return (Math.round(x * Math.pow(10, dp)) / Math.pow(10, dp)).toString(); }
  function wattText(w) { return w === 0.25 ? "¼ W" : w === 0.5 ? "½ W" : w + " W"; }
  var colourV = { "2.0": 2.0, "2.1": 2.1, "2.2": 2.2, "3.2": 3.2, "3.2w": 3.2 };
  function update() {
    var vs = parseFloat($("vs").value), vf = parseFloat($("vf").value), mA = parseFloat($("ma").value);
    var n = Math.round(parseFloat($("n").value));
    var ser = document.querySelector('input[name="bd-ledr-ser"]:checked').value;
    var r = ledCalc(vs, vf, mA, n, ser);
    var warn = $("warn"), car = $("car");
    warn.hidden = true; car.hidden = true;
    if (!r.ok) {
      $("big").textContent = r.reason === "voltage" ? "The supply is too low for this LED." : "Fill in every box with a number above zero.";
      ["exact", "std", "act", "pow", "watt"].forEach(function (k) { $(k).textContent = "–"; });
      $("working").textContent = "";
      if (r.reason === "voltage") {
        warn.textContent = n + " × " + num(vf, 2) + " V = " + num(r.vfTotal, 2) + " V, which is not less than the " + num(vs, 2) + " V supply. The LEDs will not light properly. Use fewer LEDs in series, or a higher supply voltage.";
        warn.hidden = false;
      }
      return;
    }
    $("big").textContent = "Use a " + fmtOhms(r.std) + " resistor";
    $("exact").textContent = fmtOhms(r.exact);
    $("std").textContent = fmtOhms(r.std) + " (" + ser + ")";
    $("act").textContent = num(r.actualMA, 1) + " mA";
    $("pow").textContent = num(r.power * 1000, 0) + " mW";
    $("watt").textContent = r.rating ? wattText(r.rating) : "more than 5 W (use several resistors or another method)";
    var msgs = [];
    if (mA > 30) { msgs.push("Most 5 mm LEDs are rated for 20 to 30 mA at most, and some for only 15 mA. Check your LED's datasheet before using " + num(mA, 0) + " mA."); }
    if (r.drop < 1.5) { msgs.push("Only " + num(r.drop, 2) + " V is left for the resistor, so small differences between LEDs will change the current a lot. A higher supply voltage or fewer LEDs in series gives a steadier result."); }
    if (msgs.length) { warn.textContent = msgs.join(" "); warn.hidden = false; }
    if (vs >= 11.5 && vs <= 12.5) {
      var hi = (14.5 - r.vfTotal) / r.std * 1000;
      car.textContent = "In a vehicle, a 12 V system is 13.5 to 14.5 V with the engine running. At 14.5 V this resistor passes " + num(hi, 1) + " mA.";
      car.hidden = false;
    }
    var lines = [];
    lines.push("Voltage across the resistor = " + num(vs, 2) + " V − " + (n > 1 ? n + " × " : "") + num(vf, 2) + " V = " + num(r.drop, 2) + " V");
    lines.push("Exact resistance = " + num(r.drop, 2) + " V ÷ " + num(mA / 1000, 3) + " A = " + num(r.exact, 1) + " Ω");
    lines.push("Next " + ser + " value up = " + fmtOhms(r.std));
    lines.push("Actual current = " + num(r.drop, 2) + " V ÷ " + num(r.std, 1) + " Ω = " + num(r.actualMA, 2) + " mA");
    lines.push("Power in the resistor = " + num(r.drop, 2) + " V × " + num(r.actualMA / 1000, 4) + " A = " + num(r.power * 1000, 1) + " mW");
    lines.push("Rating chosen so the resistor runs at no more than half its limit.");
    $("working").textContent = lines.join("\n");
  }
  function setColour() {
    var v = $("col").value;
    if (colourV[v] !== undefined) { $("vf").value = colourV[v]; }
    update();
  }
  $("col").addEventListener("change", setColour);
  $("vf").addEventListener("input", function () { $("col").value = "other"; update(); });
  ["vs", "ma", "n"].forEach(function (k) { $(k).addEventListener("input", update); });
  Array.prototype.forEach.call(document.querySelectorAll('input[name="bd-ledr-ser"]'), function (e) { e.addEventListener("change", update); });
  Array.prototype.forEach.call(document.querySelectorAll("#bd-ledr .chips button"), function (b) {
    b.addEventListener("click", function () { $("vs").value = b.getAttribute("data-v"); update(); });
  });
  update();
})();
</script>
</div>