JavaScript - Calculations(Self-Checkout)

Exercises for Programmers

開発環境

• OS X El Capitan - Apple (OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• jQuery (Library)
• Safari(Web browser)

Exercises for Programmers: 57 Challenges to Develop Your Coding Skills (Brian P. Hogan 著、Pragmatic Bookshelf)のChapter 3(Calculations)、10(Self-Checkout)を取り組んでみる。

10(Self-Checkout)

コード(Emacs)

<label for="price1">
  Enter the price of item 1: <input id="price1" type="number" min="0" step="1"
                                    value="25">
</label>
<br>
<label for="quantity1">
  Enter the quantity of item 1: <input id="quantity1" type="number" min="0"
                                       step="1" value="2">
</label>
<br>
<label for="price2">
  Enter the price of item 2: <input id="price2" type="number" min="0" step="1"
                                    value="10">
</label>
<br>
<label for="quantity2">
  Enter the quantity of item 2: <input id="quantity2" type="number" min="0"
                                       step="1" value="1">
</label>
<br>
<label for="price3">
  Enter the price of item 3: <input id="price3" type="number" min="0" step="1"
                                    value="4">
</label>
<br>
<label for="quantity3">
  Enter the quantity of item 3: <input id="quantity3" type="number" min="0"
                                       step="1" value="1">
</label>
<br>
Subtotal: $<span id="subtotal0"></span>
<br>
Tax: $<span id="tax0"></span>
<br>
Total: $<span id="total0"></span>

<script src="sample10.js"></script>

(function () {
    var TAX_RATE = 0.055,
        input_price1 = document.querySelector('#price1'),
        input_quantity1 = document.querySelector('#quantity1'),
        input_price2 = document.querySelector('#price2'),
        input_quantity2 = document.querySelector('#quantity2'),
        input_price3 = document.querySelector('#price3'),
        input_quantity3 = document.querySelector('#quantity3'),
        inputs = [input_price1, input_quantity1,
                  input_price2, input_quantity2,
                  input_price3, input_quantity3],
        span_subtotal = document.querySelector('#subtotal0'),
        span_tax = document.querySelector('#tax0'),
        span_total = document.querySelector('#total0'),
        calc;

    calc = function () {
        var price1 = parseInt(input_price1.value, 10),
            quantity1 = parseInt(input_quantity1.value, 10),
            price2 = parseInt(input_price2.value, 10),
            quantity2 = parseInt(input_quantity2.value, 10),
            price3 = parseInt(input_price3.value, 10),
            quantity3 = parseInt(input_quantity3.value, 10),
            pairs = [[price1, quantity1],
                     [price2, quantity2],
                     [price3, quantity3]],
            pair,
            subtotal = 0,
            tax,
            total,
            i,
            max;

        for (i = 0, max = pairs.length; i < max; i += 1) {
            pair = pairs[i];
            subtotal += pair[0] * pair[1];
        }
        tax = subtotal * TAX_RATE;
        tax = Math.floor(tax * 100) / 100;
        total = subtotal + tax;

        span_subtotal.innerText = subtotal.toFixed(2);
        span_tax.innerText = tax.toFixed(2);
        span_total.innerText = total.toFixed(2);
    };

    calc();

    inputs.forEach(function (input) {
        input.onchange = calc;
        input.onkeyup = calc;
    });
}());

Enter the price of item 1:
Enter the quantity of item 1:
Enter the price of item 2:
Enter the quantity of item 2:
Enter the price of item 3:
Enter the quantity of item 3:
Subtotal: $
Tax: $
Total: $