Респонсив-верстка, динамические данные
Развернутая страница: cat-food-app.netlify.app.
Сверстайте страницу, показанную на рисунке. Внешний вид должен полностью соответствовать макету, а поведение — описанию задачи. Макет находится в папке prototype, описание задачи ниже.
- Фон занимает всю площадь экрана, блок находится по центру вертикально и горизонтально.
- На планшетах упаковки располагаются треугольником, на смартфонах друг под другом.
- Информация о продукте может меняться.
- Каждая из упаковок может быть выбрана или недоступна для выбора. Выбор осуществляется нажатием на упаковку или на текст «купи» в описании.
- Можно выбрать одновременно несколько упаковок, а также отменить свой выбор повторным нажатием на упаковку.
- Состояние наведения применяется к выбранной упаковке не сразу, а после того, как курсор ушел с нее после первоначального выбора.
Стек: React, TypeScript, CSS, react-markdown, Create React Application
Верстка практически pixel perfect:
Карточки продуктов генерируются динамически из данных в файле card-data.json, и при необходимости можно легко начать использовать данные с сервера.
Некоторые символы в строках имеют индивидуальное форматирование, например, цифры выделены жирным шрифтом. Для поддержки форматирования при передаче данных в формате json используется язык разметки Markdown (библиотека react-markdown — безопасная альтернатива dangerouslySetInnerHTML для защиты от XSS-атак).
Совместимость со старыми браузерами обеспечивают настройка browserslist в package.json, а также библиотека react-app-polyfill. При этом в связи с прекращением Microsoft поддержки IE11 было принято решение не обеспечивать поддержку этого браузера.