Code Generator for Boot Camp Ticket Selector

Project Requirements

I built this module for a client that runs ultrasound courses. See my post here on how I built the dropdown lists.
After closing my business and leaving the world of freelance, this client needed a way to update course offerrings without editing code.

My Plan

I needed to create a tool that not only provided the code needed for a new dropdown, but took in existing code, edited it, and then provided the updated code. And this all needed to be user-friendly and fool-proof since I wouldn’t be available to update and edit the code myself anymore.

The Result

Using Vue.js, HTML, and CSS, I created the code generator. This tool accepts the existing code from the GoDaddy website builder’s “Custom HTML” module, parses out the dropdown’s <option> elements, and displays them in a form where the user can edit the existing courses, add courses, and delete courses. Once the user has finished updating the course offerrings, the generator organizes the new data into the proper <select> dropdown for the specified course level and appends the CSS and JavaScript to the top and bottom of the HTML code.

Gallery