Важно, чтобы блок не выглядел чужеродной вставкой, а органично встраивался в существующие статьи и работал одинаково корректно и с телефона, и с компьютера. Пересчёт должен происходить либо сразу при изменении полей, либо по нажатию кнопки — на усмотрение исполнителя. Отдельно прошу продумать обработку нестандартного ввода: пустые поля, ноль, отрицательные значения, ввод дробей через запятую вместо точки — всё это не должно ломать расчёт.
Из дополнительных пожеланий: сделать поле стоимости топлива редактируемым, чтобы каждый читатель мог подставить актуальную цену в своём регионе, и, если это не сильно усложнит задачу, добавить переключение единиц — километры или мили, литры или галлоны. Верстка нужна лёгкая, без тяжёлых сторонних библиотек, с адаптацией под мобильные экраны. По итогу жду готовый блок кода, который можно вставить в шаблон страницы, и краткие пояснения в коде на случай правок.
Кратко о задаче:
— ввод расстояния поездки и среднего расхода на 100 км;
— вывод объёма топлива и примерной стоимости поездки;
— редактируемая цена за литр, желательно переключение единиц;
— лёгкая адаптивная вёрстка без лишних зависимостей;
— корректная обработка ошибок ввода.