Carton volume in inches

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html><html lang="en-US"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Carton volume in inches</title><style>*{box-sizing:border-box}html{color-scheme:light}body{margin:0;background:var(--bg,#f3f4f5);color:var(--ink,#192838);font:16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}main{max-width:1040px;margin:auto;padding:28px 28px 48px}header{margin-bottom:20px}h1{font-size:clamp(25px,4vw,36px);line-height:1.15;letter-spacing:-.035em;margin:6px 0 9px}h2{font-size:21px;line-height:1.25;margin:0 0 16px}h3{font-size:17px;margin:0 0 10px}p{margin:8px 0 16px}.eyebrow{font-size:12px;font-weight:750;text-transform:uppercase;letter-spacing:.12em;color:var(--accent,#275e86)}.subtle,small{color:#536170}.panel{padding:24px;background:white;border:1px solid var(--line,#d5dce2);border-radius:12px;margin:18px 0}.result{background:var(--result,#132f47);color:white;padding:26px;border-radius:14px;margin:18px 0}.result .subtle,.result small{color:#d7e3ed}.big{font-size:clamp(32px,6vw,56px);font-weight:750;line-height:1.15;letter-spacing:-.035em;margin:8px 0 14px;overflow-wrap:anywhere}.mono,pre,code{font-family:ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}.mono{overflow-wrap:anywhere}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.7;margin:0}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.triple{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.fields{display:flex;gap:16px;flex-wrap:wrap;align-items:end}.fields>label{flex:1;min-width:130px}label{display:block;font-size:14px;font-weight:650}input,select,textarea{display:block;width:100%;font:inherit;font-size:16px;color:inherit;background:white;border:1px solid #a9b4bf;border-radius:6px;padding:11px 12px;margin-top:6px;min-width:0}input[type=checkbox]{display:inline;width:auto;margin:0 9px 0 0;accent-color:var(--accent,#275e86)}textarea{min-height:100px;resize:vertical}button{font:inherit;font-weight:650;padding:10px 17px;border:1px solid var(--accent,#275e86);background:var(--accent,#275e86);color:white;border-radius:6px;cursor:pointer;min-height:44px}button.secondary{background:white;color:var(--accent,#275e86)}button:disabled{opacity:.5;cursor:default}button:hover{filter:brightness(.94)}:focus-visible{outline:3px solid #e9a733;outline-offset:3px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.error{color:#a32325;font-weight:650;min-height:0}.error:not(:empty){padding:12px;border-left:4px solid #ae3237;background:#fff2f0;margin:14px 0}[hidden]{display:none!important}fieldset{border:1px solid #ccd4da;border-radius:8px;padding:18px;margin:0;min-width:0}legend{padding:0 7px;font-weight:750}table{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#536170}td,th{padding:12px 9px;border-bottom:1px solid #d9dfe4;vertical-align:top;overflow-wrap:anywhere}th:first-child,td:first-child{padding-left:0}dl{margin:0}dl>div{padding:10px 0;border-bottom:1px solid #d9dfe4}dt{font-size:13px;color:#536170}dd{margin:4px 0 0;font-weight:650}details{margin:20px 0;padding:18px 0;border-top:1px solid #cbd2d8}summary{cursor:pointer;font-weight:700}details p{margin-top:16px}a{color:var(--accent,#275e86)}.tag{display:inline-block;font-size:12px;font-weight:750;letter-spacing:.03em;border:1px solid currentColor;border-radius:5px;padding:4px 8px}.rule{border-top:1px solid #d9dfe4;padding-top:20px}.line{height:30px;border-bottom:1px solid #aab4be}.split-stat{display:flex;justify-content:space-between;gap:20px;align-items:baseline;flex-wrap:wrap}.result h2{color:white}.result table td,.result table th{border-color:#ffffff35;color:white}.result .eyebrow{color:#d7e3ed}.readout{padding:16px;background:#f0f4f6;border-radius:6px;margin-top:14px}.empty{padding:22px;border:1px dashed #a6b0ba;border-radius:8px;color:#536170;margin:18px 0}footer{font-size:13px;color:#536170;margin-top:24px}@media(max-width:720px){main{padding:20px}.panel,.result{padding:20px}.grid{gap:14px}.triple{gap:10px}}@media(max-width:540px){main{padding:16px}.grid{grid-template-columns:1fr}.panel,.result{padding:18px;border-radius:9px}.fields{gap:12px}.fields>label{min-width:100px}h1{font-size:27px}th,td{padding:10px 5px;font-size:13px}.triple{grid-template-columns:1fr}.big{font-size:38px}}.carton-row{background:#fff;margin:20px 0;padding:18px}.carton-input{display:grid;grid-template-columns:160px 1fr;gap:16px;align-items:center}.carton-input svg{width:100%;color:#8c623c}.carton-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.row-output{font-size:14px;padding-top:14px;overflow-wrap:anywhere}.carton-row .remove{font-size:13px;min-height:36px;padding:6px 12px}@media(max-width:720px){.carton-input{grid-template-columns:100px 1fr}.carton-fields{grid-template-columns:1fr 1fr}}@media(max-width:540px){.carton-input{grid-template-columns:1fr}.carton-input svg{width:130px;height:94px}.carton-fields{grid-template-columns:1fr 1fr}}</style></head><body style="--bg:#f3f0e9;--accent:#79552f;--result:#494331"><main><header><div class="eyebrow">Working example</div><h1>Carton volume in inches</h1><p class="subtle">Keep each outer L × W × H and carton quantity behind the combined volume.</p></header><section id="result" class="result" aria-live="polite"><div class="eyebrow">Summed rectangular envelope volume</div><div class="big" id="cbm"></div><div class="split-stat"><span id="otherUnits"></span><span id="cartonCount"></span></div></section><p id="error" class="error" role="alert"></p><p id="empty" class="empty" hidden>Inputs changed. Calculate to see the current result.</p><form id="form" novalidate><div id="rows"></div><div class="actions"><button>Calculate all cartons</button><button type="button" id="add" class="secondary">Add carton type</button></div></form><section class="panel"><h2>Calculation record</h2><pre id="trace"></pre></section><details><summary>Exact conversion, validation, and limits</summary><p>1 inch = 0.0254 m exactly. The cubic factor is 0.0254³ = 0.000016387064 m³/in³. Dimensions use exact decimal arithmetic; multiply each unrounded carton volume by quantity, then sum before rounding the display to six places, half up.</p><p>Use positive inch dimensions up to 10,000, with at most six decimals, and integer quantities 1–10,000. No blanks, commas, exponent notation, or zero dimensions. An invalid active row blocks the entire total. Cubic-foot decimals may repeat; the calculation record retains their exact fractions.</p><p>Outer envelope volume does not establish internal capacity, payload, fit, loading gaps, billable volume, or freight price. Equal volumes can have different shapes. Actual dimensions and tolerances require confirmation.</p><p><a href="https://www.nist.gov/pml/owm/si-units-length">NIST inch definition</a></p></details><footer>Local review copy · No data is sent or saved.</footer></main><script>const $=id=>document.getElementById(id);const esc=s=>String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));function round(n,d){return (2n*n+d)/(2n*d)}function dec(n,d,p=6){let x=round(n*10n**BigInt(p),d).toString().padStart(p+1,'0');return p?x.slice(0,-p)+'.'+x.slice(-p):x}function exact(n,d){let a=n/d,r=n%d,s='';for(let i=0;r&&i<36;i++){r*=10n;s+=r/d;r%=d}return a+(s?'.'+s:'')+(r?'…':'')}function num(s,name,max=1000000000,places=9,zero=false){if(!new RegExp('^[0-9]+(?:[.][0-9]{1,'+places+'})?$').test(s)||s.length>35)throw Error(name+': use a '+(zero?'nonnegative':'positive')+' dot-decimal number.');let [a,b='']=s.split('.'),d=10n**BigInt(b.length),n=BigInt(a+b);if((zero?n<0n:n<=0n)||n>BigInt(max)*d)throw Error(name+': value outside the supported range.');return {n,d,v:Number(n)/Number(d)}}function clear(){ $('result').hidden=true;$('trace').textContent='';$('empty').hidden=false;$('error').textContent='';}function reveal(){ $('result').hidden=false;$('empty').hidden=true;$('error').textContent='';}function error(e){clear();$('error').textContent=e.message;}function bindForm(run){$('form').addEventListener('submit',e=>{e.preventDefault();run()});$('form').addEventListener('input',clear);$('form').addEventListener('change',clear);}

const D=1000000000000000000n;let serial=2;function scaled(s,name){const r=num(s,name,10000,6);return r.n*1000000n/r.d}function carton(row){const ns=row.dims.map((s,i)=>scaled(s,row.id+' '+['length','width','height'][i]));if(!/^[0-9]+$/.test(row.qty)||Number(row.qty)<1||Number(row.qty)>10000)throw Error(row.id+' quantity: enter a whole number from 1 to 10000.');const per=ns[0]*ns[1]*ns[2],q=BigInt(row.qty);return {...row,per,q,total:per*q,m3:per*q*16387064n}}function cartons(rows){if(!rows.length)throw Error('Add at least one carton type.');const out=rows.map(carton),total=out.reduce((s,x)=>s+x.total,0n);return {rows:out,total,m3:total*16387064n,count:out.reduce((s,x)=>s+x.q,0n)}}
function addRow(id,values=['12','12','12','1']){const f=document.createElement('fieldset');f.className='carton-row panel';f.dataset.row=id;f.innerHTML='<legend>'+id+' · Outer dimensions, inches</legend><div class="carton-input"><svg viewBox="0 0 180 130" role="img" aria-label="Box label aid, not to scale: length L along the front, width W in depth, height H vertically"><path d="M30 50L100 50L145 25L75 25Z M30 50V105H100V50 M100 105L145 80V25" fill="none" stroke="currentColor" stroke-width="2"/><text x="56" y="123">L</text><text x="123" y="110">W</text><text x="12" y="82">H</text></svg><div class="carton-fields">'+['Length · in','Width · in','Height · in','Quantity · cartons'].map((label,i)=>'<label for="'+id+'-'+i+'">'+label+'<input id="'+id+'-'+i+'" value="'+values[i]+'" inputmode="decimal"></label>').join('')+'</div></div><p class="row-output" id="out-'+id+'"></p><button type="button" class="secondary remove" aria-label="Remove carton type '+id+'">Remove '+id+'</button>';$('rows').appendChild(f);f.querySelector('.remove').onclick=()=>{f.remove();clearAll()};}
function clearAll(){clear();document.querySelectorAll('.row-output').forEach(x=>x.textContent='')}
function run(){try{const rows=[...document.querySelectorAll('[data-row]')].map(f=>({id:f.dataset.row,dims:[0,1,2].map(i=>$(f.dataset.row+'-'+i).value),qty:$(f.dataset.row+'-3').value})),r=cartons(rows);reveal();$('cbm').textContent='≈ '+dec(r.m3,D*1000000000000n,6)+' m³';$('otherUnits').textContent='≈ '+dec(r.total,D*1728n,6)+' ft³ · ≈ '+dec(r.total,D,6)+' in³';$('cartonCount').textContent=r.count+' cartons · '+r.rows.length+' types';for(const x of r.rows)$('out-'+x.id).textContent='Per carton: '+exact(x.per,D)+' in³ · ≈ '+dec(x.per,D*1728n,6)+' ft³ · '+exact(x.per*16387064n,D*1000000000000n)+' m³. Row × '+x.q+': '+exact(x.total,D)+' in³ · ≈ '+dec(x.total,D*1728n,6)+' ft³ · ≈ '+dec(x.m3,D*1000000000000n,6)+' m³.';$('trace').textContent=r.rows.map(x=>x.id+': '+x.dims.join(' × ')+' in; quantity '+x.q+'\nPer carton '+exact(x.per,D)+' in³\nRow '+exact(x.total,D)+' in³; '+exact(x.m3,D*1000000000000n)+' m³\nRow ft³ = '+x.total+' / '+(D*1728n)+' (exact fraction)').join('\n\n')+'\n\nTotal '+exact(r.total,D)+' in³\nTotal ft³ = '+r.total+' / '+(D*1728n)+'\nExact total '+exact(r.m3,D*1000000000000n)+' m³\nSix-place display ≈ '+dec(r.m3,D*1000000000000n,6)+' m³';}catch(e){clearAll();$('error').textContent=e.message}}
addRow('B01',['12','12','12','2']);addRow('B02',['24','12','6','1']);$('form').addEventListener('submit',e=>{e.preventDefault();run()});$('form').addEventListener('input',clearAll);$('add').onclick=()=>{addRow('B'+String(++serial).padStart(2,'0'));clearAll();$('B'+String(serial).padStart(2,'0')+'-0').focus()};run();</script>
<script>
// Local calculation controls: no native form submission or sandbox permissions required.
(()=>{const form=document.getElementById('form');if(!form)throw Error('Calculation form missing');const dispatch=()=>form.dispatchEvent(new Event('submit',{bubbles:true,cancelable:true}));const buttons=[...form.querySelectorAll('button')].filter(button=>button.type==='submit');if(buttons.length!==1)throw Error('Expected one calculation control');for(const button of buttons){button.type='button';button.addEventListener('click',dispatch);}form.addEventListener('keydown',event=>{if(event.key==='Enter'&&!event.isComposing&&['INPUT','SELECT'].includes(event.target.tagName)){event.preventDefault();dispatch();}});})();
</script>
</body></html>