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

Задание

1. Сверстать страницу по макету.
2. Добавить функционал:
   • Брать данные через 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.

Примечание: если отключить отображение ошибки у пользователя, то ошибка выводится в консоли.

Скриншоты выполненного задания

1000+

768+

480+

320+

Дополнительные инструменты

Для достижения конечного результата были использованы также следующие инструменты:

• Babel
• Webpack
• Vue CLI