یک 🍅 Pomodoro Timer با HTML، CSS، و جاوا اسکریپت Vanilla ایجاد کنید

تکنیک پومودورو ابزاری پرکاربرد برای افزایش بهره وری است. این کار را با تقسیم فواصل کاری به 25 دقیقه کار متمرکز و سپس استراحت های کوتاه انجام می دهد. در این آموزش، یک ابزار Pomodoro ایجاد می کنیم که به کاربران اجازه می دهد تایمر فاصله کاری را تنظیم کنند. پس از پایان جلسه کاری، کاربر می تواند یک استراحت 5 یا 10 دقیقه ای را انتخاب کند.

شروع شدن

بیایید با ایجاد ساختار HTML برای تایمر Pomodoro شروع کنیم. تایمر دارای سه دکمه HTML است که عبارتند از:

• دکمه تایمر پومودورو
• دکمه استراحت کوتاه
• دکمه شکست طولانی

همچنین یک نمایشگر برای مدت زمان هر تایمر و دکمه های کنترلی برای شروع و توقف تایمر خواهیم داشت.

HTML و CSS برای تایمر

ساختار و استایل تایمر نسبتاً ساده است:

• رنگ بندی و چیدمان مناسب
• عناصر ظرف با کلاس ها
• شناسه هایی برای هدف قرار دادن عناصر به درستی

وقتی به طراحی تایمر جاوا اسکریپت می پردازیم، همه آنها را توضیح خواهم داد. اینجاست که یادگیری واقعی در این آموزش اتفاق می افتد!

عملکرد جاوا اسکریپت

همانطور که اشاره کردم، مهمترین جنبه این تایمر قابلیت جاوا اسکریپت است. با گرفتن شناسه تمام عناصر دکمه تایمر و اختصاص دادن آنها به متغیرها شروع کنید.

1

let pomodoro = document.getElementById("pomodoro-timer");

2

let short = document.getElementById("short-timer");

3

let long = document.getElementById("long-timer");

به طور پیش فرض، وقتی کاربر برنامه تایمر جاوا اسکریپت Pomodoro ما را باز می کند، می خواهیم نمایشگر تایمر 25 دقیقه ای را به او نشان دهیم.

بیایید یک تابع به نام ایجاد کنیم showDefaultTimer() که فقط صفحه نمایش تایمر Pomodoro را نشان می دهد و سایر موارد را پنهان می کند.

1

function showDefaultTimer() {

2

    pomodoro.style.display = "block";

3

    short.style.display = "none";

4

    long.style.display = "none";

5

   }

6

7

 showDefaultTimer()

در اینجا، ما از ویژگی CSS display برای تغییر دید نمایشگرهای تایمر استفاده می کنیم. عناصر نمایش کوتاه و بلند پنهان خواهند شد، در حالی که نمایشگر Pomodoro قابل مشاهده خواهد بود.

در نهایت، ما به showDefaultTimer() تابع برای اطمینان از اینکه عملکرد هنگام بارگیری HTML روی عناصر اعمال می شود.

شنوندگان رویداد

در مرحله بعد، شنوندگان رویداد را برای گوش دادن به رویدادهای کلیک در هر دکمه تایمر ایجاد خواهیم کرد. با اعلام یک متغیر شروع کنید currentTimer و مقدار آن را null قرار دهید. همانطور که از نامش پیداست، currentTimer تایمر فعلی را مشخص می کند.

1

 let currentTimer =null;

در مرحله بعد، شنوندگان رویداد ایجاد کنید که وقتی کاربر روی دکمه های تایمر جاوا اسکریپت پومودورو کلیک می کند، فعال می شوند.

1

document.getElementById("pomodoro-session").addEventListener("click", function(){

2

    hideAll();

3

    pomodoro.style.display = "block"

4

    currentTimer = pomodoro   

5

6

});

7

8

document.getElementById("short-break").addEventListener("click", function(){

9

    hideAll();

10

    short.style.display = "block"

11

    currentTimer =short

12

13

14

});

15

document.getElementById("long-break").addEventListener("click", function(){

16

    hideAll();

17

18

    long.style.display = "block"

19

    currentTimer =long

20

21

});

وقتی کاربر روی دکمه های تایمر کلیک کند، شنوندگان رویداد اخراج می شوند. به عنوان مثال، هنگامی که کاربر روی دکمه استراحت کوتاه کلیک می کند، صفحه نمایش 5:00 را می بیند و بقیه نمایشگرها پنهان می شوند. همچنین مقدار آن را تعیین می کند currentTimer به تایمر استراحت کوتاه

تایمرها را مخفی کنید

را hideAll() عملکرد تمام تایمرها را پنهان می کند. از آنجایی که همه تایمرها با یک نام کلاس نمایش داده می شوند، ما از آن استفاده می کنیم document.querySelectorAll(".timer-display") برای انتخاب و تکرار از طریق هر عنصر و تنظیم style.property برای هیچ کدام، باعث می شود عناصر نامرئی شوند.

1

function hideAll(){

2

    let timers = document.querySelectorAll(".timer-display");

3

    timers.forEach(timer=> timer.style.display ="none")  

4

};

عملکرد تایمر را شروع کنید

جاوا اسکریپت فراهم می کند setInterval() تابعی که به ما این امکان را می دهد تا یک تابع را بعد از مدت زمان مشخصی فراخوانی کنیم. را setInterval() تابع یک تابع را بعد از یک دوره معین تکرار می کند. نحو در تایمر جاوا اسکریپت به این صورت است:

1

setInterval(code, delay)

به عنوان مثال، در مورد ما، می خواهیم یک تایمر را 1 ثانیه کاهش دهیم. بیایید a ایجاد کنیم startTimer() تابعی که مدت زمان currentTimer()، شمارش معکوس را شروع کنید و نمایشگر را با زمان باقیمانده به روز کنید.

1

let myInterval = null;

2

3

function startTimer(timerdisplay){

4

5

    timerDuration = timerdisplay.getAttribute("data-duration").split(":")(0)

6

    let durationinMiliseconds = timerDuration*60*1000;

7

    let endTimestamp = Date.now() + durationinMiliseconds;

8

9

}

بیایید آنچه را که در اینجا اتفاق می افتد تجزیه کنیم:

• let myInterval = null; یک متغیر را اعلام می کند و آن را به مقدار تهی مقداردهی اولیه می کند.
• در داخل startTimer()function:timerDuration = timerdisplay.getAttribute("data-duration").split(":")(0);- بازیابی مدت زمان currentTimer; به عنوان مثال، اگر مدت زمان عنصر 25:00 باشد، مقدار استخراج شده 25 خواهد بود.
• let durationinMiliseconds = timerDuration*60*1000; - مدت زمان تایمر را به میلی ثانیه تبدیل می کند
• let endTimestamp = Date.now() + durationinMiliseconds; - یک متغیر را اعلام می کند endTimestamp، که برابر است با مهر زمانی که تایمر به پایان می رسد.

تایمر را ایجاد کنید

در مرحله بعد، نحوه ساخت تایمر در جاوا اسکریپت را با استفاده از setInterval() روش. ما setInterval() متد شامل تابعی خواهد بود که از زمان باقی مانده استفاده می کند و هر 1 ثانیه (1000 میلی ثانیه) اجرا می شود تا زمانی که زمان باقی مانده تمام شود.

ما همچنین نمایشگر خود را با زمان باقی مانده در هر ثانیه به روز می کنیم. وقتی تایمر به 0 رسید، ساعت 00:00 را نمایش می دهیم و صدای زنگ را پخش می کنیم.

را به روز کنید startTimer () عملکرد مانند این:

1

function startTimer(timerdisplay) {

2

    if (myInterval) {

3

        clearInterval(myInterval);

4

    }

5

6

    timerDuration = timerdisplay.getAttribute("data-duration").split(":")(0);

7

    console.log(timerDuration);

8

9

    let durationinmiliseconds = timerDuration * 60 * 1000;

10

    let endTimestamp = Date.now() + durationinmiliseconds;

11

12

13

    myInterval = setInterval(function() {

14

        const timeRemaining = new Date(endTimestamp - Date.now());

15

16

17

18

        if (timeRemaining <= 0) {

19

20

  clearInterval(myInterval);

21

  timerdisplay.textContent = "00:00";

22

  const alarm = new Audio("https://www.freespecialeffects.co.uk/soundfx/scifi/electronic.wav");

23

  alarm.play();

24

        } else {

25

  const minutes = Math.floor(timeRemaining / 60000);

26

  const seconds = ((timeRemaining % 60000) / 1000).toFixed(0);

27

  const formattedTime = `${minutes}:${seconds.toString().padStart(2, \'0\')}`;

28

  console.log(formattedTime);

29

  timerdisplay.textContent = formattedTime;

30

        }

31

    }, 1000);

32

}

درون myInterval() تابع، یک متغیر را اعلام می کنیم timeRemaining که برابر با زمان باقی مانده پس از شروع تایمر است. سپس، بررسی می کنیم که آیا timeRemaining کمتر یا مساوی 0 است.

اگر معتبر باشد، تایمر را با clearInterval() تابع، که شناسه بازه را به عنوان آرگومان می گیرد و تایمر در حال اجرا را پاک می کند. همچنین زمان نمایش داده شده را به 00:00 به روز می کنیم و زنگ صوتی را پخش می کنیم تا به کاربر اطلاع دهیم که تایمر به 0 رسیده است.

اگر timeRemaining بزرگتر از 0 باشد، موارد زیر را انجام می دهیم.

• const minutes = Math.floor(timeRemaining / 60000);: زمان باقی مانده را به دقیقه تبدیل می کند
• const minutes = ((timeRemaining%60000) /1000).toFixed(0);: تبدیل می کند timeRemaining به ثانیه
• const formattedTime = `${minutes}:${seconds.toString().padStart(2, \'0\')}`;: زمان باقی مانده را در قالب "MM: SS" قالب بندی می کند
• timerdisplay.textContent=formattedTime;: محتوای متنی نمایشگر تایمر را با زمان فرمت شده به روز می کند.

وقتی که startTimer() نامیده می شود، زمان نمایش داده شده را هر ثانیه به روز می کند تا شمارش معکوس تایمر ما ایجاد شود.

دکمه شروع

برای اینکه تایمر شمارش معکوس را نمایش دهد، باید در شنونده رویداد کلیک شروع اجرا شود. یک کلیک شنونده به دکمه شروع اضافه کنید و آن را اجرا کنید startTimer() تابع.

1

document.getElementById("start").addEventListener("click", function () {

2

    if(currentTimer){

3

        startTimer(currentTimer);

4

    }

5

});

1

function startTimer(timerdisplay){

2

  if (myInterval) {

3

         clearInterval(myInterval); 

4

        }

5

         // the rest of the code here

6

7

    }

1

document.getElementById("pause").addEventListener("click", function () {

2

    if(currentTimer){

3

        clearInterval(myInterval); 

4

        }

5

});