JSFiddle - React, Tailwind, and code Playground

by alirokni

HTML

404 story
<br/>
<div class="container">
    <div id="decrease" class="action-box">-</div>
    <input type="text" value="1" id="resultNumber" class="result-box" />
    <div id="increase" class="action-box">+</div>
</div>
<br/>
<br/>
<input type="submit" value="ADD TO BAG" id="addToBag" class="add-to-bag" />

CSS

.container {
    border: 1px solid #ccc;
    width: 90px;
    display:inline-block;
}
.action-Box, .result-box {
    height: 25px;
    font-family:'Arial Regular', 'Arial';
    outline-width: 0;
}
.action-box {
    font-size: 17px;
    color: #999999;
    background-color: #f7f7f7;
    font-weight: bolder;
    width:29px;
    line-height: 25px;
    padding: 1px 0;
    float: left;
    text-align: center;
    cursor: pointer;
}
.result-box {
    font-size: 15px;
    border:0;
    color: black;
    cursor: default;
    font-weight: bolder;
    width:28px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    float: left;
    text-align: center;
}
.add-to-bag {
    font-family:'Arial Regular', 'Arial';
    clear: both;
    width: 250px;
    line-height: 20px;
    background-color: #f7f7f7;
    font-size: 15px;
    outline-width: 0;
}

JavaScript

var $addItem = parseInt($("#resultNumber").val(), 10), // Data Type Conversion; String to Integer (int)
    lowThreshhold = 1, // Min Quantity
    highThreshhold = 10; // Max Quantity;
/*
 Show the /increased/decreased/entered quantitiy, logic to show max/min quantitiy
 remove max quantitiy logic if it is not required.
*/
$("#resultNumber").on('change', function () {
    var inputs = $("input[type='text']#resultNumber").val();
    if (inputs > highThreshhold) {
        inputs = highThreshhold;
    } else if (inputs < lowThreshhold) {
        inputs = lowThreshhold;
    } else {
        inputs = $("input[type='text']#resultNumber").val();
    }
    $("#resultNumber").val(inputs);
    $addItem = parseInt(inputs, 10);
});

/*
 click event handlers functionality, remove max quantitiy logic if it is not required.
*/
$('#increase, #decrease').on('click', function () {
    if ($addItem < highThreshhold && $(this).attr('id') === 'increase') {
        $("#resultNumber").val($addItem = $addItem + 1);
    } else if ($addItem > lowThreshhold && $(this).attr('id') === 'decrease') {
        $("#resultNumber").val($addItem = $addItem - 1);
    }
});

/*
 add final quantitiy to the Add to bag and set the deafult to 1
*/
$("input[type='submit']#addToBag").on('click', function () {
    $("#addToBag").val("Add to Bag " + $addItem + " items.");
    $("#resultNumber").val(1);
    $addItem = 1;
});