나만의 뽀모도로 타이머 만들기

13968 단어 beginners javascript tutorial

나만의 뽀모도로 타이머 만들기

Abdur Rehman의 Promodoro Timmer

기여자
프로필 링크

압두르 레만
https://github.com/abdurrehmaan

제나트 파르빈
https://github.com/Zeeizee

데모
소스 코드

https://promodorotimer.netlify.app/
https://github.com/abdurrehmaan/pomodorotimer

오늘 우리는 특정 작업의 전체 작업 시간과 휴식 시간을 추적하기 위해 Promodoro 타이머를 만들 것입니다.

이 작업은 웹 프로그래밍 과정 중에 (Raheel@Devnation)이 제공합니다. 작업은 작업을 시작할 때와 짧은 휴식을 취할 때를 정확히 알려주는 promodoro 타이머를 구축하는 것이 었습니다. 마지막에 완료된 작업과 계산된 작업 시간(작업 시간 + 휴식 시간)을 표시합니다.
참고: tasktime == worktime ;

기본 프로세스는 다음과 같습니다.

25분 타이머를 시작합니다.

타이머가 울릴 때까지 작업합니다.

5분간 짧게 휴식을 취하십시오.

완료된 작업 나열

총 시간(근무시간 + 휴식시간)으로 계산

사용자 인터페이스

사용자 작업

다음은 이 포모도로 타이머의 사용자 스토리입니다.

사용자가 타이머를 시작/정지할 수 있음

사용자가 타이머를 일시 중지/다시 시작할 수 있음

사용자가 작업 제목을 추가할 수 있음

사용자는 완료된 시간과 함께 완료된 pomodoro 작업 목록을 볼 수 있습니다.

프레임워크 및 툴킷

오픈 소스 CSS 프레임워크인 부트스트랩을 사용했습니다.

 <!-- bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

And We for Icons 우리는 멋진 글꼴 아이콘 세트 및 도구를 제공합니다.

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
        integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
        crossorigin="anonymous" />

프로모도로 구조

타이머를 표시하고 타이머를 시작, 일시 중지 및 중지하는 버튼을 추가하는 간단한 HTML 구조를 만드는 것부터 시작하겠습니다.

 <div class="container my-3">
        <h2 class="text-uppercase text-center display-4">Promodoro Timer</h2>
        <div class="worktimer my-4">
        </div>
        <div>
            <input type="text" class="taskname" placeholder="Enter your Task here">
        </div>
        <div class="wb-box my-4">
            <div class="wt-box">
                <label for="">Work Time</label>
                <input type="number" class="workinterval" value="25" readonly>
            </div>
            <div class="wt-box">
                <label for="">Break Time</label>
                <input type="number" class="breakinterval" value="5" readonly>
            </div>
        </div>
        <div class=" alertmessagebox text-center mb-2"><small class="alertmessage d-none font-weight-bold ">Enter task
                name before
                start</small>
        </div>
        <div class="actionbtns">
            <button class="btnstart startgrey "><i class="fas fa-play-circle"></i></button>
            <button class="btnpause bg-warning d-none "><i class="fas fa-pause-circle"></i></button>
            <button class="btnresume bg-warning d-none "><i class="fas fa-step-forward"></i> </button>
            <button class="btnstop bg-danger d-none "><i class="fas fa-stop-circle"></i></button>
        </div>
        <div class="mt-4">
            <span class="text-uppercase text-center display-5 ">Your Completed Tasks</span>

        </div>
        <div class="completedList my-3">
            <ul class="py-3">

            </ul>

        </div>
    </div>

# 스타일링 프로모도로 타이머

  :root{
    --gray: #eeeded;
}
.yellowcolor {
    background: #e67e22;
    color:white;
}
.greencolor {
    background: #2980b9;
    color:white;
}
.container{
    max-width: 400px;
}
.worktimer {
    height: 150px;
    width: 100%;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    /* background-color: var(--gray); */
    /* border: none; */
    outline: none;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
.worktimer2 {
    height: 150px;
    width: 100%;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    background-color: white;
    /* border: none; */
    outline: none;
    color:#2980b9;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
.worktimer span {
    font-size: 5rem;
}
.taskname{
    width: 100%;
    height: 50px;
    border: none;
    outline: none;
    /* background-color: var(--gray); */
    padding: 20px;
    border-radius: 5px;
    /* background-color: #2980b9; */
    color: #2980b9;;
    font-size: 1.5rem;
    border: 2px solid #2980b9;
}
.wb-box{
    display: flex;
    justify-content: center;
    align-items: center;
}
.wb-box .wt-box {
    margin: 10px;
    text-align: center;
}
.wb-box .wt-box label {
    font-size: 1.2rem;
    font-weight: 600;
}
.wb-box .wt-box input {
    width: 100%;
    border: none;
    outline: none;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    font-size: 1.5rem;
}
.startgrey{
    background-color: #2980b9;
    opacity: 0.5;
}
.startblue{
    background-color: #2980b9;
    color:white;
}
.alertmessagebox
{
    height: 25px;
    width: 100%;
    color:#e67e22;
}
.workinterval {
    background-color: #2980b9;
    color: white;
}
.breakinterval{
    background-color: #e67e22;
    color: white;
}
.actionbtns{
    display: flex;
    justify-content: center;
    align-items: center;
}
.actionbtns button{
    margin: 5px;
    width: 50%;
    padding: 20px;
    border: none;
    border-radius: 5px; 
    color: white;
    font-size: 1.2rem;
}
.fas{
    font-size: 2.5rem;
}
.completedList ul {
  list-style:decimal;
    width: 100%;
    background-color: #a5d6f7;
    color: white;   
}
.completedList ul li { 
    background-color: white;
    margin-top: 20px;
    margin-bottom: 10px;
    margin-right: 20px;
    color: #2980b9;
    padding: 10px 10px;
    font-size: 1.2rem;
}

시간 형식을 지정하고 표시하는 함수 만들기

먼저 모든 변수를 정의했습니다. jQuery를 사용하지 않았기 때문에 document.querySelector.를 사용하여 모든 요소를 캡처했는지 확인했습니다.
'시작' 버튼을 클릭하면 간격이 지워집니다. isPaused가 true에서 false로 변경되면 새 간격이 설정됩니다.
'재설정' 버튼은 간격을 지우고 변수를 재설정합니다.

타이머 기능은 카운트다운 마법이 일어나는 곳입니다. 초에서 1초를 뺍니다. 초인 경우 <; 0, 알람이 재생되고 기능이 다음 카운트다운이 작업 세션인지 휴식 세션인지 결정합니다.

이제 작업 및 휴식 시간에 대한 +/- 버튼을 사용할 시간입니다. 처음에는 모든 버튼에 onclick 기능을 만들었습니다. 기능적이긴 했지만 분명히 개선의 여지가 있었습니다.
HTML을 업데이트할 시간입니다!
카운트다운 표시 및 버튼 표시를 업데이트하는 기능을 만들고 이러한 기능을 작업/휴식 상태 및 기간도 업데이트하는 중요한 기능에 통합했습니다.
마지막으로 document.onclick을 사용하여 사용자가 페이지를 클릭할 때마다 updateHTML 기능을 실행했습니다. 또한 좋은 측정을 위해 window.setInterval을 사용하여 초당 10번 함수를 실행했습니다.

function setInitialTime() {
  document.getElementById("minutes").innerHTML = session_minutes;
  document.getElementById("seconds").innerHTML = session_seconds;
}

function start_work() {

  taskName = document.getElementById("taskname").value;
  const workTime = document.getElementById('worktime').value;
  const breakTime = document.getElementById('breaktime').value;
  session_minutes = workTime-1;
  session_seconds = 59;
  document.getElementById("minutes").innerHTML = session_minutes;
  document.getElementById("seconds").innerHTML = session_seconds;
  minutes_interval = setInterval(minutesTimer, 60000);
  seconds_interval = setInterval(secondsTimer, 1000);

  function minutesTimer() {
    session_minutes = session_minutes - 1;
    document.getElementById("minutes").innerHTML = session_minutes;
  }
  function secondsTimer() {
    session_seconds = session_seconds - 1;
    document.getElementById("seconds").innerHTML = session_seconds;

    if (session_seconds <= 0) {
      if (session_minutes <= 0) {
        clearInterval(minutes_interval);
        clearInterval(seconds_interval);
        document.getElementById("done").innerHTML = "Session Done, Take a Break!";
        document.getElementById("done").classList.add("show_message");
        start_break(breakTime);
      }
      session_seconds = 60;
    }
  }
}
function start_break(breakTime) {

  session_minutes = breakTime-1;
  session_seconds = 59;

  document.getElementById("minutes").innerHTML = session_minutes;
  document.getElementById("seconds").innerHTML = session_seconds;


  minutes_interval = setInterval(minutesTimer, 60000);
  seconds_interval = setInterval(secondsTimer, 1000);


  function minutesTimer() {
    session_minutes = session_minutes - 1;
    document.getElementById("minutes").innerHTML = session_minutes;
  }


  function secondsTimer() {
    session_seconds = session_seconds - 1;
    document.getElementById("seconds").innerHTML = session_seconds;


    if (session_seconds <= 0) {
      if (session_minutes <= 0) {

        clearInterval(minutes_interval);
        clearInterval(seconds_interval);


        document.getElementById("done").innerHTML = "Break Finished! Continue Working now!";
        document.getElementById("done").classList.add("show_message");

        start_work()
      }
      session_seconds = 60;
    }
  }
}
function reset(){

  clearInterval(minutes_interval)
  clearInterval(seconds_interval)
  let session_seconds = "00";
  let session_minutes = 00;
  document.getElementById("minutes").innerHTML = session_minutes;
  document.getElementById("seconds").innerHTML = session_seconds;
}
function startTime(){

  const dateNow = new Date();
  return dateNow
}

function stopTime(){
  const dateNow = new Date()
  return dateNow

}

document.getElementById("start-button").addEventListener("click", () => {
  start_work();
  start = startTime()

  document.getElementById("start-button").classList.add("d-none")
  document.getElementById("pause-button").classList.remove("d-none")
});

document.getElementById("pause-button").addEventListener("click", () =>{
  clearInterval(minutes_interval)
  clearInterval(seconds_interval)

  document.getElementById("pause-button").classList.add("d-none")
  document.getElementById("resume-button").classList.remove("d-none")

} )
document.getElementById("resume-button").addEventListener("click", () => {

  minutes_interval = setInterval(()=> {
    session_minutes = session_minutes - 1;
    document.getElementById("minutes").innerHTML = session_minutes;}, 
    60000);

  seconds_interval = setInterval(() => {
    session_seconds = session_seconds - 1;
    document.getElementById("seconds").innerHTML = session_seconds;
  }, 1000);

  document.getElementById("pause-button").classList.remove("d-none")
  document.getElementById("resume-button").classList.add("d-none")
  document.getElementById("start-button").classList.add("d-none")
})
document.getElementById("reset-button").addEventListener("click", () => {
  reset();
  stopp = stopTime()
  totalTime = dateFns.distanceInWords(start, stopp, {addSuffix: true})

  const completedSessionList = document.querySelector('#sessions-list')
  const html = `<li class="list-group-item d-flex justify-content-between align-items-center">${taskName} was completed ${totalTime}</li>`;

  completedSessionList.innerHTML += html;

  document.getElementById("done").innerHTML = "";
  document.getElementById("done").classList.remove("show_message");

  document.getElementById("start-button").classList.remove("d-none")
  document.getElementById("pause-button").classList.add("d-none")
  document.getElementById("resume-button").classList.add("d-none")

});

이것이 제 프로젝트의 마무리입니다!
이 튜토리얼이 끝났습니다. 이 시점에서 소리 알림 및 알림과 같은 유용한 기능이 있는 작동하는 Pomodoro 타이머 응용 프로그램이 있어야 합니다. 질문이나 제안 사항이 있으면 아래에 의견을 남겨주십시오.

읽어 주셔서 감사합니다. 즐거운 코딩하세요!

Reference

이 문제에 관하여(나만의 뽀모도로 타이머 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/abdurrehmaan/build-your-own-promodoro-timer-34ll

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

DOM 정보

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다