Попытка отобразить изображение, которое представляет используемое потребление воды, динамическое обновление уровня воды ⇐ CSS

[Anonymous]

Не уверен, как это сделать. Я строю этот калькулятор использования воды. Когда кто -то выбирает деятельность (например, просмотр YouTube или прокрутка через Tiktok) и входит, сколько времени они потратили на это, я хочу рассчитать, сколько воды использовалось для этой деятельности. После расчета я хочу показать это количество в визуальном представлении стекла 6 унций. Если вода превышает 6 унций, я хочу, чтобы изображение показало несколько стаканов, заполненных соответствующим количеством. Мне просто нужна помощь с визуальной водой. < /P>
# **html:**

\Select an Activity:\
\

\Enter time spent (in minutes):\
\

\Calculate\

\\

# **JavaScript:**

// JavaScript code related to the issue
function calculateWaterUsage() {
// Water usage calculations
let waterUsage = 0;
if (waterUsageRates\[activity\]) {
waterUsage = (waterUsageRates\[activity\] \* time) / 60; // Convert to minutes
}

// Water glass visualization logic
const glassSize = 0.177; // 6 oz = 0.177 liters
const fullGlasses = Math.floor(waterUsage / glassSize); // Full glasses
const remainingWater = waterUsage % glassSize; // Remaining water for the last glass
let glassHTML = "";

for (let i = 0; i \< fullGlasses; i++) {
glassHTML += '\\\\';
}

if (remainingWater \> 0) {
const fillPercentage = (remainingWater / glassSize) \* 100;
glassHTML += ` `;
}

resultDiv.innerHTML = `
Water Usage Visualization:
${glassHTML} `;
}

# \*\*CSS:

# \*\*

/\* CSS relevant to displaying the water glasses \*/
.glass-container {
width: 60px;
height: 120px;
border: 2px solid #000;
margin-right: 10px;
margin-bottom: 10px;
display: inline-block;
position: relative;
}

.water {
width: 100%;
background-color: #2196F3; /\* Water color \*/
position: absolute;
bottom: 0;
}
< /code>
Шаги, которые я предпринял до сих пор: < /p>

• Я получил визуальное для 6 унции. , используя изображение для пустого стекла и цветного Div, чтобы представлять воду внутри него. < /li>
  JavaScript: письменный код для расчета использования воды для каждого действия на основе предопределенных скоростей. Предполагается, что программа динамически показывает визуализацию использования воды. /> Проблема: < /p>
  
  Изображение пустого стекла < /strong> отображается правильно. < /p>
  < /li>
  Однако вода не заполняет стакан, как и ожидалось. Вместо этого, отдельный прямоугольник < /strong> (цветной синий) показывает перекрывание стекла, вместо заполнения самого изображения стекла. < /P>
  .
  [Пример 1 ] (https://i.sstatic.net/bz55haqu.png)] Пример 2

чего я ожидал : < /p>
Уровень воды должен динамически обновляться в стеклянном изображении на основе расчетного использования воды. Уровень скорректирован соответственно. Открыть для подсказков или различных подходов

Подробнее здесь: https://stackoverflow.com/questions/793 ... amically-u