Peiling met uitslag Nieuw

<!-- Peiling met uitslag · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="pol"><div class="pol__in">
<form class="pol__form">
<fieldset class="pol__fs"><legend class="pol__q">Bakkerij Bart, Haarlem: vanaf hoe laat wil je op zondag verse broodjes halen?</legend>
<label class="pol__o"><input type="radio" name="pol-a" value="0"><span>Vanaf 8:00</span></label>
<label class="pol__o"><input type="radio" name="pol-a" value="1"><span>Vanaf 9:00</span></label>
<label class="pol__o"><input type="radio" name="pol-a" value="2"><span>Vanaf 10:00</span></label>
<label class="pol__o"><input type="radio" name="pol-a" value="3"><span>Op zondag hoef ik niet</span></label>
</fieldset>
<div class="pol__foot"><button class="pol__btn" type="submit">Stem</button><span class="pol__hint" aria-live="polite">Peiling sluit vrijdag 16 oktober</span></div>
</form>
<div class="pol__res" hidden>
<p class="pol__q pol__rq" tabindex="-1">Zondag verse broodjes, de stand tot nu toe</p>
<ul class="pol__list"></ul>
<div class="pol__foot"><button class="pol__link" type="button">Stem wijzigen</button><span class="pol__hint pol__tot"></span></div>
</div>
</div></div>
</div>

/* Peiling met uitslag · NedDev · eigen werk. */
.pol{position:absolute;inset:0;overflow:auto;display:flex;padding:12px;box-sizing:border-box;background:#f4f3f1;font-family:'Switzer',sans-serif;color:#0a0a0a}
.pol *,.pol *::before,.pol *::after{box-sizing:border-box}
.pol [hidden]{display:none!important}
.pol__in{margin:auto;width:100%;max-width:380px;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:8px;padding:14px 16px}
.pol__fs{border:0;margin:0;padding:0;min-width:0;display:grid;gap:5px}
.pol__q{padding:0;margin:0 0 8px;font-size:14px;font-weight:700;line-height:1.35;outline:none}
.pol__o{position:relative;display:flex;align-items:center;gap:9px;min-height:34px;padding:5px 10px;border:1px solid rgba(10,10,10,.2);border-radius:4px;font-size:13.5px;cursor:pointer;transition:border-color .15s,background-color .15s}
.pol__o:hover{border-color:#0a0a0a}
.pol__o:has(input:checked){border-color:#0a0a0a;box-shadow:inset 0 0 0 1px #0a0a0a}
.pol__o input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pol__o::before{content:'';flex:none;width:16px;height:16px;border:1.5px solid #6b6b6b;border-radius:50%;background:#fff;transition:border-color .15s,box-shadow .15s}
.pol__o:has(input:checked)::before{border-color:#0a0a0a;box-shadow:inset 0 0 0 4px #fff;background:#0a0a0a}
.pol__o:has(input:focus-visible){outline:2px solid #F5480F;outline-offset:2px}
.pol__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;flex-wrap:wrap}
.pol__btn{height:36px;padding:0 18px;border:0;border-radius:4px;background:#0a0a0a;color:#fff;font:600 13.5px 'Switzer',sans-serif;cursor:pointer;transition:background-color .15s}
.pol__btn:hover{background:#2a2a2a}
.pol__btn:active{transform:translateY(1px)}
.pol__hint{font-size:12.5px;color:#4a4a4a}
.pol__hint.is-bad{color:#B42318}
.pol__link{border:0;background:none;padding:4px 0;min-height:24px;font:500 13px 'Switzer',sans-serif;color:#0a0a0a;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pol__btn:focus-visible,.pol__link:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.pol__list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.pol__r{font-size:13px}
.pol__rt{display:flex;justify-content:space-between;gap:8px;margin-bottom:3px}
.pol__rt b{font-variant-numeric:tabular-nums}
.pol__bar{height:8px;background:#ece9e4;border-radius:2px;overflow:hidden}
.pol__bar i{display:block;height:100%;width:0;background:#a3a09a;border-radius:2px;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.pol__r.is-top .pol__bar i{background:#0a0a0a}
.pol__r.is-mine .pol__bar i{background:#F5480F}
.pol__me{font-weight:600}
@media (prefers-reduced-motion:reduce){.pol *{transition:none!important}}

// Peiling met uitslag · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.pol');if(!w)return;
var sfx='-'+Math.random().toString(36).slice(2,7);w.querySelectorAll('input[type=radio]').forEach(function(r){r.name=r.name+sfx;});
var f=w.querySelector('.pol__form'),res=w.querySelector('.pol__res'),list=w.querySelector('.pol__list'),hint=f.querySelector('.pol__hint'),tot=w.querySelector('.pol__tot');
var BASE=[61,104,52,30],LAB=['Vanaf 8:00','Vanaf 9:00','Vanaf 10:00','Op zondag hoef ik niet'],rm=window.matchMedia&&matchMedia('(prefers-reduced-motion: reduce)').matches;
f.addEventListener('submit',function(e){e.preventDefault();var c=f.querySelector('input:checked');
 if(!c){hint.textContent='Kies eerst een antwoord';hint.classList.add('is-bad');f.querySelector('input').focus();return;}
 var me=+c.value,cnt=BASE.slice();cnt[me]++;var sum=cnt.reduce(function(a,b){return a+b;},0),top=cnt.indexOf(Math.max.apply(null,cnt));
 list.innerHTML='';var bars=[];
 cnt.forEach(function(n,i){var p=Math.round(n/sum*100),li=document.createElement('li');li.className='pol__r'+(i===top?' is-top':'')+(i===me?' is-mine':'');
  li.innerHTML='<div class="pol__rt"><span>'+LAB[i]+(i===me?' <span class="pol__me">(jouw stem)</span>':'')+'</span><b>'+p+'%</b></div><div class="pol__bar" aria-hidden="true"><i></i></div>';
  li.setAttribute('aria-label',LAB[i]+': '+p+' procent, '+n+' stemmen'+(i===me?', jouw stem':''));list.appendChild(li);bars.push([li.querySelector('i'),p]);});
 tot.textContent=sum+' stemmen, sluit vrijdag';f.hidden=true;res.hidden=false;
 var go=function(){bars.forEach(function(b){b[0].style.width=b[1]+'%';});};
 if(rm)go();else requestAnimationFrame(function(){requestAnimationFrame(go);});
 res.querySelector('.pol__rq').focus();});
f.addEventListener('change',function(){hint.textContent='Peiling sluit vrijdag 16 oktober';hint.classList.remove('is-bad');});
w.querySelector('.pol__link').addEventListener('click',function(){res.hidden=true;f.hidden=false;var c=f.querySelector('input:checked');(c||f.querySelector('input')).focus();});
}
init(document.querySelector('.jouw-container'));