拍手(クラップ)カウンター

<div class="d06-04-04-wrap">
          <button class="d06-04-04-btn" type="button" aria-label="拍手">
            <svg viewBox="0 0 24 24" width="32" height="32"><path d="M8 3a1 1 0 0 1 1 1v7h1V2a1 1 0 1 1 2 0v9h1V3a1 1 0 1 1 2 0v9h1V6a1 1 0 1 1 2 0v9a6 6 0 0 1-6 6H9a6 6 0 0 1-5.2-3l-2-3.5a1.2 1.2 0 0 1 2-1.3L6 16V4a1 1 0 0 1 2-1z"/></svg>
          </button>
          <span class="d06-04-04-count">0</span>
        </div>

.d06-04-04-wrap { display:flex; flex-direction:column; align-items:center; gap:4px; }
        .d06-04-04-btn { border:none; background:#fef3c7; color:#d97706; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
        .d06-04-04-btn svg { fill:currentColor; }
        .d06-04-04-btn.d06-04-04-bounce { animation:d534bounce .35s ease; }
        @keyframes d534bounce { 0%{transform:scale(1);} 40%{transform:scale(1.25) rotate(-8deg);} 100%{transform:scale(1);} }
        .d06-04-04-count { font-size:18px; font-weight:700; color:#1f2937; }

(function(){
          var article = document.currentScript.closest('article');
          var root = article.querySelector('.d06-04-04');
          var btn = root.querySelector('.d06-04-04-btn');
          var countEl = root.querySelector('.d06-04-04-count');
          var count = 0;
          btn.addEventListener('click', function(){
            count++;
            countEl.textContent = count;
            btn.classList.remove('d06-04-04-bounce');
            void btn.offsetWidth;
            btn.classList.add('d06-04-04-bounce');
            btn.style.color = (count % 10 === 0) ? '#f43f5e' : '#d97706';
          });
        })();