Ankieta nastroju z żywym wskaźnikiem

<main class="survey"><div class="gauge"><span>Dzisiejszy nastrój</span><output id="mood-number" for="mood">7</output><p id="mood-label">Całkiem dobrze</p><div class="bars" aria-hidden="true"></div></div><form id="mood-form"><h1>Jak Ci dzisiaj idzie?</h1><label for="mood">Oceń swój dzień od 1 do 10</label><input id="mood" type="range" min="1" max="10" value="7"><div class="scale"><span>Trudny dzień</span><span>Świetny dzień</span></div><fieldset><legend>Na czym chcesz się skupić?</legend><label><input type="radio" name="area" value="odpoczynku" checked> Odpoczynek</label><label><input type="radio" name="area" value="ruchu"> Ruch</label><label><input type="radio" name="area" value="pracy"> Praca</label></fieldset><button type="button" data-demo-submit>Zapisz odpowiedź</button><p id="status" class="status" role="status"></p><p class="note">Przykładowa odpowiedź.</p></form></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:#e7efdf;--accent:#30583d;color:#263b2b}.survey{display:grid;grid-template-columns:230px 1fr;gap:44px}.gauge{border-right:1px solid #8eaa8d;padding-right:24px}.gauge output{font:150px/1 Georgia,serif;color:#30583d}.gauge p{font-weight:600}.bars{display:flex;height:70px;gap:5px;align-items:flex-end}.bars i{display:block;background:#30583d;flex:1;opacity:.2}.bars i.on{opacity:1}.scale{display:flex;justify-content:space-between;font-size:13px;margin-bottom:26px}.survey fieldset{margin:20px 0}.survey fieldset label{font-weight:400}.survey button{background:#30583d}@media(max-width:560px){.survey{grid-template-columns:1fr;gap:20px}.gauge{border-right:0;border-bottom:1px solid #8eaa8d;display:grid;grid-template-columns:1fr 100px;padding:0 0 15px}.gauge output{font-size:72px;grid-row:1/3;grid-column:2}.bars{display:none}}

(()=>{const q=s=>document.querySelector(s);const all=s=>[...document.querySelectorAll(s)];for(let i=1;i<=10;i++){const bar=document.createElement('i');bar.style.height=(15+i*5)+'px';q('.bars').append(bar)}const update=()=>{const n=Number(q('#mood').value);q('#mood-number').textContent=n;q('#mood-label').textContent=n<4?'Potrzebuję przerwy':n<7?'Spokojnie, krok po kroku':n<9?'Całkiem dobrze':'Świetna energia';all('.bars i').forEach((e,i)=>e.classList.toggle('on',i<n));q('#status').textContent=''};q('#mood').oninput=update;q('#mood-form').onsubmit=e=>{e.preventDefault();q('#status').textContent=`Zapisano ocenę ${q('#mood').value}/10. Skupiasz się na ${q('input[name=area]:checked').value}.`};update();all('form').forEach(form=>{const submit=form.querySelector('[data-demo-submit]');if(!submit)return;submit.addEventListener('click',()=>form.dispatchEvent(new Event('submit',{cancelable:true})));form.addEventListener('keydown',event=>{if(event.key==='Enter'&&!event.defaultPrevented&&event.target.matches('input:not([type=radio]):not([type=checkbox])')){event.preventDefault();submit.click();}})});})();