Rocks version of the mixology simulator

Mixology Simulator

It’s a mixed drink maker for budding alcoholics! This JavaScript-based program lets you mix your own alcoholic drink from a list of common components and garnishes. It then tells you what it thinks of your finished creation.

Try the drink maker out via the links below! And yes, you can create an all-parts vodka 'mixed' drink.

TRY IT OUT - BASIC VERSION - ROCKS GLASS ADVANCED VERSION - HIGHBALL GLASS [DESKTOP ONLY]

Otherwise, keep on scrolling to read up a little bit on the creation process.

The Basics

This project was the result of my attempt to learn and get used to basic code concepts such as variables, functions, if statements, and booleans. As such, this entire project was essentially a learning exercise for coding and beginner-level JavaScript. It was the result of a lot of late hours of trying to understand just the ABC’s of an entire language. It may look nothing special to some and downright messy to others, but for me, it was a major milestone.

Highball version of the mixology simulator

99 Little Bugs In The Code…

...patch one out, compile it around, 110 little bugs in the code! If it's one thing I learned from this project, it's that I need to plan my code better for the sake of efficiency (and my sanity).

The generated results are drawn from a pool of almost 90 different if statements for the advanced version. These vary largely in their trigger requirements. Although I'm sure there would have been much more efficient ways of handling the calculation of results, I stuck with using if statements in native JavaScript. At this stage, just using operands was already more than enough of a challenge for me.

Simulation vs Reality

The first main issue I ran into was dealing with serving sizes. Unfortunately, accurate proportions were difficult to visualize, much less animate, especially when there is overall responsiveness to consider. Instead of using ‘ounces’ and 'teaspoons’ to measure the drink components, I opted to use ‘parts’ and ‘splashes’. That way, the simulated drinks became more ratio-based and much easier to animate.

For example, let’s say a martini recipe required 2 ounces of gin and an ounce of vermouth. In the simulation, the ounces are replaced by parts. Thus, the user would click twice on gin and once on vermouth to recreate the martini as a 3-part drink. This way, the measurements are still fairly represented. It is far from perfect; the application for instance does not take into account the use of a shaker prior to pouring the drink into the glass. But hey, what does a college student know about alcohol?