ilmerainen / react-synonyms-app

Test task

react-synonyms-app

Тестовое задание

Для полного выполнения тестового задания необходимо: Сделать адаптивную верстку элементов; Сделать интерактивное взаимодействие с элементами интерфейса используя localstorage.

Верстка

Модальное окно с задним фоном (делать на #fff подложке) — фигма;
При ширине экрана <= 414 pix окно отображается во весь экран — фигма;
Для поля ввода и кнопок использовать гайдлайн — фигма;
Все иконки скачивать в svg формате из фигмы, и верстать с использованием svg иконок;
Состояние карточки синонимов:
Без фокуса — Белая, элементы 50% прозрачности;
При наведении — Белая, элементы 50% прозрачности;
При наведении на элементы (карандаш, корзина) — они становятся 0% прозрачности;
При клике на карандаш:
Поле “добавление синонима” скрывается;
Вместо карточки синонима появляется поле “редактирование синонима” — фигма;
Поле “редактирование синонима”:
Для сохранения изменений содержимого необходимо нажать “сохранить”;
Для отмены — крестик;
После нажатия кнопок поле меняется на карточку синонима;

Логика

Исходное состояние окна — отсутствие синонимов;
По нажатию кнопки “сохранить изменения” — записывать данные в localstorage;
По нажатию кнопки “очистить синонимы” — очищать список синонимов и записывать данные в localstorage;