JSFiddle - React, Tailwind, and code Playground

by Cerlin ST

HTML

<div class="loadingTank">
    <div id="tankPercentageFrom" data-tonneValue="8000" data-currentval="5000" style="position:absolute; font-size:x-large; color:white;">40%</div>
</div>
<div class="loadingTank">
    <div id="tankPercentageTo" data-tonneValue="7500" data-currentval="1" style="position:absolute; font-size:x-large; color:white;">40%</div>
</div>
<div id="contentPanel" class="k-header" style="width:25%; float:left">
     <h3>TRANSER</h3>

    <hr />
    <br />From:
    <br />
    <select id="firstTank">
        <option selected="" value="1">Tank 1</option>
        <option value="2">Tank 2</option>
    </select>
    <br />Amount:
    <br />
    <input type="number" id="amount" placeholder="Enter Tonne here" class="k-textbox" />
    <br />To:
    <br />
    <select id="secondTank">
        <option value="1">Tank 1</option>
        <option selected="" value="2">Tank 2</option>
    </select>
    <button class="k-button" id="submitChanges">Transfer</button>
</div>

CSS

.loadingTank {
     display:inline-block;
     border:2px solid black;
     margin:15px;
     max-width:350px;
     height:500px;
     width:30%;
     background-color:#808080;
     box-shadow: rgb(56, 56, 56) 0px -200px 0px -2px inset;
     /*Change this value for leveling*/
     float:left;
     position:relative;
     border-radius:2%;
 }
 .loadingTank:before {
     content:"";
     width:70%;
     height:100%;
     float:left;
     background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
     background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.4)), color-stop(100%, rgba(208, 208, 208, 0)));
     background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
     background: -o-linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
     background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
     background: linear-gradient(to right, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000', endColorstr='#00d0d0d0', GradientType=1);
 }
 .loadingTank:after {
     /*idea is for this to be the 'leveling'*/
     content:"";
     width:10%;
     height:100%;
     border-radius:10px;
     border:2px solid black;
     background-color:lightGray;
     margin-right:10%;
     float:right;
     font-size:100%;
     background: rgb(0, 0, 0);
     background: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(128, 128, 128, 1) 1%, rgba(128, 128, 128, 1) 9%, rgba(0, 0, 0, 1) 10%, rgba(128, 128, 128, 1) 11%, rgba(128, 128, 128, 1) 19%, rgba(0, 0, 0, 1) 20%, rgba(128, 128, 128, 1) 21%, rgba(128, 128, 128, 1) 29%, rgba(0, 0, 0, 1) 30%, rgba(128, 128, 128, 1) 31%, rgba(128, 128, 128, 1) 39%, rgba(0, 0, 0, 1) 40%, rgba(128, 128, 128, 1) 41%, rgba(128, 128, 128, 1) 49%, rgba(0, 0, 0, 1) 50%, rgba(128, 128, 128, 1) 51%, rgba(128, 128, 128, 1) 59%,...

JavaScript

$(document).ready(function () {
     $('#submitChanges').click(function () {
         var from = $('#firstTank').val();
         var to = $('#secondTank').val();
         var transferAmount = parseInt($('#amount').val(),10);
         var $tanks = $('.loadingTank').find('div'); // This has both the tanks
         var fromTank = $tanks.eq(from - 1);
         var toTank = $tanks.eq(to - 1);
         var fromMaxCap = parseInt(fromTank.data('tonnevalue'),10);
         var toMaxCap = parseInt(toTank.data('tonnevalue'),10);
         var fromCurVal = parseInt(fromTank.data('currentval'),10);
         var toCurVal = parseInt(toTank.data('currentval'),10);
         if (from != to && transferAmount > 0) {
             if (fromCurVal >= transferAmount && (toMaxCap - toCurVal) >= transferAmount) {
                 var newFromCurVal = fromCurVal - transferAmount;
                 var newToCurVal = toCurVal + transferAmount;
                 fromTank.data('currentval', newFromCurVal);
                 toTank.data('currentval', newToCurVal);
         		 fromCurVal = newFromCurVal;
		         toCurVal = newToCurVal;
             } 
             else {
                 alert("Cmon.!! you can't do that ");
             }
         }
         var fromTankHeight = fromTank.parent().height(); 
         var toTankHeight = toTank.parent().height(); 
         var fromFillPercentage = ((fromCurVal * 100) / (fromMaxCap));
         var toFillPercentage = ((toCurVal * 100) / (toMaxCap));
         var finalFromTankData = (fromTankHeight / 100) * fromFillPercentage;
         var finalToTankData = (toTankHeight / 100) * toFillPercentage;
         fromTank.parent().css("box-shadow", "rgb(56, 56, 56) 0px -" + finalFromTankData + "px 0px -2px inset");
         fromTank.html((Math.round(fromFillPercentage * 100) / 100)  + "%");
         toTank.parent().css("box-shadow", "rgb(56, 56, 56) 0px -" + finalToTankData + "px 0px -2px inset");
         toTank.html((Math.round(toFillPercentage * 100) / 100) +...