Use HTML, JavaScript, and CSS3 (you may optionally use JQuery or AngularJS if you like).

The HTML, JavaScript, and CSS3 may be in 3 separate source code files or self-contained in the single HTML page.

The HTML page will allow a user to enter an input flow-rate, and will display the output flow-rate after pressing a button labeled Calculate.

A single text-box allows the entry of the input flow rate. Input flow rate must only allow numeric values between 1 and 10,000.

The input flow rate is paired with a select box to specify the input flow units. Values are

o Gallons/minute

o Gallons/second

o Liters/minute

o Liters/second

The output flow rate is paired with a select box to specify the output flow units. Values are

o Gallons/minute

o Gallons/second

o Liters/minute

o Liters/second

The output flow rate is displayed in a separate text field after pressing the Calculate button and performing the flow-calculation based on the input and output unit values. For example: 10 gallons per second input would produce 2271.246 liters / minute output.

Use the following conversion factor in your code: var LITERS_PER_USGALLON = 3.78541;

If a valid input rate is currently specified, changing either the input units selector or output units selector will result in an immediate recalculation and display of the output flow rate.

If an invalid input value is specified (non-numeric or values outside of the range specified above), the user is informed in a text field at the bottom of the page.

The error text field at the bottom should be empty (after pressing Calculate) if no input errors occurred.

Comment your source code at a level you feel is sufficient for clarity.

I would prefer to use javascipt, CSS3 and HTML for this.