javascript volume calculator from width, length and depth

Question

I'm not amazing at maths, I must admit :)

Essentially I need to create a calculator that takes:

1. width
2. length
3. depth

From these inputs, I need to display the answer in m³.

Making it a little more tricky, a user can choose between 5 drop-down options:

1. Centimeter
2. Inches
3. Feett
4. Yards
5. Meters

For example, a user could do something like:

width = 10 centimeters
length = 7 foot
depth = 2 inches

So my thought was to convert all user input into millimeters to make them the same type. The formula for finding a volume is:

length * height * width

So I figure if I do this in millimeters, I can then convert it back to meters. However, I'm running into problems and not getting the correct answers from my code. The logic must be completely wrong (Like I said my maths is not amazing )

Here is my code:

        <tr>
            <td>Width</td>
            <td><input type="text" id="width"/></td>
            <td>
                <select id="width-type">
                    <option value="centimeter">Centimeter</option>
                    <option value="inches">Inches</option>
                    <option value="feet">Feet</option>
                    <option value="yards">Yards</option>
                    <option value="meters">Meters</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Length</td>
            <td><input type="text" id="length"/></td>
            <td>
                <select id="length-type">
                    <option value="centimeter">Centimeter</option>
                    <option value="inches">Inches</option>
                    <option value="feet">Feet</option>
                    <option value="yards">Yards</option>
                    <option value="meters">Meters</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Depth</td>
            <td><input type="text" id="depth"/></td>
            <td>
                <select id="depth-type">
                    <option value="centimeter">Centimeter</option>
                    <option value="inches">Inches</option>
                    <option value="feet">Feet</option>
                    <option value="yards">Yards</option>
                    <option value="meters">Meters</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <button id="calculate">Calculate</button>
            </td>
        </tr>



<script>
$('#calculate').click(function(){

    //These are the amount of mm in each drop down menu type
    var array = new Array();
    array['centimeter'] = '10';
    array['inches']     = '25.4';
    array['feet']       = '304.8';
    array['yards']      = '914.4';
    array['meters']     = '1000';

    //Find the width in mm
    var widthVal    = $('#width').val();
    var widthType   = $('#width-type').val();
    var width       = widthVal * array[widthType];

    //Find the length in mm
    var lengthVal   = $('#length').val();
    var lengthType  = $('#length-type').val();
    var length      = lengthVal * array[lengthType];

    //Find the depth in mm
    var depthVal    = $('#depth').val();
    var depthType   = $('#depth-type').val();
    var depth       = depthVal * array[depthType];

    //Find the total volume in mm
    var volumeInMillimeters = length * depth * width;

    //try to convert it back to meters
    var volume = volumeInMillimeters / 1000;
    alert(volumeInMillimeters);
    alert(volume);

});
</script>

Also here is a js fiddle so you can see it working - https://jsfiddle.net/

If someone can help me do this, not looking for just an answer but the explanation to go with it please.

Thanks!

Answer 1 · 2016-06-23T14:52:30Z

June 23, 2016 2:52pm

It seems to be working very well! The only issue I see is where you say "convert it back to meters" — but your program actually converts the result to centimeters. (mm(3) / 1000 = cm(3)) I would just change the comment:

    // convert it back to centimeters
    var volume = volumeInMillimeters / 1000;

Remember, the final result is cubic measurements, so the conversion factor is the cube of linear version.

Some cool enhancements to the program might be:

put the result on the page (instead of using alert)
provide a drop-down to select output units also

But in general, good job!

Welcome to the Treehouse Community

Looking to learn something new?

Matthew Smart

Matthew Smart

javascript volume calculator from width, length and depth

1 Answer

Steven Parker

Steven Parker