Тестовое задание 16 Dec 2023
alcor - генератор случайных цитат, пересобранный вокруг мёртвого API и переосмысленный визуально
- HTML
- CSS
- Vanilla JS
- OKLCH
- Responsive
- Accessible
Генератор цитат в одну карточку, отгруженный как статичный тестовый на HTML/CSS/SCSS с фатальным дефектом: main.js обращался к api.quotable.io, которого больше не существует, и у запроса не было обработки ошибок - поэтому при каждой загрузке карточка застревала на 'Loading...', а кнопка New Quote блокировалась навсегда. Плюс рендер цитат через innerHTML, нерабочий div-Twitter, заглушка 'Document' в title, фиксированная вёрстка 1009px без единого медиазапроса, отсутствие лендмарков и доступных имён. Пересобрано без смены ванильного стека. Мёртвый сетевой путь убран полностью и заменён на вшитый модуль из 55 реальных атрибутированных цитат и выбор без повтора подряд - приложение мгновенное и не может упасть; рендер переведён на textContent, кнопка шеринга стала настоящей ссылкой-интентом X, пересобираемой под каждую цитату, добавлена кнопка копирования в буфер с обратной связью, состояние защищено try/finally. Дизайн заменён целиком на выдержанную идею 'чернила по тёплой бумаге': OKLCH-токены с автоматической светлой/тёмной темой, шрифт Fraunces в паре с Inter, крупный знак кавычки как подпись, уходящий за край карточки, надстрочник со звездой и категорией, плавный clamp()-тайпскейл, мягкий фон из двух пятен и анимации ease-out-expo при смене цитаты. Доступность доведена до реальной базы (лендмарк main, единственный h1 для скринридера, семантика blockquote/cite, именованные кнопки, фокус-кольца focus-visible, skip-ссылка, область aria-live и guard'ы reduced-motion), добавлены горячие клавиши (N - новая, C - копировать). Дефолтную иконку заменяет кастомный фавикон-кавычка (SVG с поддержкой темы, размеры PNG, maskable-иконки, .ico и веб-манифест). Проверено на 390 и 1440 без горизонтального скролла и без ошибок в консоли. Статичный HTML + CSS + ванильный JS, self-hosted на сервере Hetzner за Caddy.