{"id":15844559,"url":"https://github.com/elrouss/competitive-project-team-1","last_synced_at":"2026-02-25T10:09:05.439Z","repository":{"id":71291674,"uuid":"528101063","full_name":"elrouss/competitive-project-team-1","owner":"elrouss","description":"Лендинг на тему велотренировок","archived":false,"fork":false,"pushed_at":"2023-02-14T11:55:12.000Z","size":28030,"stargazers_count":2,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-13T14:49:48.199Z","etag":null,"topics":["bem-methodology","css3","elrouss","html5","js-es6","splidejs","teamwork","yandex-praktikum"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/elrouss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-23T17:42:07.000Z","updated_at":"2023-11-16T18:40:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"3a47482e-bae3-4fa5-873e-42db35cbde02","html_url":"https://github.com/elrouss/competitive-project-team-1","commit_stats":{"total_commits":99,"total_committers":3,"mean_commits":33.0,"dds":0.4040404040404041,"last_synced_commit":"ba14e5dea02034af5d7c31a4a03acce2a6893ce3"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elrouss%2Fcompetitive-project-team-1","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elrouss%2Fcompetitive-project-team-1/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elrouss%2Fcompetitive-project-team-1/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elrouss%2Fcompetitive-project-team-1/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elrouss","download_url":"https://codeload.github.com/elrouss/competitive-project-team-1/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247648977,"owners_count":20972945,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bem-methodology","css3","elrouss","html5","js-es6","splidejs","teamwork","yandex-praktikum"],"created_at":"2024-10-05T17:23:15.342Z","updated_at":"2025-10-27T00:03:26.905Z","avatar_url":"https://github.com/elrouss.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eУчебный проект: \"Велотренировки\" :ferris_wheel:\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://elrouss.github.io/competitive-project-team-1/\"\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/108838349/211172101-71356242-536a-45a5-b3b4-3423b1fa578a.gif\" width=\"400\" alt=\"Гиф с демонстрацией функционала приложения\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003ca name=\"summary\"\u003e\n\u003cdetails\u003e\n  \u003csummary\u003eОглавление\u003c/summary\u003e\n  \u003col\u003e\n    \u003cli\u003e\u003ca href=\"#team\"\u003eКоманда\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#project-description\"\u003eОписание проекта\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#technologies\"\u003eСтек технологий\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#installation\"\u003eУстановка и запуск проекта в локальном репозитории\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#establishing\"\u003eПроцесс создания\u003c/a\u003e\u003c/li\u003e\n    \u003cul\u003e\n      \u003cli\u003e\u003ca href=\"#tasks-and-problems\"\u003eОсновные задачи, проблемы и их решение\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n    \u003cli\u003e\u003ca href=\"#functionality\"\u003eФункционал\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#enhancement\"\u003eПланы по улучшению\u003c/a\u003e\u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/details\u003e\n\u003c/a\u003e\n\n\u003ca name=\"team\"\u003e\u003ch2\u003e:technologist: 1. Команда\u003c/h2\u003e\u003c/a\u003e\n\u003cp\u003e:biking_woman: \u003ca href=\"https://github.com/sofiapeshekhonova\"\u003eСофья Пешехонова\u003c/a\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003e:biking_man: \u003ca href=\"https://github.com/elrouss\"\u003eБорис Зашляпин\u003c/a\u003e\u003c/p\u003e\n\n\u003cdiv align=\"right\"\u003e(\u003ca href=\"#summary\"\u003eк оглавлению\u003c/a\u003e)\u003c/div\u003e\n\n\u003ca name=\"project-description\"\u003e\u003ch2\u003e:page_with_curl: 2. Описание проекта\u003c/h2\u003e\u003c/a\u003e\nПроектная работа выполнена в рамках командного соревнования студентов \u003ca href=\"https://practicum.yandex.ru/\"\u003e\"Яндекс Практикума\"\u003c/a\u003e. Проект представляет собой создание одностраничного сайта по макету, описывающего различные виды велотренировок со ссылками на полезные сервисы для составления индивидуального тренировочного плана велосипедиста. Он корректно отображается на любых устройствах с разрешением экрана от \u003cb\u003e320px\u003c/b\u003e до \u003cb\u003e1440px\u003c/b\u003e и выше\n\n\u003ch4\u003e:link: Ссылка на макет: https://www.figma.com/file/G3UWFlQmNtNs67751YiDH2/Month-of-Landings_external-link?node-id=2%3A7\u003c/h4\u003e\n\u003ch4\u003e:link: Ссылка на проект: https://elrouss.github.io/competitive-project-team-1/\u003c/h4\u003e\n\u003cp\u003e\u003ci\u003e* - Проект не входит в основную образовательную программу и является дополнительным\u003c/i\u003e\u003c/p\u003e\n\n\u003cdiv align=\"right\"\u003e(\u003ca href=\"#summary\"\u003eк оглавлению\u003c/a\u003e)\u003c/div\u003e\n\n\u003ca name=\"technologies\"\u003e\u003ch2\u003e:hammer_and_wrench: 3. Стек технологий\u003c/h2\u003e\u003c/a\u003e\n\u003cspan\u003e\n  \u003cimg src=\"https://img.shields.io/badge/JavaScript-323330?style=for-the-badge\u0026logo=javascript\u0026logoColor=F7DF1E\" alt=\"Иконка JavaScript\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge\u0026logo=css3\u0026logoColor=white\" alt=\"Иконка CSS3\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge\u0026logo=html5\u0026logoColor=white\" alt=\"Иконка HTML5\"\u003e\n\u003c/span\u003e\n\n\u003cdiv align=\"right\"\u003e(\u003ca href=\"#summary\"\u003eк оглавлению\u003c/a\u003e)\u003c/div\u003e\n\n\u003ca name=\"installation\"\u003e\u003ch2\u003e:computer: 4. Установка и запуск проекта в локальном репозитории\u003c/h2\u003e\u003c/a\u003e\n1. `git clone https://elrouss.github.io/competitive-project-team-1.git` - клонировать репозиторий (с использованием HTTPS) на свое устройство\n2. `Go live` - запустить команду расширения `Live Server` в `VS Code`\n\n\u003cdiv align=\"right\"\u003e(\u003ca href=\"#summary\"\u003eк оглавлению\u003c/a\u003e)\u003c/div\u003e\n\n\u003ca name=\"establishing\"\u003e\u003ch2\u003e:chart_with_upwards_trend: 5. Процесс создания\u003c/h2\u003e\u003c/a\u003e\nГлавной особенностью этого проекта является приобретение \u003cb\u003eопыта работы в команде\u003c/b\u003e. В течение 72 часов, выделенных на конкурс, было сверстано 7 блоков на десктоп и отчасти - мобильные устройства. Уже по завершении конкурса проект был доработан в общих чертах до конца: секции доверстаны на все разрешения, часть компонентов переписана при помощи темплейтов на JS, реализован функционал страницы (см.: \u003ca href=\"#functionality\"\u003eп. 6\u003c/a\u003e)\n\n\u003cdiv align=\"right\"\u003e(\u003ca href=\"#summary\"\u003eк оглавлению\u003c/a\u003e)\u003c/div\u003e\n\n\u003ca name=\"tasks-and-problems\"\u003e\u003ch3\u003e:exploding_head: 5.1 Основные задачи, проблемы и их решение\u003c/h3\u003e\u003c/a\u003e\n1. Вставка \u003cb\u003eтемплейта\u003c/b\u003e в слайдер, подключенный с помощью библиотеки \u003cb\u003eSplideJS\u003c/b\u003e\n\u003cp\u003e\n  \u003cb\u003eРешение:\u003c/b\u003e при вставке карточек \u003cb\u003eтемплейтом\u003c/b\u003e слайдер отрисовывался, но не был кликабельным. Это оказалось связано с последовательностью подключения скриптов: изначально \u003cb\u003eSplideJS\u003c/b\u003e задействовал свои ресурсы, находил элементы по DOM и лишь затем происходила отрисовка карточек. Для корректной работы слайдера был изменен порядок скриптов в файле \u003cb\u003ehtml\u003c/b\u003e, а также вынесена функция рендера карточек из \u003cb\u003ewindow.onload()\u003c/b\u003e. Вопрос задавался на \u003ca href=\"https://stackoverflow.com/questions/75009781/does-splide-work-if-i-insert-element-in-dom-with-tag-template-vanilla-js\"\u003eStack Overflow\u003c/a\u003e, но решение проблемы было в итоге найдено нами самостоятельно\n\u003c/p\u003e\n\n2. \u003cb\u003eСлайдер\u003c/b\u003e с меняющимся текстом при клике на кнопку\n\u003cp\u003e\n  \u003cb\u003eРешение:\u003c/b\u003e пожалуй, одна из самых простых задач, для которой была \u003ca href=\"https://github.com/elrouss/competitive-project-team-1/commit/5a18ae4fdf847142faa57103c66545c287cf0f29#:~:text=//%20%D0%A1%D0%B5%D0%BA%D1%86%D0%B8%D1%8F%20%22Roads%22.%20%D0%9F%D0%B5%D1%80%D0%B5%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5%20%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B0%20%D0%B8%20%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0%20%D1%81%D0%BB%D0%B0%D0%B9%D0%B4%D0%B5%D1%80%D0%B0\"\u003eнаписана\u003c/a\u003e логика со счетчиком, реагирующим изменением текста и векторной иконки на события клика и нажатий клавиш со стрелками влево или вправо. Так, 1 равен тексту 1-го слайда, 2 и 3 - соответственно 2-го и 3-го. При движении вправо счетчик увеличивается на единицу, при движении влево - уменьшается; в случае выхода за пределы количества слайдов он сбрасывается до 1 и начинает свой отсчет сначала. Для того чтобы логика оставалась рабочей, отключены свайпы на десктопном и мобильном разрешении\n\u003c/p\u003e\n\n3. \u003cb\u003e\"Дергающаяся\" верстка\u003c/b\u003e при переключении блоков карточек в галерее по табам\n\u003cp\u003e\n  \u003cb\u003eРешение:\u003c/b\u003e процесс рендеринга очередного блока карточек запускался исключительно при клике на таб, что приводило к некрасивому \"миганию\" верстки и вставке элементов. В качестве решения реализована \u003cb\u003eодновременная отрисовка всех 3 блоков\u003c/b\u003e, где 2 остаются скрытыми и та или иная группа становится активной при выборе таба и добавлении селектора модификатора, меняющего ее видимость\n\u003c/p\u003e\n\n4. Изменение позиции переключателя светлой/темной темы на десктопных и мобильных устройствах\n\u003cp\u003e\n  \u003cb\u003eРешение:\u003c/b\u003e дублирование верстки свитчера в \u003cb\u003ehtml\u003c/b\u003e в гамбургере-меню ломало функциональность кнопки в подвале на десктопном разрешении. Это объяснялось тем, что \u003cb\u003equerySelector\u003c/b\u003e находил первый селектор кнопки (CSS-свойство \u003cb\u003edisplay: none\u003c/b\u003e только скрывает элемент в потоке документа, но \u003cb\u003eне исключает\u003c/b\u003e его из \u003cb\u003eDOM\u003c/b\u003e). \u003ca href=\"https://github.com/elrouss/competitive-project-team-1/commit/693ef4e22a2bcc67856f05be7495b225c07a9403#:~:text=theme)%20%7B-,function%20considerStartPositionBtnTheme(theme)%20%7B,-theme%20%3D%3D%3D%20%27light\"\u003eВыходом\u003c/a\u003e из этой ситуации стал одновременный поиск селекторов обеих кнопок методом \u003cb\u003equerySelectorAll\u003c/b\u003e с подключением функционала к каждой методом \u003cb\u003eforEach\u003c/b\u003e\n\u003c/p\u003e\n\n5. Отличие верстки карточек в галерее от макета при светлой теме\n\u003cp\u003e\n  \u003cb\u003eРешение (не реализовано!):\u003c/b\u003e дизайнер макета использовал эффект \u003cb\u003ebox-shadow\u003c/b\u003e, который вступает в конфликт со свойством \u003cb\u003eoverflow: hidden\u003c/b\u003e при верстке макета, создавая некрасивый \"сплющенный\" эффект (есть несколько постов с описанием этой проблемы на \u003ca href=\"https://stackoverflow.com/questions/34238094/show-box-shadow-outside-of-overflow-area\"\u003eStack Overflow\u003c/a\u003e). Отказаться от \u003cb\u003eoverflow: hidden\u003c/b\u003e не представляется возможным, поскольку здесь дизайнером запланирован слайдер (который нельзя реализовать без упомянутого CSS-свойства). Предварительно найден вариант решить проблему через \u003cb\u003eабсолютное позиционирование\u003c/b\u003e и \u003cb\u003eвнутренние отступы\u003c/b\u003e (что, однако, нерационально); возможно, следует изменить структуру \u003cb\u003ehtml-верстки\u003c/b\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"right\"\u003e(\u003ca href=\"#summary\"\u003eк оглавлению\u003c/a\u003e)\u003c/div\u003e\n\n\u003ca name=\"functionality\"\u003e\u003ch2\u003e:man_mechanic: 6. Функционал\u003c/h2\u003e\u003c/a\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e:white_check_mark: Адаптивный интерфейс\u003c/summary\u003e\n  \u003ca href=\"https://elrouss.github.io/mesto/\"\u003e\n    \u003cimg width=\"500\" src=\"https://user-images.githubusercontent.com/108838349/217515351-dc5fec13-4bd8-4069-b0a1-8eb3dbbb882d.gif\" alt=\"Гиф с демонстрацией адаптивного интерфейса сайта\"\u003e\n  \u003c/a\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e:white_check_mark: Открытие и закрытие модального окна (на мобильных устройствах)\u003c/summary\u003e\n  \u003ca href=\"https://elrouss.github.io/mesto/\"\u003e\n    \u003cimg width=\"250\" src=\"https://user-images.githubusercontent.com/108838349/217513763-46ca6bcb-7d23-41ac-baca-6ec7f42ac4df.gif\" alt=\"Гиф с демонстрацией открытия и закрытия модального окна (на мобильных устройствах)\"\u003e\n  \u003c/a\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e:white_check_mark: Слайдер с переключением текста\u003c/summary\u003e\n  \u003ca href=\"https://elrouss.github.io/mesto/\"\u003e\n    \u003cimg width=\"250\" src=\"https://user-images.githubusercontent.com/108838349/217513799-62d333b0-969a-46a0-be63-0cfd577f9290.gif\" alt=\"Гиф с демонстрацией слайдера с переключением текста\"\u003e\n  \u003c/a\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e:white_check_mark: Выпадающее меню с переключением карточек и слайдером (для мобильных устройств, планшетов и ноутбуков)\u003c/summary\u003e\n  \u003ca href=\"https://elrouss.github.io/mesto/\"\u003e\n    \u003cimg width=\"250\" src=\"https://user-images.githubusercontent.com/108838349/217515328-3d057910-07b7-4bfd-aec5-e624ffde4c64.gif\" alt=\"Гиф с демонстрацией выпадающего меню с переключением карточек и слайдером\"\u003e\n  \u003c/a\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e:white_check_mark: Переключатель светлой/темной темы\u003c/summary\u003e\n  \u003ca href=\"https://elrouss.github.io/mesto/\"\u003e\n    \u003cimg width=\"250\" src=\"https://user-images.githubusercontent.com/108838349/217513875-845a0fdd-1666-435c-af21-78c117750fbb.gif\" alt=\"Гиф с демонстрацией переключателя светлой/темной темы\"\u003e\n  \u003c/a\u003e\n\u003c/details\u003e\n\n\u003cdiv align=\"right\"\u003e(\u003ca href=\"#summary\"\u003eк оглавлению\u003c/a\u003e)\u003c/div\u003e\n\n\u003ca name=\"enhancement\"\u003e\u003ch2\u003e:balance_scale: 7. Планы по улучшению\u003c/h2\u003e\u003c/a\u003e\n:o: Оптимизировать программный код\u003cbr\u003e\n:o: Оптимизировать сайт для людей с ограниченными возможностями (напр, label для поля формы)\u003cbr\u003e\n:o: Сверстать и заменить дефолтное окно выпадающего меню на мобильных устройствах и планшетах\u003cbr\u003e\n:o: Написать логику валидации формы\u003cbr\u003e\n:o: Убрать фокус у скрытых элементов и исчезновение кнопки сабмита формы при перемещении по странице клавишей Tab\u003cbr\u003e\n:o: Стилизовать фокус у элементов\u003cbr\u003e\n\n\u003cdiv align=\"right\"\u003e(\u003ca href=\"#summary\"\u003eк оглавлению\u003c/a\u003e)\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://elrouss.github.io/competitive-project-team-1/\"\u003e\n    \u003cimg width=\"300\" alt=\"Снимок экрана 2023-01-08 в 04 05 39\" src=\"https://user-images.githubusercontent.com/108838349/211173460-6c9f0420-c278-4ba1-91e6-d3c7561d1fcc.png\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://elrouss.github.io/competitive-project-team-1/\"\u003e\n    \u003cimg width=\"300\" alt=\"Снимок экрана 2023-01-08 в 04 09 50\" src=\"https://user-images.githubusercontent.com/108838349/211173559-b7801344-c8ce-4636-96da-73156e5b97bd.png\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felrouss%2Fcompetitive-project-team-1","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felrouss%2Fcompetitive-project-team-1","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felrouss%2Fcompetitive-project-team-1/lists"}