PORCJA — przelicznik przepisu

<main><aside><p>Na kuchennym blacie</p><h1>Jeszcze <br>jedna <br>porcja.</h1><div class="portion"><label for="servings">Liczba porcji</label><input id="servings" type="number" min="1" max="24" step="1" value="4"><span>Przepis bazowy: 4 porcje</span></div></aside><section class="recipe"><header><span>Śniadanie</span><h2>Placuszki<br>z jogurtem</h2><p>Zmieniaj porcje. Odhaczaj składniki.</p></header><ul id="ingredients"></ul><p id="recipe-status" class="status" role="status">Składniki na 4 porcje.</p><button type="button" id="uncheck">Odznacz składniki</button><footer>Gramatury są przykładowe; dopasuj konsystencję ciasta.</footer></section></main>

*{box-sizing:border-box}body{margin:0;font:16px/1.5 Arial,sans-serif}h1,h2,h3,p{margin:0}button,input,textarea,select{font:inherit;border-radius:0}button{cursor:pointer;min-height:44px}input,select{min-height:44px}button:disabled{cursor:default;opacity:.5}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--focus,#1457d9);outline-offset:3px}label{display:block}textarea{resize:vertical;width:100%;max-width:100%}main{min-height:100vh}button:active:not(:disabled){filter:brightness(.9)}[hidden]{display:none!important}.status{min-height:1.5em;font-size:14px}footer{font-size:12px;margin-top:24px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}input,textarea,select{color:inherit}h1{line-height:1.05;letter-spacing:-.04em}button{transition:background-color .15s,color .15s}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}body{background:#f4d9dd;color:#672838;--focus:#173fa1}main{display:grid;grid-template-columns:.9fr 1.2fr;max-width:1050px;margin:auto}aside{padding:40px 12%}aside p{font-size:14px}h1{font:70px/.97 Georgia,serif;letter-spacing:-4px;margin:32px 0}.portion{border-top:1px solid #9d6370;padding-top:20px}.portion input{display:block;width:100%;font:54px Georgia,serif;background:none;border:0;border-bottom:2px solid #672838;padding:8px 0}.portion span{display:block;font-size:12px;margin-top:8px}.recipe{margin:30px 30px 30px 0;background:#fffcf8;padding:34px;color:#352d2d}h2{font:42px/1.07 Georgia,serif;margin:10px 0 15px}.recipe header>span{font-size:13px;color:#9a3c52}ul{padding:0;list-style:none;margin:24px 0}li{border-bottom:1px solid #d8ceca}li label{display:flex;gap:12px;align-items:center;padding:14px 0;cursor:pointer}li input{min-height:24px;width:24px;accent-color:#9a3c52}li span{flex:1}li strong{font-variant-numeric:tabular-nums}li:has(input:checked) span{text-decoration:line-through;color:#786a67}button{background:#672838;color:white;border:0;padding:10px 20px;margin-top:15px}@media(max-width:640px){main{display:block}aside{padding:25px}h1{font-size:48px;margin:18px 0}h1 br{display:none}.portion input{font-size:38px}.recipe{margin:0 15px 20px;padding:25px}}

function scaleIngredients(portions){if(!Number.isInteger(portions)||portions<1||portions>24)throw new Error('Wpisz pełną liczbę od 1 do 24.');return [240,200,2,20,6].map(amount=>Math.round(amount*portions/4*10)/10);}
$(function(){const names=['Mąka pszenna','Jogurt naturalny','Jajka','Cukier','Proszek do pieczenia'],units=['g','g','szt.','g','g'];function render(){try{const n=Number($('#servings').val()),amounts=scaleIngredients(n),checked=$('#ingredients input').map((i,e)=>e.checked).get();$('#ingredients').empty();names.forEach((name,i)=>{const input=$('<input type="checkbox">').prop('checked',!!checked[i]).attr('aria-label',name+' przygotowane');$('#ingredients').append($('<li>').append($('<label>').append(input,$('<span>').text(name),$('<strong>').text(amounts[i].toLocaleString('pl-PL')+' '+units[i]))));});$('#recipe-status').text('Składniki na '+n+' '+(n===1?'porcję':n<5?'porcje':'porcji')+'.');$('#servings').attr('aria-invalid','false');}catch(e){$('#recipe-status').text(e.message);$('#servings').attr('aria-invalid','true');}}$('#servings').on('input',render);$('#uncheck').on('click',function(){$('#ingredients input').prop('checked',false);$('#recipe-status').text('Lista składników odznaczona.');});render();});