Frontend development task

Build the form illustrated below using Bootstcrap 4 and add validation with a JavaScript framework (JQuery, React, Vue.js or Alpine.js). Please follow all the instructions.

Guidelines and standards

Requirements:

• Please follow W3C guidelines (you can validate your code here http://validator.w3.org/)
• Make best use of HTML5 and ARIA semantics to ensure the form is accessible (https://webaim.org/techniques/forms/)
• Use progressive enhancement (https://www.gov.uk/service-manual/technology/using-progressive-enhancement)

1. Fork the repository into your Github account and clone the new repository

git clone https://github.com/.../frontend-task.git

2. Create a feature branch

Create a feature branch and name it with your first name and last name

git branch feature/firstname-lastname
git checkout feature/firstname-lastname

3. Build your form

Development setup

Use Bootstcrap 4, Cypress CI for end-to-end testing and a JavaScrip framework (JQuery, React, VueJS or Alpine.js) for validation. Please install the chosen frameworks via npm.

• If React -> Must use React Hooks Components
• If VueJS -> Must show an understanding of Vue v3 and use Vue Components
• Install and set up Cypress CI

Form build

Build your form with validation and error messages. Ensure the form is responsive, mobile first approach. Add validation to the following fields:

• Total number of bins -> required and as integer to the whole number
• Estimated load weight -> required and as integer to second decimal place
• Vehicle registration -> required with a max of 12 characters

NOTE: Please use atomic commits

4. Dynamically add and remove Bin ID fields and test

Use JavaScript to dynamically add and remove Bin ID fields via a button. Write one end-to-end test for adding/removing fields.

5. Create a Pull Request

Once finished, add/commit your work and push your branch to Github, create a Pull Request and assign me (domingobishop) as the Reviewer.