JSFiddle - React, Tailwind, and code Playground

by sniko

HTML

<img src="http://samplev2.mccodes.com/greenbar.png" id="positive" width="91" height="10">
<img src="http://samplev2.mccodes.com/redbar.png" id="negative" width="9" height="10">
<p>
    <button id="doMinus">-</button>
    <button id="doPlus">+</button>
</p>

CSS

img {
    border: none;
}

JavaScript

var positive = $('#positive').width();
var negative = $('#negative').width();

$('#doMinus').click(function () {
    if (negative < 100) {
        negative += 5;
        positive -= 5;
        $('#negative').attr('width', negative);
        $('#positive').attr('width', positive);
    }
});

$('#doPlus').click(function () {
    if (positive < 100) {
        negative -= 5;
        positive += 5;
        $('#negative').attr('width', negative);
        $('#positive').attr('width', positive);
    }
});