Keep final volume in the denominator

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>Keep final volume in the denominator</title><style>
:root{color-scheme:light;--accent:#365a75;--wash:#e6f0f6;--ink:#202d3b;--paper:#fffdf9}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:#eeeae2;font:17px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif}main{max-width:980px;margin:auto;padding:28px 24px 40px}header{border-top:6px solid var(--accent);padding:20px 0 24px}.kicker{color:var(--accent);font-weight:750;letter-spacing:.06em;margin:0 0 8px}h1{font:700 clamp(30px,5vw,46px)/1.15 Georgia,serif;margin:0 0 14px;max-width:780px}h2{font-size:23px;line-height:1.3;margin:0 0 14px}h3{font-size:19px;margin:12px 0 8px}p{margin:0 0 16px}button,input,textarea,select{font:inherit}button{background:white;border:1px solid #87949b;color:var(--ink);border-radius:8px;padding:11px 16px;min-height:48px;cursor:pointer;font-weight:650}button:hover{background:var(--wash)}button[aria-pressed=true],button.primary{background:var(--accent);color:white;border-color:var(--accent)}:focus-visible{outline:3px solid #b45a1e;outline-offset:3px}label{display:block;font-weight:650;margin:14px 0 6px}input:not([type=checkbox]):not([type=radio]),textarea,select{display:block;width:100%;min-width:0;max-width:100%;border:1px solid #80909b;border-radius:7px;padding:11px;background:white;color:var(--ink)}input[type=checkbox],input[type=radio]{width:21px;height:21px;accent-color:var(--accent)}textarea{resize:vertical}.panel{background:var(--paper);border:1px solid #ccd2d1;border-radius:12px;padding:24px;margin-bottom:20px}.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.two>.panel{margin:0}.two{margin-bottom:20px}.actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.result{padding:18px;background:var(--wash);border-left:5px solid var(--accent);margin-top:18px;white-space:pre-line;overflow-wrap:anywhere}.note{color:#465565;font-size:16px}.strip{padding:18px;background:var(--wash);border-radius:8px;margin-bottom:18px}table{border-collapse:collapse;width:100%;font-size:16px;table-layout:fixed}th,td{text-align:left;padding:10px 8px;border-bottom:1px solid #cbd0d1;overflow-wrap:anywhere;vertical-align:top}th{background:var(--wash)}ol,ul{padding-left:24px}li+li{margin-top:8px}pre{font-size:16px;white-space:pre-wrap;overflow-wrap:anywhere}code{font-size:16px}.grid{display:grid;gap:5px;max-width:440px}.grid button{padding:5px;min-width:0}.grid input{padding:5px!important;text-align:center;font-weight:750}blockquote{font:500 26px/1.5 Georgia,serif;margin:16px 0}footer{font-size:16px;color:#465565;margin-top:22px}[hidden]{display:none!important}svg{display:block;max-width:100%;height:auto}mark{background:#e0efad;color:var(--ink)}@media(max-width:560px){main{padding:18px 12px 28px}.panel{padding:20px 16px}.two{grid-template-columns:minmax(0,1fr)}h1{font-size:32px}.actions button{flex:1 1 135px}th,td{padding:8px 5px}.grid button{min-height:40px}blockquote{font-size:24px}}
</style></head><body><main><header><p class="kicker">MEASUREMENT NOTEBOOK · MATHEMATICAL % M/V</p><h1>Keep final volume in the denominator</h1><p>Educational ratio only. Supply component mass and explicitly final volume; no real mixture, dose, or feasibility inference.</p></header><section class="panel"><h2>Choose the calculation</h2><div class="actions"><button type="button" id="forward">Mass → % m/v</button><button type="button" id="target">Target % → mass</button></div><p id="modeLabel">Forward mode</p><label for="amount">Mass or target value</label><input id="amount" type="text" value="5"><p id="amountUnit">Mass unit: g</p><div class="actions"><button type="button" id="grams">Mass in g</button><button type="button" id="kg">Mass in kg</button></div><label for="volume">Final volume</label><input id="volume" type="text" value="250"><p id="volumeUnit">Final volume unit: mL</p><div class="actions"><button type="button" id="ml">Volume in mL</button><button type="button" id="litres">Volume in L</button></div><label><input id="final" type="checkbox" checked> The volume record explicitly means final volume</label><div class="actions"><button type="button" id="calculate">Calculate</button><button type="button" id="reset">Clear record</button></div><div id="answer" class="result" role="status" aria-live="polite"></div></section><footer>Read % m/v as grams per 100 mL of final volume. These calculations do not establish mixture feasibility.</footer><noscript>JavaScript is required for the local controls. The accompanying article contains worked examples.</noscript></main><script>
(()=>{'use strict';const $=id=>document.getElementById(id);
let mode='forward',mu='g',vu='mL';const fmt=n=>n!==0&&Math.abs(n)<0.000001?n.toExponential(6):Number(n.toFixed(6)).toString();function stale(){$('answer').textContent='Inputs changed. Calculate a fresh record.';}function labels(){$('modeLabel').textContent=mode==='forward'?'Forward mode: P = 100 × mass(g) / final volume(mL)':'Target mode: mass(g) = target P × final volume(mL) / 100';$('amountUnit').textContent=mode==='forward'?'Mass unit: '+mu:'Target unit: numeric % m/v';$('volumeUnit').textContent='Final volume unit: '+vu;}function set(v){mode=v;mu='g';vu='mL';$('amount').value='';$('volume').value='';$('final').checked=false;labels();stale();}['forward','target'].forEach(id=>$(id).addEventListener('click',()=>set(id)));[['grams','g'],['kg','kg']].forEach(([id,u])=>$(id).addEventListener('click',()=>{mu=u;labels();stale();}));[['ml','mL'],['litres','L']].forEach(([id,u])=>$(id).addEventListener('click',()=>{vu=u;labels();stale();}));['amount','volume'].forEach(id=>$(id).addEventListener('input',stale));$('final').addEventListener('change',stale);function calc(){const rawAmount=$('amount').value,rawVolume=$('volume').value,a=rawAmount.trim(),v=rawVolume.trim(),valid=s=>/^\d+(?:\.\d{1,6})?$/.test(s)&&Number(s)<=1000000;if(!valid(a)||!valid(v)||Number(v)<=0){$('answer').textContent='Use nonnegative decimal values up to1000000; final volume must be positive. No exponents or commas.';return;}if(!$('final').checked){$('answer').textContent='Final-volume meaning unresolved. Supply a final-volume record, not solvent volume.';return;}const V=Number(v)*(vu==='L'?1000:1),m=mode==='forward'?Number(a)*(mu==='kg'?1000:1):Number(a)*V/100,P=mode==='forward'?100*m/V:Number(a);if(![V,m,P,10*P].every(Number.isFinite)){$('answer').textContent='Result is outside the supported finite range.';return;}$('answer').textContent='Mode: '+mode+' / Raw input text: amount='+JSON.stringify(rawAmount)+'; final volume='+JSON.stringify(rawVolume)+'; declared units '+(mode==='forward'?mu:'% m/v')+' and '+vu+' / Internal JavaScript numbers: mass(g)='+String(m)+'; final volume(mL)='+String(V)+'; percent='+String(P)+'; g/L='+String(10*P)+' / Displayed normalized values: '+fmt(m)+' g; '+fmt(V)+' mL / '+(mode==='forward'?'100 × '+fmt(m)+' / '+fmt(V):fmt(P)+' × '+fmt(V)+' / 100')+' / '+fmt(P)+'% m/v = '+fmt(P)+' g/100 mL = '+fmt(10*P)+' g/L / Mathematical mass: '+fmt(m)+' g ('+fmt(m/1000)+' kg). Display rounded to at most 6 decimals; no feasibility claim.';}$('calculate').addEventListener('click',calc);$('reset').addEventListener('click',()=>{set('forward');$('answer').textContent='Record cleared. Select inputs and confirm final volume.';});labels();calc();
})();
</script></body></html>