JSFiddle - React, Tailwind, and code Playground

by helgatheviking

HTML

<div class="quantity">

  <label for="count">Some counter</label>
  <span aria-hidden="true" class="button minus">-</span>
  <input id="count" data-counter="0" type="number" value="0" />
  <span aria-hidden="true" class="button plus">+</span>
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  padding: 1em;
}

.button {
  padding: 1em;
  background: black;
  color: white;
  cursor: pointer;
}

input {
  padding: 1em;
  text-align: center;
  width: 5em;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

JavaScript

// Define element
const counter = document.getElementById('count');

// Add handler function
function doStuff(event) {
  // Logging
  console.log(event.type, event.target.value);

  // Set data attribute to match value
  event.target.dataset.counter = event.target.value;
}

// Call handler function on different events
/* counter.addEventListener('change', doStuff); */
counter.addEventListener('input', doStuff);



const handleClick = (event) => {
  if (event.target.matches('.button')) {
  	let value = counter.value || 0;

    if (event.target.matches('.plus')) {
    	value++
      counter.value = value;
    } else if (event.target.matches('.minus')) {
    	value--;
      counter.value = value >= 0 ? value : 0;
    }

    counter.dispatchEvent(new Event('input'));
  }
}

document.addEventListener('click', handleClick);