Vue Interview Task

Background

You want to make the application for displaying launches from the database of SpaceX. You already downloaded the sample data set of some past launches and put it to /assets/data-set.vue.

TODO

Your task is to display the data from /assets/data-set.vue. Every launch should be located in a dedicated HTML container. They should be positioned in the centre of the screen and lay one under another. Make each container contain three elements: mission_name, rocket_name and launch_date_local.

You are allowed to configure already existing files. You can also download external packages.

Format of the data from the assets

[
  {
    mission_name: "CRS-19",
    launch_date_local: "2019-12-05T12:29:23-05:00",
    rocket_name: "Falcon 9",
  },
  {
    mission_name: "Starlink 1",
    launch_date_local: "2019-11-11T09:56:00-05:00",
    rocket_name: "Falcon 9",
  },
  ...
]

Exemplary layout

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.

Good Luck!