<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://fonts.googleapis.com/css?family=Oxygen|Raleway&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <script src="./js/js-fluid-meter.js"></script>
  <title>Document</title>
</head>

<body>

  <div class="container">
    <div class="row">
      <div class="col text-center">
        <div id="fluid-meter" class="mx-auto"></div>
        <input type="text" id="percentage-1" type="number" value="50">
        <button id="submit-percentage-1">submit</button>
      </div>
      <div class="col text-center">
        <div id="fluid-meter-2"></div>
        <input type="text" id="percentage-2" type="number" value="50">
        <button id="submit-percentage-2">submit</button>
      </div>
      <div class="col  text-center">
        <div id="fluid-meter-3"></div>
        <input type="text" id="percentage-3" type="number" value="50">
        <button id="submit-percentage-3">submit</button>
      </div>
    </div>
  </div>



  <script>
    var fm = new FluidMeter();
    fm.init({
      targetContainer: document.getElementById("fluid-meter"),
      fillPercentage: 15,
      options: {
        fontFamily: "Raleway",
        drawPercentageSign: false,
        drawBubbles: true,
        size: 300,
        borderWidth: 19,
        backgroundColor: "#e2e2e2",
        foregroundColor: "#fafafa",
        foregroundFluidLayer: {
          fillStyle: "purple",
          angularSpeed: 100,
          maxAmplitude: 12,
          frequency: 30,
          horizontalSpeed: -150
        },
        backgroundFluidLayer: {
          fillStyle: "pink",
          angularSpeed: 100,
          maxAmplitude: 9,
          frequency: 30,
          horizontalSpeed: 150
        }
      }
    });

    var fm2 = new FluidMeter();
    fm2.init({
      targetContainer: document.getElementById("fluid-meter-2"),
      fillPercentage: 75,
      options: {
        fontFamily: "Oxygen",
        drawPercentageSign: true,
        drawBubbles: true,
        size: 300,
        borderWidth: 10,
        backgroundColor: "#262626",
        foregroundColor: "#4C4A4A",
        foregroundFluidLayer: {
          fillStyle: "#55DD10",
          angularSpeed: 90,
          maxAmplitude: 11,
          frequency: 25,
          horizontalSpeed: -200
        },
        backgroundFluidLayer: {
          fillStyle: "#CDDD10",
          angularSpeed: 100,
          maxAmplitude: 13,
          frequency: 23,
          horizontalSpeed: 230
        }
      }
    });

    var fm3 = new FluidMeter();
    fm3.init({
      targetContainer: document.getElementById("fluid-meter-3"),
      fillPercentage: 45,
      options: {
        fontSize: "30px",
        drawPercentageSign: true,
        drawBubbles: false,
        size: 300,
        borderWidth: 19,
        backgroundColor: "#e2e2e2",
        foregroundColor: "#fafafa",
        foregroundFluidLayer: {
          fillStyle: "#16E1FF",
          angularSpeed: 30,
          maxAmplitude: 5,
          frequency: 30,
          horizontalSpeed: -20
        },
        backgroundFluidLayer: {
          fillStyle: "#4F8FC6",
          angularSpeed: 100,
          maxAmplitude: 3,
          frequency: 22,
          horizontalSpeed: 20
        }
      }
    });

    window.onload = function () {
      document.getElementById("submit-percentage-1").onclick = function () {
        fm.setPercentage(Number(document.getElementById('percentage-1').value))
      }
      document.getElementById("submit-percentage-2").onclick = function () {
        fm2.setPercentage(Number(document.getElementById('percentage-2').value))
      }
      document.getElementById("submit-percentage-3").onclick = function () {
        fm3.setPercentage(Number(document.getElementById('percentage-3').value))
      }
    };
  </script>
</body>

</html>