Design and build an event selection drop down for Order search
Event organisers want to filter their customer orders by the event(s) the customer purchased for. To make this easy we want to design and build a simple event selector dropdown that allows the event organiser to select between one and many events. A list of events could be:
- Summer Party – 15:00 7th July 2023
- Christmas Party – 19:00 18th Dec 2023 Half
- Marathon – 13:00 15th Sept 2024
Please build a blank page with a simple form containing:
- An input that allows you to select zero, one or many events
- A submit button.
- Clicking the submit button should post the selected IDs as a comma separated list.
We will be judging the result on:
- User experience
- Aesthetics
- Functional
- Cleanliness of code
It would be a bonus if you can demonstrate the experience for those who have hundreds of events. You can use jQuery or generic JS helpers, but not implement a library that already does dropdowns. We would like you to ideally spend no more than 3 hours on the task.
Please share your solution via a github link or zip.
On the aesthetics question - its been left deliberately vague - although it is often a good choice to make it look similar to current brand identity.
[removed]
Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --openTo create a production version of your app:
npm run buildYou can preview the production build with npm run preview.
To deploy your app, you may need to install an adapter for your target environment.
1 week silence, chased. "The tech test was strong from a design perspective but was not sufficiently on-brief."