Нужны эти стилизованные панели для изменения цвета после ввода данных

Question

Итак, работая в моей исследовательской группе университетов, я создаю программу с графическим интерфейсом, которая будет автоматизировать процессы роста системы осаждения на атомном уровне.У меня есть панель «Обогрев» с кнопкой редактирования, когда вы нажимаете кнопку «Редактировать», вы переходите на другую страницу с 12 другими панелями для 12 различных зон нагрева.В этих зонах есть поля ввода для установки желаемой температуры, и я хочу, чтобы эти панели / блоки меняли цвет после того, как вы установили температуру в правильных параметрах.Так, скажем, вы можете установить временные значения только в диапазоне 50-120 по Цельсию, если пользователь вводит "115", я хочу, чтобы панель стала зеленой, если пользователь вводит "40", я хочу, чтобы панель стала красной.Кроме того, я хочу, чтобы основная «нагревательная» панель, содержащая эти 12 панелей, меняла цвет после достижения температуры.Каков будет лучший способ пойти по этому поводу?Я не опытный программист, мы используем Electron, HTML, CSS, JS и Vue.JS для создания этой программы

Это 2 скриншота программы, на первом вы видите панель с надписью «Отопление»а на втором изображении вы видите 12 зон, помеченных как 1-14.

One:

Два:

Answer 1

Ответ

Используйте поле ввода чисел (<input type='number'>) с

• min: минимум диапазона
• max:максимум диапазона
• value: значение для начала.
• required: не может быть пустым

---

<input id="temp" type="number" value="1" min="0" max="100" required>

---

Затем можно использовать селекторы CSS (input:valid и input:invalid) для настройки самого поля ввода или для настройки элемента-родителя, например span:

---

Примеры:

с родным братом :

input:invalid + span:after {
  content: '✖';
  padding-left: 5px;
  color: red;
}

input:valid + span:after {
  content: '✓';
  padding-left: 5px;
  color: green;
}

    <label for="temp">Temp between 0 and 100:</label>
    <input id="temp" type="number" value="1" min="0" max="100" required>
    <span></span>

---

со стилем ввода :

---

input {
padding: 10px;
font-weight: bolder;
font-size:1.3em;
font-family: monospace;
border: dashed 3px black;
width: 30%;
text-align: center;
}
input:invalid {
  background: rgba(100,0,0,.3);
  color: black;
}

input:valid {
background: rgba(0, 200,0,.3);
  color: black;
}

<label for="temp">Temp between 0 and 100:</label>
    <input id="temp" type="number" value="1" min="0" max="100" required>
    <span></span>