','

V_{req} \;=\; \sum_{i} n_i \cdot V(\mathrm{AWG}_i)\;+\; \mathbf{1}_{\mathrm{EGC}>0}\cdot V(\mathrm{AWG}_{\mathrm{EGC,max}})\;+\; 2\!\!\sum_{j} y_j \cdot V(\mathrm{AWG}_{y_j})\;+\; \mathbf{1}_{\mathrm{clamp}}\cdot V(\mathrm{AWG}_{\max})\;+\; f \cdot V(\mathrm{AWG}_{\max})

= (sel, ctx=document) => Array.from(ctx.querySelectorAll(sel)); const els = { boxVolume: $('#boxVolume'), boxVolumeError: $('#boxVolumeError'), quickPicks:

('.help-btn'), }; function createConductorRow(initial = {awg:'', count:''}) { const rowId = `cg-${conductorRowId++}`; const row = document.createElement('div'); row.className = 'group-row'; row.setAttribute('data-role', 'conductor-row'); row.innerHTML = ` <div> <label class="sr-only" for="${rowId}-awg">Conductor size (AWG)</label> <select id="${rowId}-awg" class="form-control" aria-describedby="${rowId}-error"> <option value="">AWG size</option> <option>18</option><option>16</option><option>14</option><option>12</option><option>10</option><option>8</option><option>6</option> </select> </div> <div> <label class="sr-only" for="${rowId}-count">Count of insulated conductors</label> <input id="${rowId}-count" class="form-control" type="number" inputmode="numeric" min="0" step="1" placeholder="Count" aria-describedby="${rowId}-error"> </div> <div style="display:flex; gap:.5rem; align-items:center"> <button class="remove-btn" type="button" aria-label="Remove this conductor group">Remove</button> </div> <div id="${rowId}-error" class="error-message" role="alert" aria-live="polite"></div> `; if (initial.awg) row.querySelector(`#${rowId}-awg`).value = initial.awg; if (initial.count !== '') row.querySelector(`#${rowId}-count`).value = initial.count; els.conductorGroups.appendChild(row); } function createYokeRow(initial = {awg:'', count:''}) { const rowId = `yg-${yokeRowId++}`; const row = document.createElement('div'); row.className = 'group-row'; row.setAttribute('data-role', 'yoke-row'); row.innerHTML = ` <div> <label class="sr-only" for="${rowId}-awg">Device yoke conductor size (AWG)</label> <select id="${rowId}-awg" class="form-control" aria-describedby="${rowId}-error"> <option value="">AWG size</option> <option>18</option><option>16</option><option>14</option><option>12</option><option>10</option><option>8</option><option>6</option> </select> </div> <div> <label class="sr-only" for="${rowId}-count">Number of device yokes</label> <input id="${rowId}-count" class="form-control" type="number" inputmode="numeric" min="0" step="1" placeholder="Yokes" aria-describedby="${rowId}-error"> </div> <div style="display:flex; gap:.5rem; align-items:center"> <button class="remove-btn" type="button" aria-label="Remove this yoke group">Remove</button> </div> <div id="${rowId}-error" class="error-message" role="alert" aria-live="polite"></div> `; if (initial.awg) row.querySelector(`#${rowId}-awg`).value = initial.awg; if (initial.count !== '') row.querySelector(`#${rowId}-count`).value = initial.count; els.yokeGroups.appendChild(row); } // Validation helpers function setError(el, msg) { el.textContent = msg || ''; } function markInvalid(input, invalid, describedById) { input.setAttribute('aria-invalid', invalid ? 'true' : 'false'); if (describedById) input.setAttribute('aria-describedby', describedById); } function parseIntSafe(value) { if (value === '' || value === null || value === undefined) return NaN; const n = Number(value); return Number.isFinite(n) ? n : NaN; } function parseFloatSafe(value) { if (value === '' || value === null || value === undefined) return NaN; const n = Number(value); return Number.isFinite(n) ? n : NaN; } // Field-specific validation function validateBoxVolume() { const val = parseFloatSafe(els.boxVolume.value); if (isNaN(val)) { setError(els.boxVolumeError, 'Please enter the marked box volume in cubic inches.'); markInvalid(els.boxVolume, true, 'boxVolumeError'); return null; } if (val <= 0) { setError(els.boxVolumeError, 'Box volume must be greater than 0. Check the manufacturer marking.'); markInvalid(els.boxVolume, true, 'boxVolumeError'); return null; } setError(els.boxVolumeError, ''); markInvalid(els.boxVolume, false, 'boxVolumeError'); return val; } function validateEgc() { const count = parseIntSafe(els.egcCount.value); const awg = els.egcAwg.value; let ok = true; if (!isNaN(count) && count < 0) { setError(els.egcCountError, 'Count cannot be negative.'); markInvalid(els.egcCount, true, 'egcCountError'); ok = false; } else { setError(els.egcCountError, ''); markInvalid(els.egcCount, false, 'egcCountError'); } if (count > 0 && !awg) { setError(els.egcAwgError, 'Select the largest EGC size (AWG).'); markInvalid(els.egcAwg, true, 'egcAwgError'); ok = false; } else { setError(els.egcAwgError, ''); markInvalid(els.egcAwg, false, 'egcAwgError'); } return ok ? {count: isNaN(count) ? 0 : count, awg: awg || ''} : null; } function validateFittings() { const count = parseIntSafe(els.fittingCount.value); if (isNaN(count)) { setError(els.fittingCountError, ''); markInvalid(els.fittingCount, false, 'fittingCountError'); return 0; } if (count < 0) { setError(els.fittingCountError, 'Count cannot be negative.'); markInvalid(els.fittingCount, true, 'fittingCountError'); return null; } setError(els.fittingCountError, ''); markInvalid(els.fittingCount, false, 'fittingCountError'); return count; } function validateGroupRow(row) { const isConductor = row.getAttribute('data-role') === 'conductor-row'; const idPrefix = row.querySelector('select').id.replace(/-awg$/, ''); const sel = row.querySelector(`#${idPrefix}-awg`); const cntInput = row.querySelector(`#${idPrefix}-count`); const err = row.querySelector(`#${idPrefix}-error`); const count = parseIntSafe(cntInput.value); const awg = sel.value; let valid = true; if (!isNaN(count) && count < 0) { err.textContent = 'Count cannot be negative.'; cntInput.setAttribute('aria-invalid','true'); valid = false; } else { cntInput.setAttribute('aria-invalid','false'); } if ((count || count === 0) && count > 0 && !awg) { err.textContent = 'Select an AWG size for this group.'; sel.setAttribute('aria-invalid','true'); valid = false; } else { sel.setAttribute('aria-invalid','false'); } if ((count === 0 || isNaN(count)) && !awg) { err.textContent = ''; } else if (valid) { err.textContent = ''; } // For yokes, ensure integer counts if (row.getAttribute('data-role') === 'yoke-row' && !isNaN(count) && !Number.isInteger(count)) { err.textContent = 'Number of yokes must be a whole number.'; cntInput.setAttribute('aria-invalid','true'); valid = false; } return valid ? { count: isNaN(count) ? 0 : count, awg: awg || '' } : null; } function collectInputs() { // Box volume can be null (not provided); we still compute required const boxVol = (els.boxVolume.value.trim() === '') ? null : validateBoxVolume(); // Conductors const conductors = []; for (const row of

('#yokeGroups .group-row')) { const v = validateGroupRow(row); if (v === null) return null; // invalid if (v.count > 0 && v.awg) yokes.push(v); } // EGC const egc = validateEgc(); if (egc === null) return null; // Fittings const fittings = validateFittings(); if (fittings === null) return null; const clamps = els.internalClamps.checked; return { boxVol, conductors, yokes, egc, fittings, clamps }; } function largestInsulatedAWG(conductors, yokes) { // Return the physically largest conductor (smallest AWG number) // We compare by numerical value, but NEC table is discrete for listed sizes only. const sizes = new Set(); conductors.forEach(c => sizes.add(c.awg)); yokes.forEach(y => sizes.add(y.awg)); const arr = Array.from(sizes).map(Number).filter(Boolean); if (arr.length === 0) return null; // Larger conductor is smaller numeric AWG (e.g., 6 is larger than 12) return Math.min(...arr); } function compute() { const input = collectInputs(); if (!input) { // Invalid fields; keep results minimal renderResults({required: 0, box: readBoxVolOrNull(), margin: null, ok: null, equiv: 0, breakdown: []}); return; } const { boxVol, conductors, yokes, egc, fittings, clamps } = input; // Aggregate by AWG for conductors let breakdown = []; let required = 0; let equivalents = 0; // Conductors const condMap = new Map(); for (const c of conductors) { const cnt = condMap.get(c.awg) || 0; condMap.set(c.awg, cnt + c.count); } for (const [awg, count] of condMap) { const vol = (VOLUME_BY_AWG[awg] || 0) * count; required += vol; equivalents += count; breakdown.push({label:`Insulated conductors ${awg} AWG × ${count}`, vol}); } // EGC (all count as one of largest EGC present) if (egc.count > 0 && egc.awg) { const vol = (VOLUME_BY_AWG[egc.awg] || 0) * 1; required += vol; equivalents += 1; breakdown.push({label:`Equipment grounding conductors (all) counted as 1 of ${egc.awg} AWG`, vol}); } // Yokes for (const y of yokes) { const addEq = y.count * 2; const vol = (VOLUME_BY_AWG[y.awg] || 0) * addEq; required += vol; equivalents += addEq; breakdown.push({label:`Device yokes ${y.awg} AWG × ${y.count} (2 conductors per yoke)`, vol}); } // Largest insulated AWG for clamps/fittings const awgMax = largestInsulatedAWG(conductors, yokes); if (clamps && awgMax) { const vol = (VOLUME_BY_AWG[awgMax] || 0) * 1; required += vol; equivalents += 1; breakdown.push({label:`Internal clamps (1 × ${awgMax} AWG)`, vol}); } if (fittings > 0 && awgMax) { const vol = (VOLUME_BY_AWG[awgMax] || 0) * fittings; required += vol; equivalents += fittings; breakdown.push({label:`Internal fittings × ${fittings} (${awgMax} AWG)`, vol}); } const result = { required, box: boxVol, margin: (typeof boxVol === 'number') ? (boxVol - required) : null, ok: (typeof boxVol === 'number') ? (boxVol >= required) : null, equiv: equivalents, breakdown }; renderResults(result); } function formatIn3(n) { return `${n.toFixed(2)} in³`; } function readBoxVolOrNull(){ const v = parseFloatSafe(els.boxVolume.value); return isNaN(v) ? null : v; } function renderResults({required, box, margin, ok, equiv, breakdown}) { // Required $('#requiredVolume').textContent = formatIn3(required || 0); // Box and margin if (typeof box === 'number') { $('#boxVolumeOut').textContent = formatIn3(box); const mEl = $('#marginOut'); if (typeof margin === 'number') { const pct = (box > 0) ? (margin / box * 100) : 0; mEl.textContent = `${formatIn3(margin)} (${pct.toFixed(1)}%)`; mEl.className = 'value ' + (margin >= 0 ? 'value-ok' : 'value-bad'); } else { mEl.textContent = '—'; mEl.className = 'value'; } } else { $('#boxVolumeOut').textContent = '—'; $('#marginOut').textContent = '—'; $('#marginOut').className = 'value'; } // Equivalents $('#equivOut').textContent = String(equiv || 0); // Status const status = $('#statusBadge'); if (ok === null) { status.className = 'status-badge'; status.textContent = 'Waiting for inputs'; } else if (ok) { status.className = 'status-badge status-ok'; status.textContent = 'Compliant ✓'; } else { status.className = 'status-badge status-fail'; status.textContent = 'Not compliant ✕'; } // Breakdown const list = $('#breakdownList'); list.innerHTML = ''; if (!breakdown || breakdown.length === 0) { const li = document.createElement('li'); li.innerHTML = '<span class="muted">No items yet</span><span>—</span>'; list.appendChild(li); } else { for (const item of breakdown) { const li = document.createElement('li'); const left = document.createElement('span'); const right = document.createElement('span'); left.textContent = item.label; right.textContent = formatIn3(item.vol); li.appendChild(left); li.appendChild(right); list.appendChild(li); } } } // Event wiring function onBlurRecalc(e) { const target = e.target; if (target.matches('input, select')) { // Validate specific fields if (target === els.boxVolume) validateBoxVolume(); if (target === els.egcCount || target === els.egcAwg) validateEgc(); if (target === els.fittingCount) validateFittings(); if (target.closest('.group-row')) validateGroupRow(target.closest('.group-row')); compute(); } } function onClick(e){ const t = e.target; // Quick pick chips if (t.matches('.chip[data-volume]')) { els.boxVolume.value = t.getAttribute('data-volume'); validateBoxVolume(); compute(); } // Add/Remove rows if (t === els.addConductorGroup) { createConductorRow({awg:'', count:''}); // Move focus into new row count const rows =

Given the NEC volume allowance function V(AWG) from Table 314.16(B): 18→1.50, 16→1.75, 14→2.00, 12→2.25, 10→2.50, 8→3.00, 6→5.00 (cubic inches) Total required volume: $V_{req} \;=\; \sum_{i} n_i \cdot V(\mathrm{AWG}_i)\;+\; \mathbf{1}_{\mathrm{EGC}>0}\cdot V(\mathrm{AWG}_{\mathrm{EGC,max}})\;+\; 2\!\!\sum_{j} y_j \cdot V(\mathrm{AWG}_{y_j})\;+\; \mathbf{1}_{\mathrm{clamp}}\cdot V(\mathrm{AWG}_{\max})\;+\; f \cdot V(\mathrm{AWG}_{\max})$ where: - $n_i$ = insulated conductors of size $\mathrm{AWG}_i$ that enter and terminate/splice (pass-through counts as 1). - $\mathrm{EGC,max}$ = largest equipment grounding conductor AWG (counted once if any EGCs are present). - $y_j$ = number of device yokes connected to conductors of $\mathrm{AWG}_{y_j}$ (each counts as 2 conductors). - $\mathrm{AWG}_{\max}$ = largest insulated conductor AWG present in the box (used for clamp and fitting allowances). - $f$ = number of internal support fittings.