[チュートリアル] JavaScriptを使用したポモドーロクロックの作成

このチュートリアルではPomodoro Clock あなたが別のタスクに取り組んで過ごす時間を追跡するために.
畝

結果

このプロジェクトのライブデモを見ることができますHere
畝

仕事

初心者/中間

ツール:お好みのテキストエディタ

期間:1 - 2時間

ギタブレポhttps://github.com/AlbertoMontalesi/InspiredWebDev-Tutorials/pomodoro-clock

これらはポモドーロクロックのユーザーストーリーです.

ユーザが起動/一時停止/タイマーを停止することができます

[ユーザ]タスクのタイトルを編集できます

[]ユーザは完成したポモドーロセッションのリストを見ることができます

ユーザは各ワーク/ブレークセッションの持続時間をカスタマイズできます

我々はこのポモドーロ時計で何を達成したいか知っているので、簡単なHTML構造の構築を始めましょう.
畝



私の電子ブックを得るAmazon and Leanpub
畝

再生し、タイマーを一時停止

我々は、タイマーを表示するボタンを追加し、一時停止し、それを停止するには、単純なHTML構造を作成することから開始されます.

 <div id="pomodoro-container">
  <div id="pomodoro-clock">
    <div id="pomodoro-timer"></div>
    <div id="pomodoro-clock-actions">
      <button id="pomodoro-start">Start</button>
      <button id="pomodoro-pause">Pause</button>
      <button id="pomodoro-stop">Stop</button>
    </div>
  </div>
</div>

今私たちは基本的な構造を持ってtoggleClock 関数はscript.js ファイル.
この関数はすべての3つのボタンで呼び出されます.
まず、イベントリスナーをボタンに付けましょう.

const pomodoroTimer = document.querySelector('#pomodoro-timer');

const startButton = document.querySelector('#pomodoro-start');
const pauseButton = document.querySelector('#pomodoro-pause');
const stopButton = document.querySelector('#pomodoro-stop');

// START
startButton.addEventListener('click', () => {
  toggleClock();
})

// PAUSE
pauseButton.addEventListener('click', () => {
  toggleClock();
})

// STOP
stopButton.addEventListener('click', () => {
  toggleClock(true);
})

それぞれのボタンを変数に格納し、イベントリスナーを添付しました.
あなたが見ることができるようにstopButton 我々は、議論を渡すtoggleClock 関数.あなたはすぐになぜ表示されます.
我々はタイマーを再生するか、または一時停止する必要があるかどうかを知るために、我々は我々が呼び出すことが追加の変数が必要ですisClockRunning デフォルトではfalse .

let isClockRunning = false;

初期設定を完了するには、さらにいくつかの変数が必要です.

// in seconds = 25 mins
let workSessionDuration = 1500;
let currentTimeLeftInSession = 1500;

// in seconds = 5 mins;
let breakSessionDuration = 300;

さあ、始めましょうtoggleClock 関数.

 const toggleClock = (reset) => {
  if (reset) {
    // STOP THE TIMER
  } else {
    if (isClockRunning === true) {
      // PAUSE THE TIMER
      isClockRunning = false;
    } else {
      // START THE TIMER
      isClockRunning = true;
    }
  }
}

toggleClock つの引数をとります.reset タイマを停止した場合にのみ渡される.そうでなければ変数の値を見るisClockRunning かどうかを再生するか、タイマーを一時停止する必要があります.
我々は、内蔵メソッドを活用するsetInterval 我々のタイマーを追跡する.
内部のelse 下記の声明isClockRunning = true 書くことができます.

clockTimer = setInterval(() => {
    // decrease time left / increase time spent
    currentTimeLeftInSession--;
}, 1000)

これが何をするかは、セッション時間を1秒ごとに減少させる.
我々は、このタイマーを一時停止することができます一時停止ボタンをクリックすると、このコードを追加してくださいtoggleClock 上記の関数isClockRunning = false :

clearInterval(clockTimer);

これは、我々は我々が再生ボタンをクリックするときに設定タイマーをクリアします.
畝

時刻をフォーマットして表示する関数を作成する

この最初のマイルストーンの最後のステップは、我々のページにタイマーを表示することです.
そのためには、関数を作成しますdisplayCurrentTimeLeftInSession どれが我々のタイマーから毎秒呼ばれます.
まず、この行を右に加えましょうcurrentTimeLeftInSession--; それで我々setInterval このように見える

clockTimer = setInterval(() => {
  currentTimeLeftInSession--;
  displayCurrentTimeLeftInSession();
}, 1000);

今、我々の下でtoggleClock 関数、新しいものを作りましょう.

const displayCurrentTimeLeftInSession = () => {
  const secondsLeft = currentTimeLeftInSession;
  let result = '';
  const seconds = secondsLeft % 60;
  const minutes = parseInt(secondsLeft / 60) % 60;
  let hours = parseInt(secondsLeft / 3600);
  // add leading zeroes if it's less than 10
  function addLeadingZeroes(time) {
    return time < 10 ? `0${time}` : time
  }
  if (hours > 0) result += `${hours}:`
  result += `${addLeadingZeroes(minutes)}:${addLeadingZeroes(seconds)}`
  pomodoroTimer.innerText = result.toString();
}

うわー、私はあなたがこの機能によってガードをキャッチしたが、心配しないでください、それはそれが見えるように複雑ではない.
我々は数秒でタイマーを格納しているので、我々は、ユーザーが分と秒だけでなく、秒を見ることができるようにフォーマットする方法が必要です.
シンボル% は残りと呼ばれ、あなたはそれについてもっと読むことができますhere .
それが行うのは、第1オペランドと第2オペランドの分割の左を返すことです.
例:

const x = 70;
x % 60;
// 10

今すぐイメージx 私たちのsecondsLeft . 70秒は、1分と10秒を意味します.
ご覧の通り、使用によって% 60 我々は、表示する秒を取得します.
次のステップは、私たちのタイマーにどのように多くの分が残っていることを得ることです.

const minutes = parseInt(secondsLeft / 60) % 60;

これは1を返します.
最後のステップは、このような時間をカウントすることです.

let hours = parseInt(secondsLeft / 3600);

3600は1時間での秒の量です.
適切なクロックは、この形式で時間を表示する必要があります:“07 : 08”ので、私たちは、分または秒が10未満のときに先頭のゼロを追加する方法を持っている必要があります.

function addLeadingZeroes(time) {
  return time < 10 ? `0${time}` : time
}

この構文は初心者のために混乱するかもしれませんが、これはいわゆる三元演算子であり、実際には非常にシンプルで使いやすいです.

return time < 10 ? `0${time}` : time

ずっと前に何が評価されますか、この場合、「10未満の時間ですか?」との間の最初の部分'そして、':'は、答えがyes whieであるならば、何を返しますか?
プレーンテキストで:「時間が10未満であるならば、それの前でゼロで時間を返してください.
コードの最後の部分は、単に時間(もしあれば)、分と秒を一緒に補間して文字列を作成します.

if (hours > 0) result += `${hours}:`
result += `${addLeadingZeroes(minutes)}:${addLeadingZeroes(seconds)}`

あなたが何を知らないならば${} は、文字列の補間についての詳細を読むことができますhere .
つまり、プラス記号で文字列を常に追加することなく、変数とプレーンテキストの両方を一緒に書くことができます.
一旦私たちのタイマーで時間を表している我々のきちんとフォーマットされたストリングを持っているならば、それはコードのこの単純な線で我々のページにそれを加える時間です:

pomodoroTimer.innerText = result;

このチュートリアルを読み続けることができますthis link