[자습서] JavaScript를 사용하여 Pomodoro 시계 만들기

이 강좌에서, 우리는 당신이 다른 임무에 소비한 시간을 추적하는 데 도움을 줄 Pomodoro Clock 을 만들 것입니다.
 

결과

너는 이 프로젝트의 현장 시범을 볼 수 있다Here
 

임무

난이도: 초급/중급

도구: 선택한 텍스트 편집기

기간: 1-2시간

Github 재구매: https://github.com/AlbertoMontalesi/InspiredWebDev-Tutorials/pomodoro-clock

다음은 이 Pomodoro 시계의 사용자 이야기입니다.

[] 타이머를 시작/일시정지/중지할 수 있음

[] 사용자가 작업을 편집할 수 있는 제목

[] 사용자는 완성된 포모도로 세션 목록을 볼 수 있습니다

[] 사용자가 각 작업/휴무 세션의 기간을 사용자 정의할 수 있음

이제 우리는 우리가 이 Pomodoro 시계로 무엇을 실현하고 싶은지 알게 되었고, 간단한 HTML 구조를 구축하기 시작했다.
 



Amazon과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 함수를 처리하기 위한 기본적인 구조가 생겼다.
이 기능은 세 개의 단추로 호출되며 타이머를 시작, 정지 또는 정지합니다.
먼저 버튼에 이벤트 탐지기를 추가합니다.

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 에 귀속됩니다.

let isClockRunning = false;

초기 집합을 완성하려면 몇 가지 변수가 필요합니다.

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

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

이제 함수 false 를 작성하기 시작합니다.

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

toggleClock 매개변수 toggleClock 는 타이머를 중지할 때만 전달됩니다. 그렇지 않으면 변수 reset 의 값을 확인하여 타이머를 재생하거나 중지해야 하는지 확인합니다.
우리는 내장 방법isClockRunning을 이용하여 타이머를 추적할 것이다.setInterval 문장의 아래else에서 우리는 다음과 같이 쓸 수 있다.

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

이렇게 하는 목적은 초당 1회 세션 시간을 줄이는 것이다.
일시 중지 버튼을 클릭할 때 이 타이머를 일시 중지할 수 있기를 희망하므로 이 코드를 isClockRunning = true 바로 위에 있는 toggleClock 함수에 계속 추가합니다.

clearInterval(clockTimer);

이것은 우리가 재생 단추를 눌렀을 때 설정한 타이머를 지웁니다.
 

시간 포맷 및 표시 함수 만들기

이 초기 이정표의 마지막 단계는 우리 페이지에 타이머를 표시하는 것이다.
이를 위해, 우리는 isClockRunning = false라는 함수를 만들 것입니다. 이 함수는 타이머에서 초당 한 번씩 호출됩니다.
우선, 우리는 displayCurrentTimeLeftInSession 아래에 한 줄을 추가한다. 이렇게currentTimeLeftInSession--; 이렇게 보인다

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

이제 setInterval 함수에서 새 함수를 만듭니다.

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();
}

와, 나는 네가 이 함수에 당황해서 어찌할 바를 모르지만, 걱정하지 마라. 그것은 보기에 그렇게 복잡하지 않다.
초 단위로 타이머를 저장하기 때문에, 사용자가 초뿐만 아니라 분과 초를 볼 수 있도록 포맷하는 방법이 필요합니다.
기호 toggleClock 를 나머지라고 하는데, 그것에 대한 더 많은 정보를 읽을 수 있습니다 here.
그것이 한 것은 첫 번째와 두 번째 조작수를 되돌려주는 제법의 나머지 부분이다.
예:

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

지금 상상해 보세요. % 바로 우리 것입니다x.70초는 기본적으로 1분 10초를 의미한다.
보시다시피 secondsLeft 를 사용하면 표시할 초를 얻을 수 있습니다.
다음 단계는 타이머를 얻는 데 몇 분 남았는지, 우리는 이렇게 한다.

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

이것은 1을 되돌려줍니다.
마지막 단계는 이렇게 시간 수를 계산하는 것이다.

let hours = parseInt(secondsLeft / 3600);

3600은 한 시간 이내의 초수다.
적당한 시계는 이런 형식으로 시간을 표시해야 한다. "07:08"때문에, 우리는 분 또는 초가 10시보다 적을 때 전도 0을 추가하는 방법이 필요하다.

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

초보자에게 이런 문법은 곤혹스러울 수 있지만 이른바 삼원 연산자로서 실제로는 매우 간단하고 사용하기 쉽다.

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

매번 "?"전에이런 상황에서 얻은 것은'시간이 10보다 작습니까?'첫 번째 부분은'?'사이입니다.만약 답이 긍정적이라면,':'은 되돌아오는 것이고,':'뒤에 있는 코드는 답안을 부정하는 되돌아오는 것이다.
일반 텍스트에서 "시간이 10보다 작으면 앞에 0이 있는 시간(예: 9가 아닌 09)을 되돌려주고, 시간이 10보다 크면 되돌려줍니다."
코드의 마지막 부분은 시간 (있다면), 분, 초를 함께 삽입해서 문자열을 만들 뿐입니다.

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

% 60의 의미를 모르면 문자열 삽입값 here 에 대한 내용을 더 읽을 수 있습니다.
간단히 말하면, 우리는 변수와 순수한 텍스트를 동시에 작성할 수 있으며, 끊임없이 문자열을 서로에게 추가할 필요가 없다.
타이머의 남은 시간을 나타내는 형식이 좋은 문자열이 생기면 이 간단한 코드로 페이지에 추가할 수 있습니다.

pomodoroTimer.innerText = result;

당신은 this link를 통해 이 강좌를 계속 읽을 수 있습니다