JSFiddle - React, Tailwind, and code Playground

by James Butler

HTML

<div class="loadingTank">
    <div id="tankPercentageFrom" data-tonneValue="8000" style="position:absolute; font-size:x-large; color:white;">40%</div>
</div>
<div class="loadingTank">
    <div id="tankPercentageTo" data-tonneValue="7500" 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="">Tank 1</option>
        <option>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>Tank 1</option>
        <option selected="">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 a = $('#firstTank').val(); //values from combo boxes
         var b = $('#secondTank').val();
         var c = parseInt($('#amount').val()); //amount to transfer

         var TOne = parseInt($('#tankPercentageFrom').text());
         var TTwo = parseInt($('#tankPercentageTo').text());
         var YOne = 500;
         var YTwo = 500;
         LOne = parseInt($('#tankPercentageFrom').attr("data-tonneValue"));
         var LTwo = parseInt($('#tankPercentageTo').attr("data-tonneValue"));

         var XOne = $('#tankPercentageFrom').parent().css("box-shadow");
         var x = XOne.slice(-1);
         if (x == 't') {
             XOne = XOne.split(" ")[4];

         } else {
             XOne = XOne.split(" ")[2];

         }
         XOne = parseInt(XOne.substring(1));

         var XTwo = $('#tankPercentageTo').parent().css("box-shadow");
         var x = XTwo.slice(-1);
         if (x == 't') {
             XTwo = XTwo.split(" ")[4];

         } else {
             XTwo = XTwo.split(" ")[2];

         }
         XTwo = parseInt(XTwo.substring(1));

         /***********************************************************/
         if (((XOne / YOne) * LOne - c) > 0) {
             if ((XTwo / YTwo) * LTwo + c <= LTwo) {
                 var newXOne = XOne - ((c / LOne) * YOne);
                 var newXTwo = ((c / LTwo) * YTwo) + XTwo;
                 $('#tankPercentageFrom').parent().css("box-shadow", "rgb(56, 56, 56) 0px -" + newXOne + "px 0px -2px inset");
                 $('#tankPercentageTo').parent().css("box-shadow", "rgb(56, 56, 56) 0px -" + newXTwo + "px 0px -2px inset");



                 //read box shadow, and /5
                 $('#tankPercentageFrom').text((XOne / 5) + "%");
                 $('#tankPercentageTo').text((XTwo / 5) + "%");

             }
         }

     });
 });