ساخت پومودورو با جاوااسکریپت

اگر تازه شروع به یادگیری جاوااسکریپت کردید این پروژه ساده میتونه براتون تمرین خوبی باشه اول اینو بگم هزارتا کد مختلف برای ساخت یه پومودورو وجود داره که تنوع و سادگی و حتی پیچیدگی در بینشون دیده میشه مهم اینکه بشینین فکر کنین و تک تک چیزایی که نیاز دارین رو لیست کنین و حالا برای هرکدوم دنبال راه حل بگردین کپی کردن شاید باعث بشه اون کد رو یاد بگیرین ولی صرفا همون کد یعنی نحوه ی فکر کردن رو یاد نمیگیرین و این میشه که نمیتونید هیچوقت قدم های اول رو بردارید برای همینه که همه به ما توصیه میکنن برای یادگیری برنامه نویسی هرچه سریعتر دست به کد بشین .دراینجا هم من فقط توضیحات کلی میدم و سعی میکنم بهتون سرنخ بدم و به هیچ وجه خط به خط توضیح نمیدم.

برای اینکه این زمان 25 دقیقه ثانیه ثانیه ازش کم بشه اول از همه به تابعی بنام setInterval نیاز داریم:

setInterval(startTimer,1000)

کاری که setInterval برامون انجام میده اینکه هر 1000 میلی ثانیه یکبار startTimer دوباره اجرا میشه.
پس کافیه startTimer یک ثانیه از 25:00 کم کنه هربار و براش شرط بزاریم که وقتی به 0 رسید از clearInterval استفاده کنه ینی دیگه 1000 میلی ثانیه یکبار تابع قبلی اجرا نمیشه و کاملا اجراش قطع میشه.البته من از یه صدای دینگ هم استفاده کردم تاوقتی که زمانتون تموم شد بااین صدا آگاه بشید.

var audio = new Audio('ding.mp3');
audio.play();

در ابتدا ما متغیری رو به صورت زیر تعریف میکنیم :

countdown= 25*60*1000;

حالا در startTimer :

countdown -= 1000;

اینجا هربار 1000 تا معادل یک ثانیه از countdown کم میشه و دوباره مقدارجدید رو توی countdown میریزه.

بعد عدد مورد نظرمو به فرمت ثانیه و دقیقه در میارم و در min و sec میریزم و به این صورت نمایش میدم:

var min = Math.floor(countdown / (60 * 1000));
var sec = Math.floor((countdown - (min * 60 * 1000)) / 1000);
document.getElementById(&quottimer&quot) =min + &quot : &quot + sec;

برای pause احتمالا باتوجه به توضیحات قبلی الان میدونید باید از چی استفاده کنید؟
درسته از clearInterval اینطوری تابع قبلی اجرا نمیشه و عددمون ثابت میمونه.

و اما برای Reset کردن چکار کنیم؟
در ابتدا میخوایم startTimer دیگه اجرا نشه پس از clearInterval استفاده میکنیم ولی نمیخوایم روی اخرین عدد ثابت بمونه بلکه میخوایم به 25:00 برگرده پس دوباره به countdown مقدار میدیم و اونرو در timer چاپ میکنیم .

document.getElementById(&quotreset&quot).= function(){
clearInterval(window.timerId);
countdown=25*60*1000;
document.getElementById(&quottimer&quot)= &quot25:00&quot
};

همچنین تاریخی که در بالای صفحه میبینید رو به راحتی بااستفاده از ()new Date میتونید تولید کنید و با استفاده از switch اعداد ماه رو به اسامی ماه تغییر بدید.

var today= new Date();
var month =today.getMonth()+1;
document.getElementById(&quotyear&quot)= today.getFullYear();

.همچنین اگر میخواید کد کامل پروژه رو ببینید اینجا درگیتهابم هست و اگر دوست داشتید بهم ستاره بدید :) .اگر هم میخواید راجب پومودورو بدونید پیشنهاد میکنم این پست رو بخونید.

اگر این مقاله برای شما مفید بود در انتشار آن کوتاهی نکنید.
شیواتوکل | 20 اردیبهشت 99