Applausknop die optelt Nieuw

<!-- Applausknop die optelt · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="k7a">
  <div class="k7a__card">
    <p class="k7a__h">Zo bouwden we de webshop van Bakkerij Jansen</p>
    <p class="k7a__p">Goed verhaal? Klap zo vaak je wilt, tot 30 keer.</p>
    <div class="k7a__row">
      <span class="k7a__wrap">
        <button class="k7a__btn" type="button" aria-label="Applaudisseren"><svg class="k7a__i" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 13V5.5a1.5 1.5 0 0 1 3 0V11m0-1V4a1.5 1.5 0 0 1 3 0v7m0-.5V5.5a1.5 1.5 0 0 1 3 0V14c0 4-2.5 6.5-6 6.5-2.4 0-3.8-1-5-2.8L3.6 14a1.5 1.5 0 0 1 2.4-1.8L8 14.5" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="k7a__ray" style="--a:-40deg"></span><span class="k7a__ray" style="--a:0deg"></span><span class="k7a__ray" style="--a:40deg"></span></button>
        <span class="k7a__bub" aria-hidden="true">+1</span>
      </span>
      <p class="k7a__tot"><span class="k7a__n">312</span> keer applaus</p>
    </div>
    <p class="k7a__sr" role="status"></p>
  </div>
</div>
</div>

/* Applausknop die optelt · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.k7a{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;text-align:left;padding:12px}
.k7a *{box-sizing:border-box}
.k7a__card{width:100%;max-width:340px;background:#fff;border:1px solid rgba(10,10,10,.14);border-radius:8px;padding:14px}
.k7a__h{margin:0 0 4px;font-size:15px;font-weight:700;line-height:1.3}
.k7a__p{margin:0 0 30px;font-size:13px;line-height:1.45;color:#3d3d3d}
.k7a__row{display:flex;align-items:center;gap:12px}
.k7a__wrap{position:relative;flex:none}
.k7a__btn{position:relative;display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid rgba(10,10,10,.25);border-radius:8px;background:#fff;color:#0a0a0a;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:border-color .15s,background-color .15s}
.k7a__btn:hover{border-color:#0a0a0a}
.k7a__btn:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.k7a__btn.is-mine{border-color:#0a0a0a;background:#fff3ee;color:#b8360a}
.k7a__i{width:24px;height:24px;transform-origin:30% 90%}
.k7a__btn.is-tik .k7a__i{animation:k7a-tik .22s ease-out}
@keyframes k7a-tik{45%{transform:rotate(-14deg) scale(1.08)}}
.k7a__ray{position:absolute;left:50%;top:50%;width:2px;height:6px;margin:-3px 0 0 -1px;background:#F5480F;border-radius:1px;opacity:0;transform:rotate(var(--a)) translateY(-22px)}
.k7a__btn.is-tik .k7a__ray{animation:k7a-ray .35s ease-out}
@keyframes k7a-ray{0%{opacity:1;transform:rotate(var(--a)) translateY(-18px) scaleY(.4)}100%{opacity:0;transform:rotate(var(--a)) translateY(-28px)}}
.k7a__bub{position:absolute;left:50%;bottom:100%;min-width:34px;margin:0 0 4px -17px;padding:3px 6px;border-radius:4px;background:#0a0a0a;color:#fff;font-size:12px;font-weight:700;line-height:1.3;text-align:center;font-variant-numeric:tabular-nums;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .25s cubic-bezier(.3,1.4,.5,1);pointer-events:none}
.k7a__bub.is-on{opacity:1;transform:none}
.k7a__bub.is-bump{animation:k7a-bump .2s}
@keyframes k7a-bump{50%{transform:translateY(-3px) scale(1.08)}}
.k7a__tot{margin:0;font-size:13px;color:#4d4d4d}
.k7a__n{font-weight:700;color:#0a0a0a;font-variant-numeric:tabular-nums}
.k7a__sr{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.k7a__btn.is-tik .k7a__i,.k7a__btn.is-tik .k7a__ray,.k7a__bub.is-bump{animation:none}.k7a__bub{transition:none}}

// Applausknop die optelt · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie
// root = het element waarin de HTML staat
function init(root){
var w = root.querySelector('.k7a'); if (!w) return;
    var btn = w.querySelector('.k7a__btn'), bub = w.querySelector('.k7a__bub'), nEl = w.querySelector('.k7a__n'), sr = w.querySelector('.k7a__sr');
    var BASE = 312, MAX = 30, mine = 0, hideT = 0, srT = 0, holdT = 0, repT = 0;
    function redo(el, c) { el.classList.remove(c); void el.offsetWidth; el.classList.add(c); }
    function klap() {
      if (mine >= MAX) { bub.textContent = 'Max 30'; bub.classList.add('is-on'); redo(bub, 'is-bump'); }
      else {
        mine++; nEl.textContent = BASE + mine; bub.textContent = '+' + mine;
        btn.classList.add('is-mine'); bub.classList.add('is-on'); redo(bub, 'is-bump'); redo(btn, 'is-tik');
        btn.setAttribute('aria-label', 'Applaudisseren, jij klapte ' + mine + ' keer');
      }
      clearTimeout(hideT); hideT = setTimeout(function () { bub.classList.remove('is-on'); }, 1100);
      clearTimeout(srT); srT = setTimeout(function () { sr.textContent = 'Jij klapte ' + mine + ' keer. In totaal ' + (BASE + mine) + ' keer applaus.'; }, 700);
    }
    function stopHold() { clearTimeout(holdT); clearInterval(repT); }
    btn.addEventListener('pointerdown', function (e) {
      if (e.button) return; e.preventDefault(); klap();
      holdT = setTimeout(function () { repT = setInterval(klap, 140); }, 380);
    });
    ['pointerup', 'pointerleave', 'pointercancel'].forEach(function (t) { btn.addEventListener(t, stopHold); });
    btn.addEventListener('click', function (e) { if (e.detail === 0) klap(); });
    btn.addEventListener('keydown', function (e) { if (e.repeat && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); klap(); } });
}
init(document.querySelector('.jouw-container'));