Product quantity js counter

index.haml

.counter
  .down{:onclick => "decreaseCount(event, this)"} -
  %input{:type => "text", :value => "1"}
  .up{:onclick => "increaseCount(event, this)"} +

product-quantity-js-counter.markdown

Product quantity js counter

A Pen by pvrt on CodePen.

License.

script.js

// ==================================
// Counter
// ==================================
function increaseCount(e, el) {
  var input = el.previousElementSibling;
  var value = parseInt(input.value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  input.value = value;
}
function decreaseCount(e, el) {
  var input = el.nextElementSibling;
  var value = parseInt(input.value, 10);
  if (value > 1) {
    value = isNaN(value) ? 0 : value;
    value--;
    input.value = value;
  }
}

style.scss

body {background:#74B816;}
.counter {
  width: 120px;
  margin:50px auto;
  display: flex;
  align-items:center;
  justify-content:center;
}
.up, .down {
  display: block;
  color:white;
  font-size:18px;
  padding:0 7px;
  margin:5px;
  box-sizing:border-box;
  cursor:pointer;
  border-radius:20px;
  width: 24px;
  line-height: 24px;
  height: 24px;
  user-select:none;
  
  &:hover {
    color:darken(#74B816, 40%);
  }
}
input {
  appearance:none;
  border:0;
  background:white;
  text-align:center;
  width:42px;
  line-height:24px;
  font-size:15px;
  border-radius:5px;
}