Что выболнено по заданию:
- Галерея должна иметь динамическое содержимое – список картинок должен быть получен сиспользованием веб-запросов. Сделано
- Использовать https://jsonplaceholder.typicode.com/ или любое другое HTTP API скартинками, расположенное в открытом доступе Использовал jsonplaceholder
- Количество картинок - 16 (не должно быть скролла страницы, если высота экрана пользователя равна высоте макета) При высоте экрана, равной высоте макета - скрола нет.
- Для выполнения сетевых запросов использовать Fetch API. Сделано
- Реализовать возможность переключения режима отображения галереи. Сделано
- При нажатии на кнопку переключения следует изменять CSS-свойство display Сделано.
- При использовании flexbox все элементы сетки должны быть одного размера (как намакете); при использовании CSS Grid элементы должны быть разных размеров и соответствоватьрасположению на рисунке ниже; Сделано в соответствии с макетами.
- Картинки для grid-галереи рекомендуется также получать через API, но в крайнем случаеможно использовать статичные ссылки; В фетч запросе установлен лимит на кач-во картинок в зависимости от flex или grid вёрстки.
- Картинки должны заполнять предоставленный контейнер полностью. Сделано
- В верхней части страницы необходимо подключить форму. Сделано.
- валидация поля ввода – пользователю разрешить указывать только цифры (нельзя: буквы,пробелы, знаки препинания и иные символы); В input нельзя ввести ничего, кроме цифр. Fetch запрос отправляется по кнопке справа и рендерятся картинки на странице.
- введенное число должно использоваться программой в качестве части “{albumId}”следующего URL-шаблона: “https://jsonplaceholder.typicode.com/albums/{albumId}/photos” для осуществления сетевого взаимодействия. Сделано. Чуть выше писал, как использовал
- Шрифты, используемые в макете, подключать с использованием CSS-правила @font-face Сделано
- Картинки должны представлять собой узел типа img Сделано
- Вёрстку сделал под экран 1600px, как в задании.
Дополнительно сделано:
- Сделал hover при наведении на табы в sidebar
- Подключил библиотеку Link для перехода для написании почты. Ссылка активна.
- К табам, картинкам и пр добавил также hover
- При выборе категории устанавливается state и применяются стили (border, hover)
- Добавил поиск в галерее по title.
- При вводе символов в поиске по галее рендериться svg "удалить".
- Кнопка удалить работает - очищает массив с картинками.
- Установите среду разработки VS Code или любую другую.
- Установите терминал или используйте встроенный в VS Code.
Для запуска проекта потребуется:
- Войти в терминал Ctrl+J
- Войти в в терминале в каталог "client" вбив команду cd client
- Написать в терминале npm start
- Запустится браузер с веб-приложением.
Разрабатывал самостоятельно
