Change water level in 8 bottles: create new functions

Programming
1

I need to display up to eight bottles when the input value is greater than 100.

I have a function updateWaterLevel() that updates the water level in the first bottle, but I’m unsure how to update the other bottles.

let inputWaterLevel = document.querySelector('[name=water-level]');
let heightLiquid = +tubeLiquid.getAttribute('height');
let yLiquid = +tubeLiquid.getAttribute('y');
let liquidPercent = heightLiquid/100;

inputWaterLevel.addEventListener('input', updateWaterLevel);

function updateWaterLevel() {
  let value = +this.value;
  
  let height = liquidPercent * value;
  let y = yLiquid + (heightLiquid-height);
  
  tubeLiquid.setAttribute('height', liquidPercent * value )
  tubeLiquid.setAttribute('y', y )

}

I have added a new function addBottle2() to add a second bottle when the input value is greater than 100, but I am still having trouble adding more bottles up to eight.

let addBottle2 = () => {
    inputWaterLevel.id = 'inpId';
    let inpId = document.getElementById('inpId')
    inpId.addEventListener("input", () => {
        if (inpId.value > 100) {
            document.getElementById("bot2").style.display = 'block';
        }
        else if (inpId.value <= 100){
            document.getElementById("bot2").style.display = 'none';
        }
    });
}
addBottle2()

.cont{
    display: flex;
}

#bot2{
    display: none;
}

<p><input type="number" min="0" max="200" value="100" name="water-level" /></p>

<div class="cont">
    <div class="bot1">
        <svg viewBox="0 0 300 300" width="150">
            <clipPath id="clip">
                <rect x="118" y="68" width="64" height="228" rx="20" ry="20" />
            </clipPath>
            <image width="300" xlink:href="https://i.ibb.co/HGFQYTj/bottle.png" />
            <rect clip-path="url(#clip)" id="tubeLiquid" x="115" y="58" width="70" height="233" fill="#74ccf4" />
        </svg>
    </div>

    <div id="bot2">
        <svg viewBox="0 0 300 300" width="150">
            <clipPath id="clip2">
                <rect x="118" y="68" width="64" height="228" rx="20" ry="20" />
            </clipPath>
            <image width="300" xlink:href="https://i.ibb.co/HGFQYTj/bottle.png" />
            <rect clip-path="url(#clip2)" id="tubeLiquid2" x="115" y="58" width="70" height="233" fill="#74ccf4" />
        </svg>
    </div>

</div>

I need to add up to seven additional bottles when the input value is greater than 100.

2

To add up to seven additional bottles when the input value is greater than 100, you can modify the addBottle2() function as follows:

let addBottles = () => {
  let inputWaterLevel = document.querySelector('[name=water-level]');
  let bottlesContainer = document.querySelector('.cont');
  
  inputWaterLevel.addEventListener("input", () => {
    let value = +inputWaterLevel.value;
    
    if (value > 100) {
      let numBottles = Math.floor((value - 100) / 100);
      
      // Remove existing bottles
      let existingBottles = document.querySelectorAll('.bot');
      existingBottles.forEach(bottle => bottle.remove());
      
      // Add new bottles
      for (let i = 2; i <= numBottles + 1 && i <= 8; i++) {
        let bottle = document.createElement('div');
        bottle.classList.add('bot');
        bottle.id = `bot${i}`;
        bottle.innerHTML = `
          <svg viewBox="0 0 300 300" width="150">
            <clipPath id="clip${i}">
              <rect x="118" y="68" width="64" height="228" rx="20" ry="20" />
            </clipPath>
            <image width="300" xlink:href="https://i.ibb.co/HGFQYTj/bottle.png" />
            <rect clip-path="url(#clip${i})" id="tubeLiquid${i}" x="115" y="58" width="70" height="233" fill="#74ccf4" />
          </svg>
        `;
        bottlesContainer.appendChild(bottle);
      }
    } else {
      // Remove all bottles
      let allBottles = document.querySelectorAll('.bot');
      allBottles.forEach(bottle => bottle.remove());
    }
  });
}

addBottles();

This modified addBottles() function will dynamically add or remove bottles based on the input value. It calculates the number of additional bottles needed by subtracting 100 from the input value and dividing by 100. It then removes any existing bottles and adds new bottles up to a maximum of 8. Each new bottle is created as a <div> element with the corresponding SVG structure.