3
\$\begingroup\$

I currently have a working implementation of a + and - tank level thingy (I don't really know what to call it). In which will be able to 'add' or 'remove' so-called 'liquid' from the container.

However, I feel my implementation of this is very inefficient, and would appreciate your input on this matter.

 $(document).ready(function() {


   $('#plus1').click(function() {
     var myVal = $('.loadingTank').css("box-shadow");
     var x = myVal.slice(-1); 
     if (x == 't') {
       myVal = myVal.split(" ")[4];
     } else {
       myVal = myVal.split(" ")[2];
     }
     myVal = -(parseInt(myVal, 10) / 5);
     if (myVal <= 99) {
       myVal += 1;
     }
     if (myVal < 11) {
       $('.loadingTank').css("background-color", "red");
     } else {
       $('.loadingTank').css("background-color", "#808080");
     }
     if (myVal > 99) {
       $('#tankPercentage').text("FULL");
     } else {
       $('#tankPercentage').text(myVal + "%");
     }
     myVal = myVal * 5;
     $('.loadingTank').css("box-shadow", "rgb(56, 56, 56) 0px -" + myVal + "px 0px -2px inset");
   });


   $('#minus1').click(function() {
     var myVal = $('.loadingTank').css("box-shadow");
     var x = myVal.slice(-1);
     if (x == 't') {
       myVal = myVal.split(" ")[4];
     } else {
       myVal = myVal.split(" ")[2];
     }
     myVal = -(parseInt(myVal, 10) / 5);
     //gets percentage of tank //myVal=Math.round(myVal);
     if (myVal >= 1) {
       myVal -= 1;
     }
     if (myVal < 11) {
       $('.loadingTank').css("background-color", "red");
     } else {
       $('.loadingTank').css("background-color", "#808080");
     }
     if (myVal < 1) {
       $('#tankPercentage').text("EMPTY");
     } else {
       $('#tankPercentage').text(myVal + "%");
     }
     myVal = myVal * 5;
     $('.loadingTank').css("box-shadow", "rgb(56, 56, 56) 0px -" + myVal + "px 0px -2px inset");
   });


 });
.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%, rgba(0, 0, 0, 1) 60%, rgba(128, 128, 128, 1) 61%, rgba(128, 128, 128, 1) 69%, rgba(0, 0, 0, 1) 70%, rgba(128, 128, 128, 1) 71%, rgba(128, 128, 128, 1) 79%, rgba(0, 0, 0, 1) 80%, rgba(128, 128, 128, 1) 81%, rgba(128, 128, 128, 1) 89%, rgba(0, 0, 0, 1) 90%, rgba(128, 128, 128, 1) 91%, rgba(128, 128, 128, 1) 99%, rgba(0, 0, 0, 1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(1%, rgba(128, 128, 128, 1)), color-stop(9%, rgba(128, 128, 128, 1)), color-stop(10%, rgba(0, 0, 0, 1)), color-stop(11%, rgba(128, 128, 128, 1)), color-stop(19%, rgba(128, 128, 128, 1)), color-stop(20%, rgba(0, 0, 0, 1)), color-stop(21%, rgba(128, 128, 128, 1)), color-stop(29%, rgba(128, 128, 128, 1)), color-stop(30%, rgba(0, 0, 0, 1)), color-stop(31%, rgba(128, 128, 128, 1)), color-stop(39%, rgba(128, 128, 128, 1)), color-stop(40%, rgba(0, 0, 0, 1)), color-stop(41%, rgba(128, 128, 128, 1)), color-stop(49%, rgba(128, 128, 128, 1)), color-stop(50%, rgba(0, 0, 0, 1)), color-stop(51%, rgba(128, 128, 128, 1)), color-stop(59%, rgba(128, 128, 128, 1)), color-stop(60%, rgba(0, 0, 0, 1)), color-stop(61%, rgba(128, 128, 128, 1)), color-stop(69%, rgba(128, 128, 128, 1)), color-stop(70%, rgba(0, 0, 0, 1)), color-stop(71%, rgba(128, 128, 128, 1)), color-stop(79%, rgba(128, 128, 128, 1)), color-stop(80%, rgba(0, 0, 0, 1)), color-stop(81%, rgba(128, 128, 128, 1)), color-stop(89%, rgba(128, 128, 128, 1)), color-stop(90%, rgba(0, 0, 0, 1)), color-stop(91%, rgba(128, 128, 128, 1)), color-stop(99%, rgba(128, 128, 128, 1)), color-stop(100%, rgba(0, 0, 0, 1)));
  background: -webkit-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%, rgba(0, 0, 0, 1) 60%, rgba(128, 128, 128, 1) 61%, rgba(128, 128, 128, 1) 69%, rgba(0, 0, 0, 1) 70%, rgba(128, 128, 128, 1) 71%, rgba(128, 128, 128, 1) 79%, rgba(0, 0, 0, 1) 80%, rgba(128, 128, 128, 1) 81%, rgba(128, 128, 128, 1) 89%, rgba(0, 0, 0, 1) 90%, rgba(128, 128, 128, 1) 91%, rgba(128, 128, 128, 1) 99%, rgba(0, 0, 0, 1) 100%);
  background: -o-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%, rgba(0, 0, 0, 1) 60%, rgba(128, 128, 128, 1) 61%, rgba(128, 128, 128, 1) 69%, rgba(0, 0, 0, 1) 70%, rgba(128, 128, 128, 1) 71%, rgba(128, 128, 128, 1) 79%, rgba(0, 0, 0, 1) 80%, rgba(128, 128, 128, 1) 81%, rgba(128, 128, 128, 1) 89%, rgba(0, 0, 0, 1) 90%, rgba(128, 128, 128, 1) 91%, rgba(128, 128, 128, 1) 99%, rgba(0, 0, 0, 1) 100%);
  background: -ms-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%, rgba(0, 0, 0, 1) 60%, rgba(128, 128, 128, 1) 61%, rgba(128, 128, 128, 1) 69%, rgba(0, 0, 0, 1) 70%, rgba(128, 128, 128, 1) 71%, rgba(128, 128, 128, 1) 79%, rgba(0, 0, 0, 1) 80%, rgba(128, 128, 128, 1) 81%, rgba(128, 128, 128, 1) 89%, rgba(0, 0, 0, 1) 90%, rgba(128, 128, 128, 1) 91%, rgba(128, 128, 128, 1) 99%, rgba(0, 0, 0, 1) 100%);
  background: linear-gradient(to bottom, 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%, rgba(0, 0, 0, 1) 60%, rgba(128, 128, 128, 1) 61%, rgba(128, 128, 128, 1) 69%, rgba(0, 0, 0, 1) 70%, rgba(128, 128, 128, 1) 71%, rgba(128, 128, 128, 1) 79%, rgba(0, 0, 0, 1) 80%, rgba(128, 128, 128, 1) 81%, rgba(128, 128, 128, 1) 89%, rgba(0, 0, 0, 1) 90%, rgba(128, 128, 128, 1) 91%, rgba(128, 128, 128, 1) 99%, rgba(0, 0, 0, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="demoOptions">
  DEMO PURPOSES ONLY
  <button id="plus1">+</button>
  <button id="minus1">-</button>
</div>

<div class="loadingTank">
  <div id="tankPercentage" style="position:absolute; font-size:x-large; color:white;">40%</div>

</div>

My thoughts are that the jQuery can most likely be optimized here:

 $('#plus1').click(function () {
            var myVal = $('.loadingTank').css("box-shadow");
            var x = myVal.slice(-1);//required as a workaround to find out whether IE or not
            if (x == 't') { //other browsers
                myVal = myVal.split(" ")[4];
            }
            else { //is ie
                myVal = myVal.split(" ")[2];
            }
            myVal = -(parseInt(myVal, 10) / 5);
            if (myVal <= 99) {
                myVal += 1;
            }
            if (myVal < 11) { //'alarm' if 10% left or lower
                $('.loadingTank').css("background-color", "red");
            }
            else {
                $('.loadingTank').css("background-color", "#808080");
            }            
            if (myVal > 99) {
                $('#tankPercentage').text("FULL");
            }
            else {
                $('#tankPercentage').text(myVal + "%");
            }
            myVal = myVal * 5;
            $('.loadingTank').css("box-shadow", "rgb(56, 56, 56) 0px -" + myVal + "px 0px -2px inset");
        });

Any advice? As you can probably tell, I'm not very good at implementing jQuery.

\$\endgroup\$
  • \$\begingroup\$ Not sure what the CSS values are supposed to be doing here. Maybe a working demo in Codepen or Jsfiddle would help \$\endgroup\$ – Enrique Moreno Tent Dec 10 '14 at 8:09
  • \$\begingroup\$ @Dbugger: Please see working code snippet. \$\endgroup\$ – jbutler483 Dec 10 '14 at 8:50
2
\$\begingroup\$

I think you can refactor it with the DRY principle:

$('#plus1').click(function () {
  var myVal = getBoxShadow($('.loadingTank'));

  myVal = -(parseInt(myVal, 10) / 5);

  if (myVal <= 99) {
    myVal += 1;
  }

  displayAlarm($('.loadingTank'), myVal);
  displayValue($('#tankPercentage'), myVal);

  myVal *= 5;
  $('.loadingTank').css("box-shadow", "rgb(56, 56, 56) 0px -" + myVal + "px 0px -2px inset");
});

function getBoxShadow($element) {
  var value = $element.css("box-shadow"),
      x = value.slice(-1);
  return x === "t" ? value.split(" ")[4]: value.split(" ")[2];
}

function displayAlarm($element, value) {
  var color = value < 11 ? "red": "#808080";
  $element.css("background-color", color);
}

function displayValue($element, value) {
  var text;

  if (value > 99) {
    text = "FULL";
  }else if (value < 1) {
    text = "EMPTY";
  }else {
    text = value + "%";
  }

  $element.text(text);
}

I also think it's good to move the color "red" and "#808080" to your CSS class, and then change .css('background-color', 'xxx') to be .addClass, .removeClass or .toggleClass.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.