Учебное приложение по Practical Task 1. Оформление и код намеренно простые: обычные HTML, CSS и JavaScript, без сборщика и фреймворка. Интерфейс на английском, как в задании.
Откройте index.html в браузере. Для загрузки Bootstrap и данных GitHub нужен интернет. Для наиболее предсказуемой работы localStorage используйте локальный сервер, например расширение Live Server в VS Code: откройте папку проекта и выберите Open with Live Server для index.html.
Перейдите на страницу Search, введите octocat и нажмите Search. Затем выберите язык и способ сортировки. Поиск показывает только публичные репозитории; токен и регистрация не нужны.
index.html: Home с информацией и инструкцией.search.html: Search с формой, фильтрами и карточками. В меню две ссылки между HTML-файлами, текущая страница отмечена aria-current. JavaScript подключен только к Search.css/style.css: небольшие дополнения к Bootstrap, Flexbox, сетка карточек и адаптация к мобильному экрану.js/script.js: получение элементов → загрузка API → языки → создание карточки → фильтрация и сортировка → обработчики событий.assets/: папка для изображений; сейчас они не нужны.
При submit отменяем перезагрузку страницы через preventDefault. Убираем пробелы по краям имени, проверяем HTML-ограничения методом checkValidity и выводим собственное сообщение. При ошибке запрос не отправляется.
fetchRepositories использует fetch и async/await. response.json преобразует JSON в массив объектов JavaScript. API возвращает данные постранично; цикл запрашивает следующую страницу, если пришло 100 репозиториев. Если их меньше, загрузка заканчивается. Это позволяет фильтровать и сортировать все репозитории пользователя.
updateLanguages собирает языки обычным циклом for и проверяет повторы через includes. renderRepositories отбирает репозитории циклом и условием if, затем сортирует через sort. createRepositoryCard создает элементы через document.createElement. Вставка через textContent не позволяет описанию репозитория превратиться в исполняемый HTML.
После успешного поиска имя сохраняется в localStorage и восстанавливается при следующем открытии. Автоматический повторный запрос не выполняется. Ошибки localStorage не мешают поиску.
try/catch/finally разделяет успешную загрузку, ошибки и очистку состояния. На время запроса форма блокируется. Обрабатываются 404, ограничения API, сетевые ошибки и пустой результат. При ошибке одной из страниц неполный список не показывается как полный.
- Пустое имя и
bad--name: сообщение валидации, без запроса API. octocat: карточки с названием, описанием, языком, звездами и ссылкой.- Язык и все четыре варианта сортировки: карточки обновляются без запросов.
- Перезагрузка: последнее успешно найденное имя остается в поле.
- Несуществующее имя: сообщение User not found.
- Отключенный интернет: сообщение ошибки и возможность повторить поиск.
- Узкое окно: карточки в одну колонку, элементы формы не выходят за экран.
- Home и Search: переход между двумя страницами. Информация о приложении находится на Home.
GitHub ограничивает частоту запросов без авторизации. Для пользователя с большим числом репозиториев потребуется несколько запросов. Данные могут изменяться во время загрузки.