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

[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 = `
[b]Water Usage Visualization:[/b]
${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;
}

Шаги, которые я предпринял на данный момент:

• У меня есть изображение стакана воды на 6 унций. , используя изображение пустого стакана и цветной элемент div, обозначающий воду внутри него.
• HTML: созданы поля ввода для активности и затраченного времени, а также кнопка для запуска расчета.
• JavaScript: написанный код для расчета воды. использование для каждого вида деятельности на основе заранее определенных ставок. Программа должна динамически отображать визуализацию использования воды.
• CSS: стилизованный стеклянный контейнер и вода внутри стакана.

Проблема:

• изображение пустого стакана отображается правильно.
• Однако вода не наполняет стакан, как ожидалось. Вместо этого отображается отдельный прямоугольник (синего цвета), перекрывающий стекло, а не заполняющий само изображение стекла.
  .
  [пример 1 ](https://i.sstatic.net/bZ55HAQU.png)]пример 2

Чего я ожидал :
уровень воды должен динамически обновляться на изображении стакана на основе расчетного расхода воды.
Если расчетное количество воды превышает 6 унций, должны появиться дополнительные стаканы с соответствующим образом отрегулированным уровнем воды.
< h2>Я новичок в этом, но да, я хочу, чтобы вода внутри изображения стекла динамически заполнялась на основе вычислений. Открыт для советов и других подходов

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