Boot Camp Ticket Selector

Project Requirements

I built this module for a client that runs ultrasound courses. There are 4 levels of the course, and each level is run on many different dates. Previously, prospective students had to scroll through all of the offerings to find the proper level, date, and city of their choosing. This was NOT very user friendly!

My Plan

The task was simple, create a module with 2 dropdown lists and a button. Based on the selection in the first list, the second list’s options change; then, based on the selection in the second list, the href attribute on the button changes to the appropriate checkout link.

The Result

Using Vanilla JavaScript, HTML, and CSS, I created this set of dropdown lists. The module needed to be integrated easily into a GoDaddy Website Builder site, so I stayed away from any modern JavaScript frameworks for libraries. The module is also responsive for mobile/tablet, and tested on Android and iPhone.

Gallery