JavaScript - Making Decisions(Tax Calculator)

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 4(Making Decisions)、14(Tax Calculator)を取り組んでみる。

14(Tax Calculator)

コード(Emacs)

<label for="order0">
  What is the order amount? 
</label>
<input id="order0" type="number" min="0" step="1" value="10">
<br>
<label for="state0">
  What is the state? 
</label>
<input id="state0" type="text" value="WI">
<div id="output0"></div>

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

(function () {
    'use strict';
    var TAX_RATE = 0.055,
        input_order = document.querySelector('#order0'),
        input_state = document.querySelector('#state0'),
        inputs = [input_order, input_state],
        div_output = document.querySelector('#output0'),
        
        display;

    display = function () {
        var order = parseInt(input_order.value, 10),
            state = input_state.value.toLowerCase(),
            subtotal,
            tax,
            total,
            output = '';

        if (state === 'wi' || state === 'wisconsin') {
            subtotal = order;
            tax = Math.round(subtotal * TAX_RATE * 100) / 100;
            total = subtotal + tax;
            output +=
                'The subtotal is $' + subtotal + '<br>' +
                'The tax is $' + tax + '<br>' +
                'The total is $' + total + '.<br>';
        } else {
            total = order;
            output += 'The total is $' + total + '.<br>';
        }
        div_output.innerHTML = output;
    };

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

    display();
}());

What is the order amount?
What is the state?