Morioh
Login
Vuejs Components

Vuejs Components

4 years ago

Workle's test assignment for the position of Junior Frontend Developer

Test task for Workle

The task

  1. Make up the page according to the layout .
  2. Add functionality:
  • Take data through the API of the Unsplash.com website .
  • When you click on the author, his profile opens in a separate tab.
  • When you click on a photo, nothing happens.

Tools

To perform this task, you must use the Vue.js framework

Structure

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

Supplements

To improve the ergonomics of the interface, the following functions were added that were not included in the main task and can be disabled if desired:

  • Loading wheel - displays that at the moment the system is not frozen, but an internal action is taking place.

  • Error message - displays that an error occurred while executing the task and the user is given the opportunity to repeat the action.

In order to disable this or that addition in the App.vue file, you must set the values ​​of showLoadingWheel or showUserErrorMessage to false.

Note : if you disable the display of the error for the user, the error is displayed in the console.

Screenshots of the completed task

1000+

768+

480+

320+

Additional tools

To achieve the final result, the following tools were also used:

Download Details:

Author: 6eremotuk01

Source Code: https://github.com/6eremotuk01/workle-test-task

#vuejs #vue #javascript

Workle's test assignment for the position of Junior Frontend Developer
2.45 GEEK