Konwerter długości i temperatury

<main class="units"><header><h1>Konwerter<br>jednostek.</h1><label for="unit-mode">Rodzaj przeliczenia</label><select id="unit-mode"><option value="length">Długość</option><option value="temperature">Temperatura</option></select></header><section><div class="unit-input"><label for="unit-value">Wartość</label><input id="unit-value" type="number" step="any" value="1" min="-1000000" max="1000000"></div><div class="unit-row"><div><label for="unit-from">Z jednostki</label><select id="unit-from"></select></div><button id="unit-swap" type="button" aria-label="Zamień jednostki">⇄</button><div><label for="unit-to">Na jednostkę</label><select id="unit-to"></select></div></div><div class="unit-result"><span>Wynik</span><output id="unit-output">100 cm</output></div><p id="status" class="status" role="status"></p></section></main>

*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:24px;font:16px/1.45 system-ui,sans-serif;display:grid;align-content:center;color:#17212e;background:#f5f7fb}main{width:min(100%,850px);margin:auto}h1,h2,p{margin:0 0 16px}h1{font-size:clamp(26px,4vw,42px);line-height:1.1}h2{font-size:21px}label{display:block;font-weight:600;margin-bottom:6px}input,select,textarea,button{font:inherit;max-width:100%}input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=color]),select,textarea{width:100%;padding:10px 12px;background:#fff;color:#17212e;border:1px solid #748091;min-height:44px;border-radius:0}textarea{resize:vertical}button{min-height:44px;padding:10px 18px;border:1px solid currentColor;background:#17212e;color:white;cursor:pointer;border-radius:0}button:hover{filter:brightness(1.15)}button:disabled{cursor:default;opacity:.55}button.secondary{background:transparent;color:inherit}input[type=radio],input[type=checkbox]{width:20px;height:20px;vertical-align:middle;accent-color:var(--accent,#3155c7)}input[type=range]{width:100%;accent-color:var(--accent,#3155c7);min-height:32px}input[type=color]{width:100%;min-height:52px;cursor:pointer;background:transparent;border:1px solid currentColor}fieldset{border:0;padding:0;margin:0}legend{font-weight:600;margin-bottom:12px}output{display:block}small,.note{font-size:13px}p.note{margin:10px 0 0}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent,#3155c7);outline-offset:3px}[hidden]{display:none!important}.field{margin-bottom:16px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.status{min-height:24px;margin-top:14px;font-weight:600;overflow-wrap:anywhere}.muted{color:#4b5868}.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:560px){body{padding:18px}.two{grid-template-columns:1fr}h1{font-size:29px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}body{background:#eaf5ff;color:#244d74;--accent:#275f91}.units{display:grid;grid-template-columns:1fr 1.2fr;gap:50px}.units h1{font-family:Georgia,serif;font-weight:400}.unit-input input{font-size:26px!important}.unit-row{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:end;margin:20px 0}.unit-row button{font-size:25px;background:#275f91;padding:5px 12px}.unit-result{border-top:2px solid #275f91;padding-top:15px}.unit-result output{font:clamp(30px,5vw,48px)/1.3 Georgia,serif;overflow-wrap:anywhere}.unit-result span{font-size:14px}@media(max-width:560px){.units{grid-template-columns:1fr;gap:24px}.unit-row{gap:8px}.unit-row select{padding:10px 6px}}

(()=>{const q=s=>document.querySelector(s);const all=s=>[...document.querySelectorAll(s)];const tables={length:{m:'metry (m)',cm:'centymetry (cm)',ft:'stopy (ft)'},temperature:{C:'Celsjusz (°C)',F:'Fahrenheit (°F)',K:'Kelvin (K)'}};const update=()=>{const v=Number(q('#unit-value').value),from=q('#unit-from').value,to=q('#unit-to').value,mode=q('#unit-mode').value;if(q('#unit-value').value===''||!q('#unit-value').checkValidity()){q('#status').textContent='Podaj liczbę od −1 000 000 do 1 000 000.';return}let result;if(mode==='length'){const factor={m:1,cm:.01,ft:.3048};result=v*factor[from]/factor[to]}else{const c=from==='C'?v:from==='F'?(v-32)*5/9:v-273.15;if(c < -273.15){q('#status').textContent='Temperatura nie może być niższa od zera bezwzględnego.';return}result=to==='C'?c:to==='F'?c*9/5+32:c+273.15}q('#status').textContent='';q('#unit-output').textContent=new Intl.NumberFormat('pl-PL',{maximumFractionDigits:4}).format(result)+' '+(mode==='temperature'&&to!=='K'?'°':'')+to};const setup=()=>{const table=tables[q('#unit-mode').value];all('#unit-from,#unit-to').forEach(select=>{select.replaceChildren();Object.entries(table).forEach(([value,text])=>{const option=document.createElement('option');option.value=value;option.textContent=text;select.append(option)})});q('#unit-to').selectedIndex=1;update()};q('#unit-mode').onchange=setup;q('#unit-value').oninput=update;q('#unit-from').onchange=update;q('#unit-to').onchange=update;q('#unit-swap').onclick=()=>{const from=q('#unit-from').value;q('#unit-from').value=q('#unit-to').value;q('#unit-to').value=from;update()};setup();})();