ドットインストール復習②~ヘルスケアwebサービスを自分で作る医者の日記~

ドットインストールの復習

ストップウォッチアプリ

やり直すと
どれだけ一回だけでは理解できていないか

愕然とするが
確実に学びになる。

見えている深さが違う。

以下
ポイントをコメントアウトにて記録

main.js

'use strict';

{
  const timer = document.getElementById('timer');
  const start = document.getElementById('start');
  const stop = document.getElementById('stop');
  const reset = document.getElementById('reset');

  let startTime;
  let timeoutId;
  let elapsedTime = 0;

// Date.nowの扱い
  function countUp() {
    const d = new Date(Date.now() - startTime + elapsedTime);
    const m = String(d.getMinutes()).padStart(2, '0');
    const s = String(d.getSeconds()).padStart(2, '0');
    const ms = String(d.getMilliseconds()).padStart(3, '0');
    timer.textContent = `${m}:${s}.${ms}`;
    timeoutId = setTimeout(() => {
      countUp();
    }, 10);
  }

  // ボタン要素のdisableプロパティの操作、表示のオンオフを関数で定義しておく。
  function setButtonStateInitial() {
    start.classList.remove('inactive');
    stop.classList.add('inactive');
    reset.classList.add('inactive');
  }
  function setButtonStateRunnnig() {
    start.classList.add('inactive');
    stop.classList.remove('inactive');
    reset.classList.add('inactive');
  }
  function setButtonStateStopped() {
    start.classList.remove('inactive');
    stop.classList.add('inactive');
    reset.classList.remove('inactive');
  }

  setButtonStateInitial();

  start.addEventListener('click', () => {
    if(start.classList.contains('inactive') === true ) {
      return;
    }
    setButtonStateRunnnig();
    startTime = Date.now();
    countUp();
  });
  // elapsedTimeはstartを押した時からstopを押した時までの時間を保持する。
  // +=で多重代入
  stop.addEventListener('click', () => {
    // return;することでinactiveになってる場合にクリックしてもその後の処理はすすまない、無効化しているのと一緒
    if(stop.classList.contains('inactive') === true ) {
      return;
    }
    setButtonStateStopped();
    clearTimeout(timeoutId);
    elapsedTime = Date.now() - startTime;
  });
  reset.addEventListener('click', () => {
    if(reset.classList.contains('inactive') === true ) {
      return;
    }
    setButtonStateInitial();
    timer.textContent = '00:00.000';
    elapsedTime = 0;
  });

}

styles.css

/* heightプロパティとline-heightプロパティをおなじpxにすると要素の中の文字が上下中央揃いになる */
#timer {
  height: 120px;
  font-size: 40px;
  line-height: 120px;
  margin-bottom: 15px;
  background: #ddd;
}

ソフトウェアの機能
と
ユーザーの実際の操作
と
プログラミングの記述法

3つの軸がそれぞれ異なる。

これがプログラミングが難しい原因

UMLというのを勉強するとこれがわかるらしい。
いつか勉強したいな。