JSFiddle - React, Tailwind, and code Playground

by tripcollor

HTML

<p>Киллограммы шаг 0,5 мин - 0 , макс - 7, старт -1</p>
<div id="order-box-1">
    <button class="inc-order" >+</button>
    <input class="order" type="text" maxlength="7" />
    <button class="dec-order" >-</button>
</div>
    <p>Штуки шаг 1, мин - 0 , макс - 10 , старт 0 </p>    
<div id="order-box-2">
    <button class="inc-order" >+</button>
    <input class="order" type="text" maxlength="7" />
    <button class="dec-order" >-</button>
</div>
    
<p> Миллиграммы, шаг 0,01 , мин - 0 , макс - 1, старт - 0.5 </p>    
<div id="order-box-3">
    <button class="inc-order" >+</button>
    <input class="order" type="text" maxlength="7" />
    <button class="dec-order" >-</button>
</div>

CSS

.order{
    width:50px;
}

.inc-order, .dec-order{
    width:30px;
    text-align:center;
}

JavaScript

function OrderCounter (params){
    this.$el = $(params.el);
    this.$incButton = this.$el.find('.inc-order');
    this.$decButton = this.$el.find('.dec-order');
    this.$orderInput = this.$el.find('.order');
    this.maxValue=params.maxValue;
    this.minValue = params.minValue;
    this.dim=params.dim;
    this.startValue = params.startValue;
    this.step = params.step;
    
    this._value = this.startValue;
    this._tmpValue = this.startValue;
     
    var self=this;
     
    this.$incButton.on('click',function(){self.incFn()});
    this.$decButton.on('click',function(){self.decFn()});
     
    this.validate=function(){
        if(this._tmpValue>=this.minValue && this._tmpValue<=this.maxValue ){
            this._value = this._tmpValue;
        }else{
            this._tmpValue = this._value;
        }
        
        this.render();
        
    }
    
    this.incFn = function(){
        this._tmpValue = this._tmpValue + this.step;
        this.validate();
    };
    this.decFn = function(){
        this._tmpValue = this._tmpValue - this.step;
        this.validate();
    };
    
  
    
    this.render = function(){
        this.$orderInput.val(this._value + ' ' + this.dim);
    }
    
    this.render();
    
}

var orderCounter = new OrderCounter({
    el:"#order-box-1",
    startValue:1,
    maxValue:7,
    minValue:0,
    step:0.5,
    dim:'кг'
});

var orderCounter = new OrderCounter({
    el:"#order-box-2",
    startValue:0,
    maxValue:10,
    minValue:0,
    step:1,
    dim:'шт'
});

var orderCounter = new OrderCounter({
    el:"#order-box-3",
    startValue:0.5,
    maxValue:1,
    minValue:0,
    step:0.01,
    dim:'мг'
});