|
|
@@ -1,119 +0,0 @@
|
|
|
-ОТЧЕТ ПО ПРАКТИЧЕСКОЙ РАБОТЕ
|
|
|
-
|
|
|
-Студент: Черннявский Илья
|
|
|
-Тема: Разработка сата
|
|
|
-Дата выполнения: 08.06.2026
|
|
|
-
|
|
|
-ЦЕЛЬ РАБОТЫ: Разработать сайт и захостить его
|
|
|
-
|
|
|
-
|
|
|
-ИСПОЛЬЗУЕМЫЕ ТЕХНОЛОГИИ
|
|
|
-
|
|
|
-HTML5 — семантическая разметка страницы.
|
|
|
-
|
|
|
-CSS3 — Flexbox, Grid, градиенты, медиазапросы, эффекты размытия, анимации.
|
|
|
-
|
|
|
-JavaScript (ES6) — динамическая отрисовка контента, валидация форм, управление страницами без перезагрузки.
|
|
|
-
|
|
|
-Принцип SPA — переключение между разделами через смену классов.
|
|
|
-
|
|
|
-СТРУКТУРА ПРОЕКТА
|
|
|
-
|
|
|
-3.1 Главная страница
|
|
|
-
|
|
|
-Мотивационная история Ильи Чернявского (поднялся со дна благодаря автобизнесу).
|
|
|
-
|
|
|
-Статистика: 15 авто, 300+ клиентов, средний рейтинг 4.9.
|
|
|
-
|
|
|
-Кнопки быстрого перехода в автопарк и форму аренды.
|
|
|
-
|
|
|
-Оформление с цитатами и акцентной рамкой.
|
|
|
-
|
|
|
-3.2 Страница «Автопарк»
|
|
|
-
|
|
|
-10 автомобилей с реальными фотографиями (URL-адреса изображений).
|
|
|
-
|
|
|
-У каждого авто: название, цена в формате «ХХХ рублей/сутки», класс (эконом, комфорт, бизнес и т.д.).
|
|
|
-
|
|
|
-Кнопка «Арендовать»: при клике автоматически переключает на страницу контактов и выбирает нужную машину в выпадающем списке.
|
|
|
-
|
|
|
-Сетка построена на CSS Grid, адаптируется под мобильные устройства.
|
|
|
-
|
|
|
-3.3 Страница «Аренда / Запись»
|
|
|
-
|
|
|
-Форма с полями: имя, телефон, права, выбор авто, срок аренды.
|
|
|
-
|
|
|
-Все поля обязательны.
|
|
|
-
|
|
|
-Реализована валидация:
|
|
|
-
|
|
|
-имя — не менее 2 символов;
|
|
|
-
|
|
|
-телефон — не менее 5 символов;
|
|
|
-
|
|
|
-права — не менее 5 символов;
|
|
|
-
|
|
|
-автомобиль — должен быть выбран;
|
|
|
-
|
|
|
-срок — целое число от 1 дня.
|
|
|
-
|
|
|
-При ошибках подсвечиваются сообщения под каждым полем.
|
|
|
-
|
|
|
-При успешной отправке — зелёное уведомление и сброс формы.
|
|
|
-
|
|
|
-3.4 Страница «Отзывы»
|
|
|
-
|
|
|
-Отображается список отзывов (изначально 5 штук, включая 2 дополнительных).
|
|
|
-
|
|
|
-У каждого отзыва: имя, текст, рейтинг звёздами.
|
|
|
-
|
|
|
-Форма добавления нового отзыва: имя, текст, оценка 1–5.
|
|
|
-
|
|
|
-Валидация: имя не пустое, текст не менее 5 символов, оценка 1–5.
|
|
|
-
|
|
|
-После добавления новый отзыв появляется в начале списка без перезагрузки страницы.
|
|
|
-
|
|
|
-
|
|
|
-ОСОБЕННОСТИ РЕАЛИЗАЦИИ
|
|
|
-
|
|
|
-Все страницы находятся в одном HTML-файле, переключение происходит через JavaScript без перезагрузки.
|
|
|
-
|
|
|
-Рендеринг карточек автомобилей и отзывов — динамический (функции renderCars и renderReviews).
|
|
|
-
|
|
|
-Защита от XSS-атак: пользовательский текст экранируется через функцию escapeHtml.
|
|
|
-
|
|
|
-При клике на «Арендовать» из карточки авто значение подставляется в форму на странице контактов.
|
|
|
-
|
|
|
-Сообщения об ошибках автоматически исчезают через несколько секунд.
|
|
|
-
|
|
|
-РЕЗУЛЬТАТЫ ТЕСТИРОВАНИЯ
|
|
|
-
|
|
|
-Переключение между 4 страницами — работает корректно, активная кнопка подсвечивается.
|
|
|
-
|
|
|
-Отправка пустой формы аренды — появляются ошибки под всеми обязательными полями.
|
|
|
-
|
|
|
-Выбор авто из карточки — переход на страницу контактов, машина выбрана в списке.
|
|
|
-
|
|
|
-Добавление нового отзыва — отзыв отображается сверху без обновления страницы.
|
|
|
-
|
|
|
-Отображение цен — цена выводится именно словом «рублей» (например, 1200 рублей/сутки).
|
|
|
-
|
|
|
-Адаптивность — на мобильных устройствах сетка авто сжимается, текст читается без горизонтальной прокрутки.
|
|
|
-
|
|
|
-Фотографии автомобилей — загружаются корректно, имеют обводку и скругление.
|
|
|
-
|
|
|
-Все тесты пройдены успешно.
|
|
|
-
|
|
|
-ВЫВОД:
|
|
|
-
|
|
|
-В ходе выполнения практической работы были достигнуты следующие результаты:
|
|
|
-
|
|
|
-Разработано SPA-приложение с полноценной навигацией.
|
|
|
-
|
|
|
-Реализована динамическая генерация контента на основе массивов данных.
|
|
|
-
|
|
|
-Созданы формы с клиентской валидацией и понятными сообщениями об ошибках.
|
|
|
-
|
|
|
-Оформлен современный адаптивный интерфейс в автомобильном стиле (чёрный + оранжевый).
|
|
|
-
|
|
|
-
|
