Лабораторна робота · Віджет Б
Оберіть основу, молоко та топпінги — калорійність і ціна розрахуються миттєво. Захищений від некоректних введень.
Конструктор напою
Ваш напій
QA-журнал: виявлені баги та виправлення
При очищенні поля об'єму parseInt("") повертав NaN. Калорійність відображала NaN ккал, ціна також ламалась.
Замінено числове поле на <input type="range">. Слайдер гарантує лише валідні значення в діапазоні 50–500 мл — NaN неможливий.
При прямій маніпуляції DOM (DevTools) можна було встановити від'ємний об'єм. Калькулятор давав від'ємні калорії — абсурдний результат.
Перед розрахунком: vol = Math.max(50, Math.min(500, vol)). Будь-яке значення поза діапазоном автоматично «затискається» до меж.
Без step слайдер міг повертати 123.4567 мл — UI показував дріб замість цілого числа.
Атрибут step="10" обмежує крок до 10 мл. Додатково застосовується Math.round() як другий захисний рівень.
Якщо програмно зняти всі radio-кнопки, querySelector(':checked') повертав null → TypeError у консолі, ціна падала до 0 грн.
Оператор ?.dataset ?? '35' — якщо елемент null, беремо дефолтну ціну еспресо. Консоль залишається чистою.