How to Create Pomodoro Timer with HTML, CSS & JavaScript কিভাবে Pomodoro টাইমার HTML, CSS এবং JavaScript এর মাধ্যমে ডিজাইন করা যায় । তাই আজকের এই
Hello Coders! আশা করি ভালো আছেন। notesaid24 ওয়েবসাইটে আপনাকে স্বাগতম। আজকে আপনাদের মাঝে শেয়ার করবো; কিভাবে Pomodoro টাইমার HTML, CSS এবং JavaScript এর মাধ্যমে ডিজাইন করা যায় । তাই আজকের এই প্রজেক্টে আশা করি আপনারা অবশ্যই উপকৃত হবেন, তাহলে শুরু করা যাক।
প্রজেক্ট
ধারণাঃ
- নামঃ Create Pomodoro Timer with HTML, CSS & JavaScript
- ভাষাঃ HTML, CSS & JavaScript
- লাইসেন্সঃ ফ্রি
- রেস্পনসিভঃ না
- অথরঃ Notesaid24
প্রজেক্ট করতে যা জানা প্রয়োজনঃ
- বেসিক HTML
- বেসিক CSS
- JavaScript সম্পর্কে পরিপূর্ণ ধারনা
- Margin & Padding ( মার্জিন & প্যাডিং )
- Position ( পজিশন )
- Absolute
- Relative
- Display Flex
আশা করি
এসব জানা থাকলে এই প্রোজেক্ট করতে কোন সমস্যা নেই, তবে না জানা থাকলেও সমস্যা নেই প্রোজেক্ট
করার সাথে সাথে ধারনা হয়ে যাবে। চলুন শুরু করা যাক……………
Pomodoro Timer
তৈরি করার জন্য,
প্রথমে আপনাকে তিনটি ফাইল তৈরি করতে হবে। একটি হলো index.html আর দ্বিতীয়টি হলো style.css এবং তৃতীয়টি
হলো main.js ( নামের ব্যপারে কোন বাধ্যবাধকতা নেই তবে ডট নোটেশনের পর
.html, .css এবং .js এগুলো ঠিক রাখতে হবে)
। নিন্মে index.html, style.css এবং main.js ফাইল দেওয়া হয়েছে। অথবা সোর্স কোড ডাইনলোড করে ব্যবহার করতে পারেন।
প্রথমত, আপনি একটা HTML ফাইল (index.html) তৈরি করে নিন,
নিচের ব্লকে দেওয়া কোডটি Copy করে আপনার এইচটিএমএল (HTML) ফাইলে Paste করে নিন। মনে রাখবেন (.html) এক্সটেনশন যেন ঠিক থাকে।
HTML কোড ব্লকঃ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pomodoro Timer By Notesaid24</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="innerContainer">
<div id="container">
<h1>Pomodoro Timer</h1>
<div id="timer">
<div id="time">
<span id="minutes">25</span>
<span id="colon">:</span>
<span id="seconds">00</span>
</div>
</div>
<div id="buttons">
<button id="work">Work</button>
<button id="shortBreak">Short Break</button>
<button id="longBreak">Long Break</button>
<button id="reset">Reset</button>
</div>
<p id="footerCredit">All rights reserved <span>notesaid24.com</span></p>
</div>
</div>
<script src="./js/main.js"></script>
</body>
</html>
দ্বিতীয়ত, আপনি একটা CSS ফাইল (style.css) তৈরি করে নিন,
নিচের ব্লকে দেওয়া কোডটি Copy করে আপনার সিএসএস
(CSS) ফাইলে Paste করে নিন। মনে রাখবেন
(.css) এক্সটেনশন যেন ঠিক থাকে।
CSS কোড ব্লকঃ
#innerContainer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100vh;
padding: 10px;
}
#container {
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.35);
padding: 30px;
border-radius: 20px;
}
#container h1 {
font-size: 28px;
color: #363636;
user-select: none;
margin-top: 0;
}
#timer {
background-color: #ff6347;
width: 200px;
height: 200px;
margin: 0 auto;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
}
#time {
font-size: 35px;
z-index: 1;
position: relative;
font-weight: 700;
color: #fff;
}
#buttons button {
background-color: #ff6347;
border: none;
color: #fff;
cursor: pointer;
padding: 5px;
width: 100px;
margin-top: 20px;
font-size: 15px;
height: 50px;
border-radius: 10px;
}
#buttons button#shortBreak {
background-color: #363636;
}
#buttons button#longBreak {
background-color: #0084ff;
}
#buttons button#reset {
background-color: #b60000;
}
#footerCredit {
font-size: 18px;
margin-top: 30px;
margin-bottom: -5px;
color: #363636;
}
#footerCredit span {
color: #ff6347;
}
তৃতীয়ত, আপনি একটা JS ফাইল (main.js) তৈরি করে নিন, নিচের ব্লকে দেওয়া কোডটি Copy করে আপনার জেএস (Js) ফাইলে Paste করে নিন। মনে রাখবেন (.js) এক্সটেনশন যেন ঠিক থাকে।
Js কোড ব্লকঃ
const pomodoro = {
started: false,
minutes: 0,
seconds: 0,
interval: null,
minutesDom: null,
secondsDom: null,
init: function () {
const self = this;
this.minutesDom = document.querySelector("#minutes");
this.secondsDom = document.querySelector("#seconds");
this.interval = setInterval(function () {
self.intervalCallback.apply(self);
}, 1000);
document.querySelector("#work").onclick = function () {
self.startWork.apply(self);
};
document.querySelector("#shortBreak").onclick = function () {
self.startShortBreak.apply(self);
};
document.querySelector("#longBreak").onclick = function () {
self.startLongBreak.apply(self);
};
document.querySelector("#reset").onclick = function () {
self.resetTimer.apply(self);
};
},
resetVariables: function (mins, secs, started) {
this.minutes = mins;
this.seconds = secs;
this.started = started;
},
startWork: function () {
this.resetVariables(25, 0, true);
},
startShortBreak: function () {
this.resetVariables(5, 0, true);
},
startLongBreak: function () {
this.resetVariables(15, 0, true);
},
resetTimer: function () {
this.resetVariables(25, 0, false);
this.updateDom();
},
toDoubleDigit: function (num) {
if (num < 10) {
return "0" + parseInt(num, 10);
}
return num;
},
updateDom: function () {
this.minutesDom.innerHTML = this.toDoubleDigit(this.minutes);
this.secondsDom.innerHTML = this.toDoubleDigit(this.seconds);
},
intervalCallback: function () {
if (!this.started) return false;
if (this.seconds == 0) {
if (this.minutes == 0) {
this.timerComplete();
return;
}
this.seconds = 59;
this.minutes--;
} else {
this.seconds--;
}
this.updateDom();
},
timerComplete: function () {
this.started = false;
},
};
window.onload = function () {
pomodoro.init();
};
আশা করি আপনি কোড টি সফলভাবে রান করাতে পেরেছেন। প্রোজেক্ট টি কেমন লেগেছে
অবশ্যই কমেন্ট করে জানাবেন, আর যদি কোন ভূল
হয়ে থাকে তাহলে ক্ষমা সুন্দর দৃষ্টিতে দেখবেন এবং কোথায় ভূল হয়েছে কমেন্ট করে জানাবেন।
আর আপনাদের কেমন ধরনের প্রোজেক্ট লাগবে তাও জানাবেন , ইনশাআল্লাহ তা দেওয়ার চেষ্টা
করবো। আর ওয়েবসাইটটি বন্ধুদের মাঝে শেয়ার করবেন। আজকের মতই এখানেই বিদায় নিলাম, ইনশাআল্লাহ দেখা হবে অন্য কোন প্রোজেক্ট এ। ভালো থাকবেন সুস্থ
থাকবেন। আল্লাহ হাফেয।
COMMENTS