Spiral 4 – reading and showing data

Having stored our data in local storage, it is just as easy to read this data from local storage. Here is a simple screen that takes a bank account number as input, and reads its data when the number field is filled in:

Bank terminal screen

Note

For code files of this section, refer to chapter 6\bank_terminal_s4 in the code bundle.

We clean up our code making main() shorter by calling methods:

void main() {
  bind_elements();
  attach_event_handlers();
}
bind_elements() {
  owner = querySelector('#owner');
  balance = querySelector('#balance');
  number = querySelector('#number');
  btn_other = querySelector('#btn_other');
  error = querySelector('#error');
}
attach_event_handlers() {
  number.onInput.listen(readData);
  btn_other.onClick.listen(clearData);
}

Apply this refactoring from now on when coding a form. When the number is filled in, its Input event listener is triggered:

number.onInput.listen(readData);

In the readData handler, the value is read from...