を使用してビルドPomodoroタイマー

このチュートリアルでは、ポモドーロタイマをコーディングしています.⏲
私は、このホリデーシーズンのために速くエイミーDuttonとジェームズQによって作成されたCSSとJS挑戦の出現に遭遇しました.今年は楽しいチャレンジになると決めました!
だからここで私の学習と課題1日チャレンジ中に直面している.😥

何がポモドーロタイマですか?

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

簡単な言葉では、ポモドーロタイマは、私たちが集中し、生産的に役立つシンプルなアプリです.これは代替作業をスケジュールし、セッションを中断します.

チャレンジスペック
利用できるユーザ:

スタート\/リンク\/ボタンをクリックしてタイマーを起動します.

ユーザーが起動をクリックすると、単語の開始を停止するように変更されます.次に、ユーザーは、タイマーを停止するには、';停止';ボタンをクリックすることができます.

歯車のアイコンをクリックして、タイマーの長さ(分、秒)を変更します.

タイマーが終了すると、リングは赤から緑に変更する必要があります.

任意のフレームワーク、ライブラリ、ツールを使用することができます良い古いCSSとバニラJSに滞在することができます.

私は昔の友人、プレーンなCSSとバニラJSに滞在することに決めました🤞🏻
だから、いくつかのコードのための時間です!

アプローチ:HTML
我々は、タイマーとスタート/ストップと設定のボタン(時間を調整するために)を表示する簡単なHTML構造を作成することから始めます

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

エーcontainer タイマーのすべてが含まれます.
インサイドcontainer , 私たちは2つdiv 's.
一つouterRing 進捗バーの表示
第二に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>

The time カウントダウンを表示minutes and 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 and 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
我々は、進捗バーを使用してアニメーション化されますconic-gradient() JavaScriptの色.
以下は完全な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 and Seconds 要素.また、aを宣言するtoggleSettings 変数のクリックを追跡するSettings ボタン.

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

let toggleSettings = false;

ハンドルclick イベントオンザSettings ボタン.また、ハンドルonblur イベントMinutes and 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 and seconds .

スタート/ストップボタン

宣言するminutes and seconds ASlet タイマーを表示するためにこれらを操作します.

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

我々がクリックするときSTART ボタンをクリックしますminutes and seconds 0と等しくない.その後、テキストがSTOP を呼び出し、startStopProgress 関数.
The startStopProgress 関数は、タイマーの進行状況をチェックし、進捗バーとタイマー表示を更新します.
If the 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.

使用conic-gradient() そして、計算されたdeg/秒、DOMを更新します.

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

完全なJavaScriptコードは、ここにあります.

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とJavaScriptを使用してポモドーロタイマーを作成している.
我々は、'一時停止'ボタンなどのようなより多くの機能を追加するには、この拡張することができます.
何か問題があれば、下記の完全codepenを参照してください.
Codepen Link
このような記事をご覧くださいThe Introvert Coder そして、私の後を追ってください.
読書のおかげで、ハッピーコーディング!