|
@@ -0,0 +1,119 @@
|
|
|
|
|
+ОТЧЕТ ПО ПРАКТИЧЕСКОЙ РАБОТЕ
|
|
|
|
|
+
|
|
|
|
|
+Студент: Черннявский Илья
|
|
|
|
|
+Тема: Разработка сата
|
|
|
|
|
+Дата выполнения: 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-приложение с полноценной навигацией.
|
|
|
|
|
+
|
|
|
|
|
+Реализована динамическая генерация контента на основе массивов данных.
|
|
|
|
|
+
|
|
|
|
|
+Созданы формы с клиентской валидацией и понятными сообщениями об ошибках.
|
|
|
|
|
+
|
|
|
|
|
+Оформлен современный адаптивный интерфейс в автомобильном стиле (чёрный + оранжевый).
|
|
|
|
|
+
|
|
|
|
|
+
|
