Bar Graph/level indicator

by Fred Fourie

HTML

<div id =  "oil" class="element_L">
     <div id="oilTitle" class="gauge_title">OIL COMPENSATOR LEVEL</div>
     <div id="oillevel">
          <div id="bar">
            <div id="level"><div id="level_border"/></div>  
            
        </div>
     </div>
     <div id="oilGaugeNumber" class="gauge_number_vertical">--</div>
     </div>

CSS

#oillevel{
  padding-left: 25px;
  padding-top: 60px;
}
#bar
{
background-color:#6FADCF;
width:90px;
height:80px;
border-radius:15px;
border-width: 2px;
border-style:solid;
border-color:#2C3E50;
}
#level
{
z-index:2;
background-color:white;
height:25%;
border-radius: 16px 16px 0px 0px;
}
#level_border
{
z-index:5;
width:90px;
height:80px;
border-radius:15px;
border-width: 2px;
border-style:solid;
border-color:#2C3E50;
position: relative;
left: -2px;
top: -2px;
}

JavaScript

// Oil level
      input =5 
      oil_gauge_max = 100
      
      sizeBar = Math.round(100 -(input / oil_gauge_max) * 100);
      percentageLevel = (input / oil_gauge_max) * 100;
      // Set up some colouring
      if(sizeBar > 51)
      {
        document.getElementById("bar").style.background = "#6FADCF"
      }else
      {
        if(sizeBar < 50 && sizeBar > 21)
        {
          document.getElementById("bar").style.background ="#FDE3A7"
        }
        if(sizeBar < 20)
        {
          document.getElementById("bar").style.background ="#C0392B"
        }
      }
      document.getElementById("oilGaugeNumber").innerHTML = sizeBar + "%";
      document.getElementById("level").style.height = percentageLevel + "%";