Kalkulator VAT jak drukowany paragon

<main class="vat"><section><h1>Ile wynosi<br>brutto?</h1><p>Kwota netto + podatek VAT.</p><div class="field"><label for="net">Kwota netto (zł)</label><input id="net" type="number" min="0" max="100000000" step="0.01" value="1000"></div><label for="vat-rate">Stawka VAT</label><select id="vat-rate"><option value="23">23%</option><option value="8">8%</option><option value="5">5%</option><option value="0">0%</option></select><p class="note">Wynik zaokrąglany do dwóch miejsc po przecinku.</p><p id="status" role="status"></p></section><div class="receipt"><header>Podsumowanie</header><dl><div><dt>Netto</dt><dd id="net-output">1 000,00 zł</dd></div><div><dt>VAT <span id="rate-label">23%</span></dt><dd id="tax-output">230,00 zł</dd></div></dl><p>Razem brutto</p><output id="gross">1 230,00 zł</output><div class="barcode" aria-hidden="true"></div><small>Przykładowe obliczenie</small></div></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:#efad56;color:#3f2918;--accent:#704016}.vat{display:grid;grid-template-columns:1fr 330px;gap:60px;max-width:780px}.vat h1{font-family:Georgia,serif}.receipt{background:#fffdf7;padding:28px;color:#28251f;font-family:ui-monospace,monospace;border:1px solid #8d6c49;transform:rotate(2deg)}.receipt header{border-bottom:1px dashed #77736b;padding-bottom:15px;text-align:center}.receipt dl{margin:22px 0}.receipt dl div{display:flex;justify-content:space-between;gap:15px;margin:13px 0;font-size:14px}.receipt dd{margin:0}.receipt p{margin:0;border-top:1px dashed #77736b;padding-top:15px}.receipt output{font-size:32px;font-weight:700;margin:8px 0 22px;overflow-wrap:anywhere}.barcode{height:30px;margin-bottom:14px;background:repeating-linear-gradient(90deg,#28251f 0 2px,transparent 2px 4px,#28251f 4px 5px,transparent 5px 9px)}@media(max-width:560px){.vat{grid-template-columns:1fr;gap:24px}.receipt{transform:none}}

(()=>{const q=s=>document.querySelector(s);const all=s=>[...document.querySelectorAll(s)];const money=n=>new Intl.NumberFormat('pl-PL',{style:'currency',currency:'PLN'}).format(n);const update=()=>{const input=q('#net');if(!input.checkValidity()||input.value===''){q('#status').textContent='Podaj kwotę od 0 do 100 000 000 zł.';return}q('#status').textContent='';const net=Math.round(Number(input.value)*100);const tax=Math.round(net*Number(q('#vat-rate').value)/100);q('#net-output').textContent=money(net/100);q('#tax-output').textContent=money(tax/100);q('#gross').textContent=money((net+tax)/100);q('#rate-label').textContent=q('#vat-rate').value+'%';};q('#net').oninput=update;q('#vat-rate').onchange=update;update();})();