HTML, CSS 및 Javascript를 사용하여 Pomodoro 타이머 구축

이 자습서에서는 Pomodoro 타이머를 작성합니다.⏲
에이미 더튼(Amy Dutton)과 제임스 퀴크(James Q Quick)가 이번 방학을 위해 만든 CSS와 JS의 도전을 만났다.나는 올해 참가하는 것이 재미있는 작은 도전이 될 것이라고 결정했다.
다음은 제가 첫날 도전에서 배운 것과 직면한 도전입니다.😥

포모도로 타이머는 무엇입니까?

The Pomodoro Technique is a time management method developed by Francesco Cirillo in the late 1980s. It uses a timer to break work into intervals, traditionally 25 minutes in length, separated by short breaks. Each interval is known as a Pomodoro, from the Italian word for tomato, after the tomato-shaped kitchen timer Cirillo used as a university student. -- Wikipedia

쉽게 말하면 Pomodoro 타이머는 간단한 응용 프로그램으로 우리가 정력을 집중하고 효율을 높일 수 있도록 도와준다.그것은 교체된 일과 휴식 시간을 안배한다.

당면 과제 사양

사용자는 다음을 수행할 수 있어야 합니다.

시작 링크/버튼을 클릭하여 타이머를 시작합니다.

사용자가 시작을 누르면 단어 start는 STOP이 됩니다.그리고 사용자는 '정지' 단추를 누르면 타이머를 정지시킬 수 있다.

타이머의 길이(분과 초)를 변경하려면 비트 아이콘을 클릭합니다.

타이머가 완성되면 반지는 빨간색에서 녹색으로 바뀌어야 한다.

모든 프레임워크, 라이브러리, 도구를 사용할 수 있고 좋은 낡은 CSS와 일반 JS를 사용할 수 있다.

나는 나의 오랜 친구와 함께 있기로 결정했다. 일반적인 CSS와 바닐라 JS🤞🏻
그래서 코드를 작성할 때가 됐어요!

메서드:HTML

먼저 타이머, 시작/중지 및 설정 버튼(시간 조정)을 표시하는 간단한 HTML 구조를 만듭니다.

<div class="container">
    <div class="outerRing">
        <div class="timer">
            <!-- Timer elements -->
        </div>
    </div>
</div>

Acontainer에는 타이머의 모든 내용이 포함되어 있습니다.container 중에서 우리는 두 개div가 있다.
진행률 표시줄 outerRing 을 표시하는 데 사용합니다.
2단계timer에는 카운트다운, 시작/정지 및 설정 버튼이 표시됩니다.

<div id="time">
    <span id="minutes">00</span>
    <span id="colon">:</span>
    <span id="seconds">10</span>
</div>
<div id="stsp">START</div>
<span id="setting"><i class="fas fa-cog"></i></span>

timediv는 카운트다운을 표시하고 minutes과seconds<span>를 띠고 있다.
다음은 전체 HTML 코드입니다.

<div class="container">
    <div class="outerRing">
        <div class="timer">
            <div id="time">
                <span id="minutes">00</span>
                <span id="colon">:</span>
                <span id="seconds">10</span>
            </div>
            <div id="stsp">START</div>
            <span id="setting"><i class="fas fa-cog"></i></span>
        </div>
    </div>
</div>

방법: CSS 추가

우선: root 변수를 설정합니다.그리고 container를 사용하여 display: grid 레이아웃을 페이지 중심에 추가합니다.
외곽선과 타이머를 15px와 outerRing 용기 사이timer의 차이값으로 회전하도록 설정합니다.

.outerRing {
    display: grid;
    place-items: center;
    width: 415px;
    height: 415px;
    border-radius: 50%;
    box-shadow: -5px 14px 44px #000000, 
      5px -16px 50px rgba(255, 255, 255, 0.15);
    background: var(--normal-ring);
}

/* Width and Height difference btwn .outerRing & .timer is 15px, 
where our progress bar will be displayed */

.timer {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: var(--timer-bg);
    box-shadow: inset 0px 0px 114px rgba(0, 0, 0, 0.45);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 8rem;
}

outerRing는 우리가 conic-gradient() 기능을 사용하여 진도표를 표시할 곳이다.
원추 사다리의 애니메이션 사용 방법👇🏻👇🏻
Codepen Link
Javascript의 conic-gradient() 색상을 사용하여 진행률 막대에 애니메이션을 설정합니다.
다음은 전체 CSS 코드입니다.

@import url("https://fonts.googleapis.com/css2?
family=Bebas+Neue&family=Montserrat:wght@700&display=swap");

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg: #2b2a30;
    --normal-ring: #17171a;
    --red-ring: #9d0000;
    --green-ring: #00aa51;
    --timer-bg: radial-gradient(
        71.4% 71.4% at 51.7% 28.6%,
        #3a393f 0%,
        #17171a 100%
    );
    --font-timer: "Bebas Neue", cursive;
    --font-stsp: "Montserrat", sans-serif;
    --font-clr: #ffffff;
}

body {
    background: var(--bg);
    min-height: 100vh;
    overflow: hidden;
}

.container {
    height: 600px;
    width: 600px;
    background-color: transparent;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
}

.outerRing {
    display: grid;
    place-items: center;
    width: 415px;
    height: 415px;
    border-radius: 50%;
    box-shadow: -5px 14px 44px #000000, 
        5px -16px 50px rgba(255, 255, 255, 0.15);
    background: var(--normal-ring);
}

.timer {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: var(--timer-bg);
    box-shadow: inset 0px 0px 114px rgba(0, 0, 0, 0.45);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 8rem;
}

#time {
    width: 300px;
    text-align: center;
    margin: 3rem 0 0 0;
}

#time span {
    display: inline;
    color: var(--font-clr);
    font-family: var(--font-timer);
    font-size: 7rem;
    letter-spacing: 0.1em;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

#stsp {
    color: var(--font-clr);
    cursor: pointer;
    font-family: Montserrat;
    font-weight: bold;
    font-size: 1rem;
    line-height: 1.25rem;
    text-align: center;
    letter-spacing: 0.6em;
    margin: 1rem 0;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

#setting {
    cursor: pointer;
    margin-top: 1rem;
    width: 25px;
    height: 25px;
    color: #585858;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
}

메서드:Javascript 추가

먼저 타이머 표시, 시작/정지 버튼 및 설정 버튼과 같은 타이머 구성 요소를 완성합니다.

설정 버튼

Setting, Minutes 및 Seconds 요소를 가져옵니다.또한 toggleSettings 변수로 Settings 단추의 클릭을 추적한다고 밝혔다.

const minElem = document.querySelector("#minutes"),
    secElem = document.querySelector("#seconds"),
    setting = document.querySelector("#setting");

let toggleSettings = false;

click 버튼의 Settings 이벤트를 처리합니다.또한 onblur와 Minutes 요소의 Seconds 사건을 처리한다.

setting.onclick = function () {
    if (!toggleSettings) {
        toggleSettings = true;
        minElem.contentEditable = true;
        minElem.style.borderBottom = `1px dashed #ffffff50`;
        secElem.contentEditable = true;
        secElem.style.borderBottom = `1px dashed #ffffff50`;
    } else {
        resetValues();
    }
};

minElem.onblur = function () {
    resetValues();
};

secElem.onblur = function () {
    resetValues();
};

함수resetValues는 minutes와 seconds로 재분배된 값으로 처리되었다.

시작/정지 버튼

minutes와 seconds를 let 변수로 성명합니다. 왜냐하면 우리는 타이머에 이 변수를 조작하는 것을 표시하기 때문입니다.

const startStop = document.querySelector("#stsp");
let minutes = document.querySelector("#minutes").innerHTML,
    seconds = document.querySelector("#seconds").innerHTML;

우리가 START 단추를 눌렀을 때, 먼저 minutes와 seconds가 0이 아닌지 검사합니다.그리고 텍스트는 STOP로 변경되고 startStopProgress 함수를 호출합니다.startStopProgress 기능은 타이머의 진행률을 검사하고 진행률 표시줄과 타이머 표시를 업데이트합니다.STOP 단추를 누르면 같은 기능으로 진도를 지우고 텍스트를 다시 START로 변경합니다.

startStop.onclick = function () {
    if (startStop.innerHTML === "START") {
        if (!(parseInt(minutes) === 0 && parseInt(seconds) === 0)) {
            startStop.innerHTML = "STOP";
            startStopProgress();
        } else {
            alert("Enter the Time Value in your Timer!");
        }
    } else {
        startStop.innerHTML = "START";
        startStopProgress();
    }
};

진행률 표시줄

우리는 setInterval() 을 사용하여 진도를 추적하는 데 도움을 주는 코드를 실행할 것이다.

function startStopProgress() {
    if (!progress) {
        progress = setInterval(progressTrack, speed);
    } else {
        clearInterval(progress);
        progress = null;
        progressStart = 0;
        progressBar.style.background = `conic-gradient(
                #17171a 360deg,
                #17171a 360deg
          )`;
    }
}

타이머를 업데이트하는 데 남은 분과 남은 초를 계산합니다.
또한 타이머의 총 시간에 따라 타이머의 도수/초를 계산한다.

Degree/Second = 360 / Total time of the timer in minutes.

DOM은 conic-gradient() 및 계산된 deg/sec를 사용하여 업데이트됩니다.

function progressTrack() {
    progressStart++;

    secRem = Math.floor((progressEnd - progressStart) % 60);
    minRem = Math.floor((progressEnd - progressStart) / 60);

    secElem.innerHTML = secRem.toString().length == 2 ? secRem : `0${secRem}`;
    minElem.innerHTML = minRem.toString().length == 2 ? minRem : `0${minRem}`;

    progressBar.style.background = `conic-gradient(
        #9d0000 ${progressStart * degTravel}deg,
        #17171a ${progressStart * degTravel}deg
        )`;
    if (progressStart == progressEnd) {
        progressBar.style.background = `conic-gradient(
                #00aa51 360deg,
                #00aa51 360deg
          )`;
        clearInterval(progress);
        startStop.innerHTML = "START";
        progress = null;
        progressStart = 0;
    }
}

다음은 완전한 자바스크립트 코드입니다.

const progressBar = document.querySelector(".outerRing"),
    minElem = document.querySelector("#minutes"),
    secElem = document.querySelector("#seconds"),
    startStop = document.querySelector("#stsp"),
    setting = document.querySelector("#setting");

let minutes = document.querySelector("#minutes").innerHTML,
    seconds = document.querySelector("#seconds").innerHTML,
    progress = null,
    progressStart = 0,
    progressEnd = parseInt(minutes) * 60 + parseInt(seconds),
    speed = 1000,
    degTravel = 360 / progressEnd,
    toggleSettings = false,
    secRem = 0,
    minRem = 0;

function progressTrack() {
    progressStart++;

    secRem = Math.floor((progressEnd - progressStart) % 60);
    minRem = Math.floor((progressEnd - progressStart) / 60);

    secElem.innerHTML = secRem.toString().length == 2 ? secRem : `0${secRem}`;
    minElem.innerHTML = minRem.toString().length == 2 ? minRem : `0${minRem}`;

    progressBar.style.background = `conic-gradient(
        #9d0000 ${progressStart * degTravel}deg,
        #17171a ${progressStart * degTravel}deg
        )`;
    if (progressStart == progressEnd) {
        progressBar.style.background = `conic-gradient(
                #00aa51 360deg,
                #00aa51 360deg
          )`;
        clearInterval(progress);
        startStop.innerHTML = "START";
        progress = null;
        progressStart = 0;
    }
}

function startStopProgress() {
    if (!progress) {
        progress = setInterval(progressTrack, speed);
    } else {
        clearInterval(progress);
        progress = null;
        progressStart = 0;
        progressBar.style.background = `conic-gradient(
                #17171a 360deg,
                #17171a 360deg
          )`;
    }
}

function resetValues() {
    if (progress) {
        clearInterval(progress);
    }
    minutes = document.querySelector("#minutes").innerHTML;
    seconds = document.querySelector("#seconds").innerHTML;
    toggleSettings = false;
    minElem.contentEditable = false;
    minElem.style.borderBottom = `none`;
    secElem.contentEditable = false;
    secElem.style.borderBottom = `none`;
    progress = null;
    progressStart = 0;
    progressEnd = parseInt(minutes) * 60 + parseInt(seconds);
    degTravel = 360 / progressEnd;
    progressBar.style.background = `conic-gradient(
                #17171a 360deg,
                #17171a 360deg
          )`;
}

startStop.onclick = function () {
    if (startStop.innerHTML === "START") {
        if (!(parseInt(minutes) === 0 && parseInt(seconds) === 0)) {
            startStop.innerHTML = "STOP";
            startStopProgress();
        } else {
            alert("Enter the Time Value in your Timer!");
        }
    } else {
        startStop.innerHTML = "START";
        startStopProgress();
    }
};

setting.onclick = function () {
    if (!toggleSettings) {
        toggleSettings = true;
        minElem.contentEditable = true;
        minElem.style.borderBottom = `1px dashed #ffffff50`;
        secElem.contentEditable = true;
        secElem.style.borderBottom = `1px dashed #ffffff50`;
    } else {
        resetValues();
    }
};

minElem.onblur = function () {
    resetValues();
};

secElem.onblur = function () {
    resetValues();
};

와, 바로 이거야!🤩🤩

결론!

HTML, CSS, 자바스크립트를 사용하여 Pomodoro 타이머를 성공적으로 만들었습니다.
이 기능을 확장하고 일시 중지 버튼과 같은 다양한 기능을 추가할 수 있습니다.
질문이 있으면 아래의 전체 코드 펜을 참조하십시오.
Codepen Link
더 많은 유사한 글은 The Introvert Coder를 방문하여 저를 주목해 주십시오.
당신의 읽기와 즐거운 인코딩에 감사 드립니다!