Тестовое задание для mkskom

Задание:

Необходимо сверстать страницу и реализовать необходимый функционал на Vue 3.

Макет сайта: Figma

Функциональность

Галерея

Галерея должна иметь динамическое содержимое – список картинок должен быть получен с использованием веб-запросов.

Ключевые моменты

• использовать https://jsonplaceholder.typicode.com/;
• количество картинок - 16 (не должно быть скролла страницы, если высота экрана пользователя равна высоте макета);
• для выполнения сетевых запросов использовать Fetch API.

Переключатель режима отображения

Реализовать возможность переключения режима отображения галереи.
В зависимости от выбора элементы сетки должны выстраиваться одним из двух способов: flexbox или CSS Grid.

Ключевые моменты

• при нажатии на кнопку переключения следует изменять CSS-свойство display по следующему правилу:
  узел разметки галереи, которая становится активной, должен получить в значении block;
  узел разметки галереи, которая становится неактивной – none;
• при использовании flexbox все элементы сетки должны быть одного размера (как на макете);
• при использовании CSS Grid элементы должны быть разных размеров;
  картинки должны заполнять предоставленный контейнер полностью (то есть, картинка может быть принудительно растянутой).

Форма

В навигации страницы необходимо подключить форму.

Ключевые моменты

• валидация поля ввода – пользователю разрешить указывать только цифры;
• введенное число должно использоваться программой в качестве части “{albumId}” следующего URL-шаблона: “https://jsonplaceholder.typicode.com/albums/{albumId}/photos” для осуществления сетевого взаимодействия.