Запись к врачу - Документация 3

description

1. Введение

Веб-страница "Запись к врачу" представляет собой интерактивную форму, предназначенную для оформления записи пациентов на прием к врачам клиники. Страница разработана с использованием HTML, CSS (Bootstrap 5) и JavaScript.

2. Структура страницы

Страница состоит из трех основных блоков:

  1. Ввод данных пациента
  2. Выбор врача и типа приема
  3. Расчет стоимости

3. Функциональные возможности

3.1 Блок ввода данных пациента

Поля ввода:

  • Имя (обязательное поле)
  • Фамилия (обязательное поле)

Валидация:

  • Имя и фамилия должны содержать только кириллические буквы и дефис
  • Длина имени ограничена 70 символами
  • Длина фамилии ограничена 80 символами
  • Минимальная длина для обоих полей - 2 символа

Действия:

  • Кнопка "ГОТОВО" для подтверждения ввода
  • При нажатии на кнопку происходит валидация введенных данных
  • В случае ошибки поля подсвечиваются красным

3.2 Блок выбора врача и типа приема

Выбор врача:

  • Выпадающий список с именами доступных врачей
  • Опция "не выбрано" по умолчанию

Выбор типа приема:

  • Радиокнопки с тремя опциями:
    1. Первичная консультация
    2. Процедуры
    3. Повторный прием
  • Радиокнопки активируются только после выбора врача

3.3 Блок расчета стоимости

Выбор формы оплаты:

  • Выпадающий список с опциями:
    1. Наличные
    2. Карта
    3. Купон

Ввод суммы:

  • Поле для ввода числового значения
  • Ограничение: от 0 до 999999

Ввод скидки:

  • Поле активируется только при выборе формы оплаты "Купон"
  • Ограничение: от 0 до 100%

Расчет итоговой суммы:

  • Кнопка "ПРИНЯТЬ" для выполнения расчета
  • Поле "Итого" для отображения результата (недоступно для ручного ввода)

4. Поведение элементов страницы

4.1 Динамическая активация элементов

  • Радиокнопки выбора типа приема активируются только после выбора врача
  • Поле ввода скидки активируется только при выборе формы оплаты "Купон"

4.2 Мгновенная валидация

  • При вводе данных в поля имени и фамилии происходит мгновенная проверка на допустимые символы
  • При вводе суммы и скидки происходит автоматическое ограничение значений в заданных пределах

4.3 Визуальная обратная связь

  • Некорректно заполненные поля подсвечиваются красным цветом
  • При успешном заполнении формы ввода данных пациента выводится уведомление

4.4 Автоматический расчет

  • При нажатии кнопки "ПРИНЯТЬ" в блоке расчета стоимости происходит автоматический расчет итоговой суммы с учетом введенной скидки (если применимо)

5. Ограничения и особенности

  • Страница не имеет серверной части и работает полностью на стороне клиента
  • Все расчеты и валидация выполняются с помощью JavaScript
  • Дизайн адаптирован для desktop-устройств, мобильная версия не предусмотрена в текущей реализации