You are going to create a tool that we often use in our surveys; we call it a Card Rating.
You will have 8 hours to complete the challenge. It is likely that you will not finish everything, that's ok, just do as much as you can.
-
You will work in a Vue.js project in combination with SCSS. No additional libraries are allowed.
-
Show us that you can work with single file components.
-
You can use the Vuex store, this is already included in the basic setup you can find below.
-
Make sure to think about responsiveness. You will only receive a desktop design, it is up to you how the mobile design should look :)
-
You can use one browser of your choice to create this for. Don't forget to tell us which one you picked.
-
Write sufficient code comments.
-
Download and install a basic vue setup from here: vue-challenge.zip
-
Inspect the design files to see what you need to create.
-
Add the attached images to the project.
-
You will use a GitHub repository to save and share your code, so commit properly :)
Note: You don't need to stick to the order below, feel free to choose what you would like to do first.
-
Step 1
-
Recreate the design in
./readme/design_1.mov
. -
You can pick your own background, question and text colors to use in all steps.
-
-
Step 2
-
Recreate the design in
./readme/design_2.mov
. -
We use font-awesome for the stars, but feel free to make your own decisions here.
-
-
Step 3
-
Make another Card Rating, this time you should be able to select multiple buttons per card (so per quote) in stead of being able to select only a single option like in Step 1 or Step 2.
-
You can use the buttons from step 1 or think of your own.
You can find provided assets in
./src/assets/
. -
Again, use your own creativity on how to style this.
-
Other
- Be able to drag and drop the cards in the right answer.
- Write a test.
- Add animations.
- ...surprise us!
Have fun and good luck! :)
npm install
npm run serve
npm run build
npm run test
npm run lint
npm run test:unit