Quantity Stepper

<!-- Quantity Stepper · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="qst-wrap"><button class="qst-btn" data-d="-1" aria-label="minder">&minus;</button><div class="qst-val"><span class="qst-num">1</span></div><button class="qst-btn" data-d="1" aria-label="meer">+</button></div>
</div>

/* Quantity Stepper · NedDev · eigen werk. */
.qst-wrap{display:inline-flex;align-items:center;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:12px;overflow:hidden;font-family:'Switzer',sans-serif}
.qst-btn{width:46px;height:46px;border:none;background:#fff;color:#0a0a0a;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.qst-btn:hover{background:#F5480F;color:#fff}.qst-btn:active{transform:scale(.9)}
.qst-val{width:54px;text-align:center;border-left:1px solid rgba(10,10,10,.12);border-right:1px solid rgba(10,10,10,.12);height:46px;display:flex;align-items:center;justify-content:center}
.qst-num{font-size:17px;font-weight:600;color:#0a0a0a;display:inline-block}
.qst-num.qst-bump{animation:qst-b .25s ease}
@keyframes qst-b{0%{transform:scale(1)}40%{transform:scale(1.4);color:#F5480F}100%{transform:scale(1)}}

// Quantity Stepper · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.qst-wrap')||root;var num=root.querySelector('.qst-num');[].forEach.call(root.querySelectorAll('.qst-btn'),function(b){b.addEventListener('click',function(){var v=Math.max(0,parseInt(num.textContent,10)+parseInt(b.dataset.d,10));num.textContent=v;num.classList.remove('qst-bump');void num.offsetWidth;num.classList.add('qst-bump');});});
}
init(document.querySelector('.jouw-container'));