• Make sure you've read all the descriptions
• Ask questions if you have any
• Set yourself a deadline for delivery of the challange and let us know this deadline. We will be expecting a code by that time.

Build a car comparison input form (See src\components\forms\carForm.vue).

The customer needs to fill the following information into the form:

• Make sure that the input follows the next format XXXXXX (Remove dashes and always use capital)
• Retrieve information about vehicle from license plate (https://opendata.rdw.nl/resource/m9d7-ebf2.json?kenteken=05GFD9) and present brand (merk) and manufacturing year (datum_eerste_toelating) to the form UI. Please note: RDW webservice only accept capital letters 05GFD9 instead of 05gfd9)
• Show an error message for the format if it is not correct. Or if the license is not a valid license plate.

• Make sure that the input follows the next format XXXX99(Always use capital and remove spaces)
• Make sure that the input, if filled in, else trigger an error message.

• Make sure that the input only allows numbers
• Make sure that the input, if filled in, else trigger an error message.

• Make sure that the input only allows numbers and/or letters

• Make sure that the input follows the next format DD-MM-YYYY
• Make sure that the date is valid, libraries that can be used for this are https://www.npmjs.com/package/moment
• Make sure that the user cannot be more than 100 years old.
• Show an error message for these above cases if triggered.
• Make sure that the input, if filled in, else trigger an error message.

• Options should be between -5 and (current year - birthdate year - 18(Legal age)). For Example, (2022 - 1980) - 18 = 24 (maximum allowed years). Default selected value should be 0.

• Options for Kilometrage are:
  • 0 t/m 7500 KM
  • 7501 t/m 10000 KM
  • 10001 t/m 12000 KM
  • 12001 t/m 15000 KM
  • 15000 t/m 20000 KM
  • 20001 t/m 25000 KM
  • 25001 t/m 30000 KM
  • 30001 t/m 90000 KM
• Default selected value should be 7501 t/m 10000 KM

• A button that sends all values selected into queryparams url https://en.wikipedia.org/wiki/Query_string

• Split HTML into multiple components https://vuejs.org/api/sfc-spec.html
• Add field validation https://vee-validate.logaretm.com/v4/
• Build unit tests for the components

For this section, you can choose your own implementation. This can be bootstrap, Tailwind or any other libraries you want or standard CSS.

This project was generated with https://cli.vuejs.org/ with an addition for typescript and vue-class-component

npm install

npm run serve

npm run test:unit

npm run lint

• The delivery of the project will be accepted only in github or bitbucket.
• Add this folder untouched as a master branch
• Deliver your code in feature branch
• Make a pull request from feature -> master