JavaScript - Turning Problems into Code(Writing the Code)

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)のPart 3(Canvas)、Chapter 1(Turning Problems into Code)、Writing the Code(No. 332)を取り組んでみる。

Writing the Code(No. 332)

コード(Emacs)

<label>
  What is the bill? <input id="bill0" type="text" value="$200"
                           pattern="^\$\d+$" size="10" placeholder="$200">
</label>
<br>
<label>
  What is the tip percentage? <input id="tip_rate0" type="number" value="15"
                                     min="0" max="100" placeholder="15" >
</label>
<br>
The tip is <b id="tip0"></b><br>
The total is <b id="total0"></b><br>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="sample.js"></script>

var $bill = $('#bill0'),
    $tip_rate = $('#tip_rate0'),
    $tip = $('#tip0'),
    $total = $('#total0'),
    calc;

calc = function () {
    var bill,
        tip_rate,
        tip,
        total;

    bill = parseFloat($bill.val().slice(1));
    tip_rate = parseFloat($tip_rate.val());
    tip = Math.ceil(bill * tip_rate) / 100;
    total = bill + tip;

    $tip.text('$' + tip);
    $total.text('$' + total);
};

calc();
$bill.keyup(calc);
$tip_rate.keyup(calc);

What is the bill?
What is the tip percentage?
The tip is
The total is