Koszyk z kalkulacją zestawu

<main class="basket"><header><h1>Artykuły papiernicze</h1><p>Przykładowy koszyk.</p></header><div class="basket-grid"><section aria-label="Produkty"><article data-price="24" data-name="Notes w kratkę"><div class="product notebook" aria-hidden="true"></div><div><h2>Notes w kratkę</h2><span>24 zł / szt.</span><div class="quantity"><button data-step="-1" aria-label="Mniej notesów">−</button><output aria-label="Liczba notesów">1</output><button data-step="1" aria-label="Więcej notesów">+</button></div></div></article><article data-price="12" data-name="Ołówek grafitowy"><div class="product pencil" aria-hidden="true"></div><div><h2>Ołówek grafitowy</h2><span>12 zł / szt.</span><div class="quantity"><button data-step="-1" aria-label="Mniej ołówków">−</button><output aria-label="Liczba ołówków">2</output><button data-step="1" aria-label="Więcej ołówków">+</button></div></div></article></section><aside><h2>Podsumowanie</h2><div><span>Produkty</span><b id="items-price">48 zł</b></div><div><span>Dostawa</span><b id="shipping-price">9 zł</b></div><p class="total">Razem <strong id="basket-total">57 zł</strong></p><button id="checkout">Sprawdź zestaw</button><p id="basket-status" class="status" aria-live="polite">Dostawa bezpłatna od 100 zł.</p></aside></div></main>

*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Arial,sans-serif;color:var(--ink,#15202b);background:var(--paper,#fff);line-height:1.5}button,input,select{font:inherit}button{cursor:pointer;min-height:44px}button:disabled{cursor:not-allowed;opacity:.55}button,input,select,a{touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:3px solid var(--focus,#1368ce);outline-offset:4px}button{border-radius:0}h1,h2,p{margin-top:0}svg{display:block;max-width:100%}[hidden]{display:none!important}.status{min-height:24px;font-size:14px}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
body{--paper:#f0f1f7;--ink:#35365b;--focus:#865839}.basket{max-width:850px;margin:auto;padding:32px}header{border-bottom:2px solid #35365b;padding-bottom:12px}h1{font-family:'Trebuchet MS',sans-serif;letter-spacing:-1px;font-size:43px;margin:0 0 5px}header p{font-size:14px;margin:0}.basket-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;padding-top:24px}article{display:flex;align-items:center;gap:22px;padding:15px 0;border-bottom:1px solid #c8c9d9}.product{width:80px;height:88px;flex-shrink:0}.notebook{background:repeating-linear-gradient(0deg,transparent 0 10px,#d4ccaa 10px 11px),repeating-linear-gradient(90deg,#f8f1d7 0 10px,#d4ccaa 10px 11px);border-left:8px solid #bb7559;transform:rotate(-8deg)}.pencil{width:12px;height:83px;margin:0 34px;background:#e0b440;transform:rotate(24deg);clip-path:polygon(0 0,100% 0,100% 85%,50% 100%,0 85%)}article h2{font-size:18px;margin:0 0 3px}article span{font-size:13px;color:#676881}.quantity{display:flex;align-items:center;gap:12px;margin-top:12px}.quantity button{background:white;border:1px solid #aaaec3;color:#35365b;width:44px;font-size:21px}.quantity output{min-width:12px;text-align:center;font-weight:600}aside{background:#dfe2f0;padding:22px}aside h2{font-size:19px}aside>div{display:flex;justify-content:space-between;border-bottom:1px solid #bbc0d6;padding:9px 0;font-size:14px}.total{display:flex;align-items:center;justify-content:space-between;margin:20px 0}.total strong{font-size:29px}#checkout{background:#35365b;color:white;border:0;width:100%;padding:10px}.status{font-size:12px;margin:13px 0 0}@media(max-width:550px){.basket{padding:22px}h1{font-size:36px}.basket-grid{grid-template-columns:1fr;gap:22px}article{gap:18px}aside{padding:20px}}

(()=>{
const rows=[...document.querySelectorAll('article[data-price]')];function update(){let sum=0,quantity=0;rows.forEach(row=>{const n=Number(row.querySelector('output').value);sum+=n*Number(row.dataset.price);quantity+=n;row.querySelector('[data-step="-1"]').disabled=n===0;row.querySelector('[data-step="1"]').disabled=n===9;});const shipping=sum===0||sum>=100?0:9;document.querySelector('#items-price').textContent=sum+' zł';document.querySelector('#shipping-price').textContent=shipping+' zł';document.querySelector('#basket-total').textContent=(sum+shipping)+' zł';document.querySelector('#checkout').disabled=quantity===0;}rows.forEach(row=>row.querySelectorAll('[data-step]').forEach(button=>button.addEventListener('click',()=>{const output=row.querySelector('output');output.value=String(Math.max(0,Math.min(9,Number(output.value)+Number(button.dataset.step))));update();document.querySelector('#basket-status').textContent='Zaktualizowano: '+row.dataset.name+'. Razem '+document.querySelector('#basket-total').textContent+'.';})));document.querySelector('#checkout').addEventListener('click',()=>document.querySelector('#basket-status').textContent='Zestaw gotowy do sprawdzenia: '+document.querySelector('#basket-total').textContent+'. Nie złożono zamówienia.');update();
})();