Учебный проект: "Велотренировки" 🎡

Оглавление

1. Команда
2. Описание проекта
3. Стек технологий
4. Установка и запуск проекта в локальном репозитории
5. Процесс создания
• Основные задачи, проблемы и их решение
6. Функционал
7. Планы по улучшению

🧑‍💻 1. Команда

🚴‍♀️ Софья Пешехонова

🚴‍♂️ Борис Зашляпин

(к оглавлению)

📃 2. Описание проекта

Проектная работа выполнена в рамках командного соревнования студентов "Яндекс Практикума". Проект представляет собой создание одностраничного сайта по макету, описывающего различные виды велотренировок со ссылками на полезные сервисы для составления индивидуального тренировочного плана велосипедиста. Он корректно отображается на любых устройствах с разрешением экрана от 320px до 1440px и выше

🔗 Ссылка на макет: https://www.figma.com/file/G3UWFlQmNtNs67751YiDH2/Month-of-Landings_external-link?node-id=2%3A7

🔗 Ссылка на проект: https://elrouss.github.io/competitive-project-team-1/

* - Проект не входит в основную образовательную программу и является дополнительным

(к оглавлению)

🛠️ 3. Стек технологий

(к оглавлению)

💻 4. Установка и запуск проекта в локальном репозитории

1. git clone https://elrouss.github.io/competitive-project-team-1.git - клонировать репозиторий (с использованием HTTPS) на свое устройство
2. Go live - запустить команду расширения Live Server в VS Code

(к оглавлению)

📈 5. Процесс создания

Главной особенностью этого проекта является приобретение опыта работы в команде. В течение 72 часов, выделенных на конкурс, было сверстано 7 блоков на десктоп и отчасти - мобильные устройства. Уже по завершении конкурса проект был доработан в общих чертах до конца: секции доверстаны на все разрешения, часть компонентов переписана при помощи темплейтов на JS, реализован функционал страницы (см.: п. 6)

(к оглавлению)

🤯 5.1 Основные задачи, проблемы и их решение

1. Вставка темплейта в слайдер, подключенный с помощью библиотеки SplideJS

Решение: при вставке карточек темплейтом слайдер отрисовывался, но не был кликабельным. Это оказалось связано с последовательностью подключения скриптов: изначально SplideJS задействовал свои ресурсы, находил элементы по DOM и лишь затем происходила отрисовка карточек. Для корректной работы слайдера был изменен порядок скриптов в файле html, а также вынесена функция рендера карточек из window.onload(). Вопрос задавался на Stack Overflow, но решение проблемы было в итоге найдено нами самостоятельно

2. Слайдер с меняющимся текстом при клике на кнопку

Решение: пожалуй, одна из самых простых задач, для которой была написана логика со счетчиком, реагирующим изменением текста и векторной иконки на события клика и нажатий клавиш со стрелками влево или вправо. Так, 1 равен тексту 1-го слайда, 2 и 3 - соответственно 2-го и 3-го. При движении вправо счетчик увеличивается на единицу, при движении влево - уменьшается; в случае выхода за пределы количества слайдов он сбрасывается до 1 и начинает свой отсчет сначала. Для того чтобы логика оставалась рабочей, отключены свайпы на десктопном и мобильном разрешении

3. "Дергающаяся" верстка при переключении блоков карточек в галерее по табам

Решение: процесс рендеринга очередного блока карточек запускался исключительно при клике на таб, что приводило к некрасивому "миганию" верстки и вставке элементов. В качестве решения реализована одновременная отрисовка всех 3 блоков, где 2 остаются скрытыми и та или иная группа становится активной при выборе таба и добавлении селектора модификатора, меняющего ее видимость

4. Изменение позиции переключателя светлой/темной темы на десктопных и мобильных устройствах

Решение: дублирование верстки свитчера в html в гамбургере-меню ломало функциональность кнопки в подвале на десктопном разрешении. Это объяснялось тем, что querySelector находил первый селектор кнопки (CSS-свойство display: none только скрывает элемент в потоке документа, но не исключает его из DOM). Выходом из этой ситуации стал одновременный поиск селекторов обеих кнопок методом querySelectorAll с подключением функционала к каждой методом forEach

5. Отличие верстки карточек в галерее от макета при светлой теме

Решение (не реализовано!): дизайнер макета использовал эффект box-shadow, который вступает в конфликт со свойством overflow: hidden при верстке макета, создавая некрасивый "сплющенный" эффект (есть несколько постов с описанием этой проблемы на Stack Overflow). Отказаться от overflow: hidden не представляется возможным, поскольку здесь дизайнером запланирован слайдер (который нельзя реализовать без упомянутого CSS-свойства). Предварительно найден вариант решить проблему через абсолютное позиционирование и внутренние отступы (что, однако, нерационально); возможно, следует изменить структуру html-верстки

(к оглавлению)

👨‍🔧 6. Функционал

✅ Адаптивный интерфейс

✅ Открытие и закрытие модального окна (на мобильных устройствах)

✅ Слайдер с переключением текста

✅ Выпадающее меню с переключением карточек и слайдером (для мобильных устройств, планшетов и ноутбуков)

✅ Переключатель светлой/темной темы

(к оглавлению)

⚖️ 7. Планы по улучшению

⭕ Оптимизировать программный код
⭕ Оптимизировать сайт для людей с ограниченными возможностями (напр, label для поля формы)
⭕ Сверстать и заменить дефолтное окно выпадающего меню на мобильных устройствах и планшетах
⭕ Написать логику валидации формы
⭕ Убрать фокус у скрытых элементов и исчезновение кнопки сабмита формы при перемещении по странице клавишей Tab
⭕ Стилизовать фокус у элементов

(к оглавлению)