JavaScript - Input, Processing, and Output(Retirement 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 2(Input, Processing, and Output)、6(Retirement Calculator)を取り組んでみる。

6(Retirement Calculator)

コード(Emacs)

<label for="age0">
  What is your current age?
  <input id="age0" type="number" min="0" step="1" max="250" value="25">
</label>
<br>
<label for="retire0">
  At what age would you like to retire?
  <input id="retire0" type="number" min="0" step="1" max="250" value="65">
</label>
<br>
<span id="age_error0" style="color:red;"></span>
<p>
  You have <span id="left_year0"></span> years left until you can retire.
</p>
<p>
  It's <span id="current_year0"></span>, so you can retire in
  <span id="retire_year0"></span>
</p>

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

var input_age = document.querySelector('#age0'),
    input_retire = document.querySelector('#retire0'),
    inputs = [input_age, input_retire],
    span_error = document.querySelector('#age_error0'),
    span_left_year = document.querySelector('#left_year0'),
    span_current_year = document.querySelector('#current_year0'),
    span_retire_year = document.querySelector('#retire_year0'),
    calc;

calc = function () {
    var age = parseInt(input_age.value, 10),
        retire = parseInt(input_retire.value, 10),
        left_year = retire - age,
        current_year = new Date().getFullYear(),
        retire_year = current_year + left_year;

    if (left_year < 0) {
        span_error.innerText = 'Invalid age';
        span_error.hidden = false;
    } else {
        span_left_year.innerText = left_year;
        span_current_year.innerText = current_year;
        span_retire_year.innerText = retire_year;
        span_error.hidden = true;
    }
};

calc();

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

What is your current age?
At what age would you like to retire?

You have years left until you can retire.

It's , so you can retire in