- Сверстать страницу по макету.
- Добавить функционал:
- Брать данные через API сайта Unsplash.com.
- При клике по автору в отдельной вкладке открывается его профиль.
- При клике по фото ничего не происходит.
Для исполнения данного задания необходимо использовать фреймворк Vue.js
public
├─── favicon.ico
└─── index.html
src
├─── App.vue
├─── main.js
├─── assets
│ ├─── fonts
│ │ ├─── fonts.css
│ │ ├─── RobotoCondensed-Bold.svg
│ │ ├─── RobotoCondensed-Bold.ttf
│ │ ├─── RobotoCondensed-Bold.woff
│ │ ├─── RobotoCondensed-Regular.svg
│ │ ├─── RobotoCondensed-Regular.ttf
│ │ └─── RobotoCondensed-Regular.woff
│ └─── img
│ ├─── eye.svg
│ └─── loading.png
└─── components
├─── Error
│ └─── Error.vue
├─── Loading
│ └─── Loading.vue
├─── Pagenation
│ └─── Pagenation.vue
└─── Post
├─── Autor.vue
├─── Post.vue
└─── Views.vue
В качестве повышения эргономичности интерфейса были добавлены следующие функции, которые не входили в основное задание и по желанию их можно отключить:
- Колёсико загрузки — отображает, что на данный момент система не зависла, а происходит внутреннее действие.
- Сообщение о произошедшей ошибке — отображает, что при исполнении задачи произошла ошибка и пользователю предоставляется возможность повторить действие.
Для того, чтобы отключить то или иное дополнение в файле App.vue необходимо выставить значения false у showLoadingWheel или showUserErrorMessage.
Примечание: если отключить отображение ошибки у пользователя, то ошибка выводится в консоли.
Для достижения конечного результата были использованы также следующие инструменты: