itserje / cat-food

Cat Food Project

Респонсив-верстка, динамические данные

Развернутая страница: cat-food-app.netlify.app.

ТЗ

Сверстайте страницу, показанную на рисунке. Внешний вид должен полностью соответствовать макету, а поведение — описанию задачи. Макет находится в папке prototype, описание задачи ниже.

1. Фон занимает всю площадь экрана, блок находится по центру вертикально и горизонтально.
2. На планшетах упаковки располагаются треугольником, на смартфонах друг под другом.
3. Информация о продукте может меняться.
4. Каждая из упаковок может быть выбрана или недоступна для выбора. Выбор осуществляется нажатием на упаковку или на текст «купи» в описании.
5. Можно выбрать одновременно несколько упаковок, а также отменить свой выбор повторным нажатием на упаковку.
6. Состояние наведения применяется к выбранной упаковке не сразу, а после того, как курсор ушел с нее после первоначального выбора.

Файлы задания

Комментарий к работе

Стек: 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 было принято решение не обеспечивать поддержку этого браузера.