初心者によるJavaScriptでストップウォッチを作るための学習 その2

初心者によるJavaScriptでストップウォッチを作るための学習 その2です。

その1はこちら https://qiita.com/amanomunt/items/6329ab755dc30264ee0e

# ストップウォッチを装飾する
目標とする形は以下のようになります。
![No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478298/bdecbbef-d4bf-3e76-425e-7c172577533b.png)

現在のhtmlは

```html
  <div id="timer">00:00.000</div>
  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <button id="reset">Reset</button>
```
です。これに
1.装飾のためにbutton要素をdiv要素に変更
2.全体を整えるために大枠divを用意
3.ボタンdivをFlexboxへ
のようにしていきます。

```html
  <div class="container"> <!--大枠 ここから-->
    <div id="timer">00:00.000</div>
    <div class="controls"> <!--Flexbox親要素 ここから-->
      <div class="btn" id="start">Start</div>
      <div class="btn" id="stop">Stop</div>
      <div class="btn" id="reset">Reset</div>
    </div> <!--Flexbox親要素 ここまで-->
  </div> <!--大枠 ここまで-->
```

それを整えるCSSは

```css:
body {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  background: #eee;
}

.container { /* 大枠 */
  margin:20px auto;
  width:270px;
  background: #fff;
  padding:15px;
  text-align: center;
}

#timer { /* タイマー表示部 */
  background:#ddd;
  height: 120px;
  line-height: 120px;
  font-size: 40px;
  margin-bottom: 15px;
}

.btn { /* ボタン部 */
  width: 80px;
  height: 45px;
  line-height: 45px;
  background: #ddd;
  font-weight: bold;
  cursor: pointer;
  user-select: none; /* 連打による範囲選択を拒否 */
}

.controls { /* Flexbox */
  display: flex;
  justify-content: space-between; /* 均等配置 */
}
```
以上で装飾については完了です。

## 調整して完成させる
上記の装飾の過程で、button要素をdiv要素にしたので、その調整を行います。

まずbutton要素では使えた.disabled = true;での無効化がdivでは使えません。
そのため無効化に関してはdisabledに対応するスタイルを使って制御します。

まずはそのスタイルを用意します。

```css:
.inactive {
  opacity: 0.6;
}
```
次にJavaScriptのdisabledプロパティのところを以下のようにclassListを使うよう編集します。
disabled = true;　→　classList.add('inactive');
disabled = false;　→　classList.remove('inactive');

```JavaScript:
  function setButtonStateInitial() {
    start.classList.remove('inactive');
    stop.classList.add('inactive');
    reset.classList.add('inactive');
  }
  function setButtonStateRunning() {
    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');
```
次に、ボタンにinactiveクラスがついていたら、各ボタンを押しても実行されないようにします。
そのためには、if文を使って、**もしinactiveクラスを保持していたら、returnする**とします。


```JavaScript:
  start.addEventListener('click', () => {
    if (start.classList.contains('inactive') === true) {
      return;
    }
    setButtonStateRunning(); // Runningへ以降
    startTime = Date.now();
    countUp();
  });
  stop.addEventListener('click', () => {
    if (stop.classList.contains('inactive') === true) {
      return;
    }
    setButtonStateStopped(); // Stoppedへ以降
    clearTimeout(timeoutId);
    elapsedTime += Date.now() - startTime;
  });
  reset.addEventListener('click', () => {
    if (reset.classList.contains('inactive') === true) {
      return;
    }
    setButtonStateInitial(); // Initualへ以降
    timer.textContent = '00:00.000';
    elapsedTime = 0;
  });
```

以上でストップウォッチ制作を完了とします。


※ちなみにこれらはドットインストールの講義を参考にしたものです。