FISZKA — sześć pojęć JavaScript

<main><aside><h1>Fiszka.</h1><p>JavaScript<br>w sześciu pojęciach.</p><div class="progress"><strong id="learned">0 / 6</strong><span>opanowanych</span><progress id="learning-progress" aria-label="Postęp nauki" max="6" value="0">0 z 6</progress></div><button type="button" id="restart-deck">Zacznij od nowa</button></aside><section class="study"><div class="card-meta"><span id="card-number">Pojęcie 1</span><span>Bez pośpiechu.</span></div><h2 id="term">Closure</h2><button type="button" id="reveal" aria-controls="definition" aria-expanded="false">Pokaż znaczenie</button><p id="definition" hidden></p><div class="decisions"><button type="button" id="repeat" disabled>Jeszcze powtórzę</button><button type="button" id="know" disabled>Już wiem</button></div><p id="flash-status" class="status" role="status">Odkryj znaczenie pojęcia.</p></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:#fffbef;color:#24334f;--focus:#ad234c}main{display:grid;grid-template-columns:280px 1fr;min-height:100vh}aside{background:#e9ca54;padding:40px 32px;display:flex;flex-direction:column}h1{font:50px Georgia,serif;letter-spacing:-3px}aside>p{margin-top:18px;font-size:15px}.progress{margin:60px 0 30px}.progress strong{font-size:44px;display:block}.progress span{font-size:13px}progress{width:100%;height:7px;border:0;display:block;margin-top:16px;accent-color:#24334f}#restart-deck{margin-top:auto;background:none;border:1px solid #24334f;color:inherit;padding:10px}.study{padding:40px 7%;min-width:0;display:flex;flex-direction:column}.card-meta{display:flex;justify-content:space-between;font-size:12px;gap:15px;border-bottom:1px solid #b7b8a9;padding-bottom:18px}h2{font:clamp(44px,6vw,80px)/1.1 Georgia,serif;margin:50px 0 28px;letter-spacing:-3px;overflow-wrap:anywhere}#reveal{background:none;color:#24334f;border:0;border-bottom:2px solid #24334f;padding:10px 0;align-self:start}#definition{font:24px/1.6 Georgia,serif;max-width:36ch;margin-bottom:25px}.decisions{display:flex;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:35px}.decisions button{border:1px solid #24334f;padding:10px 18px;background:transparent;color:inherit}#know{background:#24334f;color:#fff}#flash-status{margin-top:20px}@media(max-width:650px){main{grid-template-columns:1fr}aside{padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:15px}aside>p{margin:0}.progress{margin:0}.progress strong{font-size:30px}#restart-deck{align-self:end}.study{padding:25px}h2{margin:30px 0;font-size:52px}#definition{font-size:21px}.decisions{padding-top:20px}h1{font-size:43px}}

function reviewCard(queue,known){if(!queue.length)return [];return known?queue.slice(1):[...queue.slice(1),queue[0]];}
$(function(){const cards=[['Closure','Funkcja pamięta zmienne ze swojego otoczenia, nawet gdy to otoczenie zakończyło już działanie.'],['Promise','Obiekt reprezentujący wynik operacji asynchronicznej: oczekujący, spełniony albo odrzucony.'],['Event bubbling','Zdarzenie przechodzi od elementu docelowego do jego przodków w drzewie DOM.'],['Destructuring','Składnia pozwalająca wyodrębnić wartości z tablicy lub właściwości obiektu do zmiennych.'],['Map','Kolekcja par klucz–wartość. Kluczem może być dowolna wartość, także obiekt.'],['Async / await','Składnia ułatwiająca pracę z Promise. Await wstrzymuje dalsze wykonanie danej funkcji async do rozstrzygnięcia obietnicy.']];let queue=cards.map((_,i)=>i),learned=0,revealed=false;function render(){revealed=false;$('#learned').text(learned+' / 6');$('#learning-progress').val(learned);$('#definition').prop('hidden',true);$('#know,#repeat').prop('disabled',true);$('#reveal').attr('aria-expanded','false').prop('hidden',!queue.length);if(!queue.length){$('#term').text('Dobra robota.');$('#card-number').text('Koniec zestawu');$('#flash-status').text('Wszystkie 6 pojęć opanowane.');return;}const id=queue[0];$('#term').text(cards[id][0]);$('#definition').text(cards[id][1]);$('#card-number').text('Pojęcie '+(id+1));$('#flash-status').text('Odkryj znaczenie pojęcia.');}$('#reveal').on('click',function(){if(!queue.length)return;revealed=true;$('#definition').prop('hidden',false);$(this).prop('hidden',true).attr('aria-expanded','true');$('#know,#repeat').prop('disabled',false);$('#flash-status').text('Zdecyduj, czy pojęcie wymaga powtórki.');$('#repeat').trigger('focus');});$('#know,#repeat').on('click',function(){if(!revealed)return;const known=this.id==='know';queue=reviewCard(queue,known);if(known)learned++;render();if(queue.length)$('#reveal').trigger('focus');else $('#restart-deck').trigger('focus');});$('#restart-deck').on('click',function(){queue=cards.map((_,i)=>i);learned=0;render();});render();});