কাউন্টডাউন টাইমারগুলি ইন্টারনেট জুড়ে এমন লোকেরা ব্যবহার করে যারা একটি বড় ইভেন্টের জন্য গণনা করতে চায়৷
আপনি একটি কাউন্টডাউন টাইমার ব্যবহার করতে পারেন আপনার নতুন ওয়েবসাইট চালু করার জন্য কাউন্ট ডাউন করতে। আপনি যখন একটি পণ্য ঘোষণা করতে যাচ্ছেন তখন একটি কাউন্টডাউন টাইমার চিহ্নিত করতে পারে। আপনি অন্বেষণ করার জন্য অনেক সম্ভাবনা আছে.
এই গাইডে, আমরা আপনাকে দেখাব কিভাবে জাভাস্ক্রিপ্টে তিনটি প্রযুক্তি ব্যবহার করে একটি কাউন্টডাউন টাইমার তৈরি করা যায়:HTML, CSS এবং JavaScript। শুরু করা যাক!
আমাদের ওয়েবপেজ সেট আপ করা হচ্ছে
প্রথম ধাপ হল আমাদের বেসিক ওয়েব পেজ সেট আপ করা। এই নির্দেশিকায়, আমরা কোনো বাহ্যিক লাইব্রেরি ব্যবহার করার বিষয়ে চিন্তা করতে যাচ্ছি না। আমরা এটিকে সহজ রাখব এবং সাধারণ পুরানো HTML, CSS এবং JavaScript ব্যবহার করব।
আমাদের HTML ফাইল তৈরি করে শুরু করা যাক:
<!DOCTYPE html> <html> <script> // We'll store our JavaScript code here </script> <style> // We'll write our CSS styles here </style> <body> <h1>It's almost time…</h1> <div id="timer"></div> </body> </html>
আমাদের কোড এই মুহূর্তে বিশেষ কিছু ফেরত দেয় না, নীচে দেখুন:
এটি এইভাবে প্রদর্শিত হয় কারণ আমরা এখনও আমাদের কোডে কোনো স্টাইল যোগ করিনি বা আমাদের জাভাস্ক্রিপ্ট টাইমার তৈরি করিনি। চলুন জাভাস্ক্রিপ্ট তৈরির দিকে এগিয়ে যাই যা আমাদের টাইমারকে শক্তিশালী করবে।
আমাদের টাইমার তৈরি করা হচ্ছে
জাভাস্ক্রিপ্টে তারিখ নামে একটি সহজ বস্তু রয়েছে যা আমরা তারিখ এবং সময় নিয়ে কাজ করতে ব্যবহার করতে পারি। আমরা এই বস্তুটিকে দুটি উদ্দেশ্যে ব্যবহার করতে যাচ্ছি:আমরা যে সময় গণনা করতে চাই তার একটি টাইমস্ট্যাম্প পেতে এবং বর্তমান তারিখ পেতে।
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।
এই টিউটোরিয়ালে, আমরা আমাদের সমস্ত স্ক্রিপ্ট একটি ট্যাগে লিখব। আমরা কোনো বাহ্যিক স্ক্রিপ্ট ব্যবহার করতে যাচ্ছি না।
আমাদের বর্তমান তারিখ থেকে আমরা যে তারিখটি গণনা করছি তা বিয়োগ করলে আমাদের এই দুটি তারিখের মধ্যে পার্থক্য দেখাবে:
var timeLeft = +new Date("2021-05-04") - +new Date();
এই কোডটি গণনা করবে যে পরবর্তী স্টার ওয়ারস ডে পর্যন্ত কত দিন বাকি আছে, যা 4 মে, 2021।
যদিও আমরা এখন এই দুই দিনের মধ্যে পার্থক্য জানি, কিছু সমস্যা আছে। প্রথমত, আমাদের কাছে এমন কোনো টাইমার নেই যা এখনও গণনা করে। দ্বিতীয়ত, আমাদের তারিখ মানুষের দ্বারা সহজে পাঠযোগ্য বিন্যাসে সংরক্ষণ করা হয় না। এটি মিলিসেকেন্ডে সংরক্ষিত, যা আমাদের জন্য ঠিক সুবিধাজনক নয়। আমাদের সময়কে দিন, ঘন্টা এবং মিনিটে রূপান্তর করতে হবে।
আরও পাঠযোগ্য বিন্যাসে অবশিষ্ট সময় গণনা করতে, আমরা নিম্নলিখিত কোডটি ব্যবহার করতে যাচ্ছি:
var daysLeft = Math.floor(timeLeft / (1000 * 60 * 60 * 24)); var hoursLeft = Math.floor((timeLeft / (1000 * 60 * 60)) % 24); var minutesLeft = Math.floor((timeLeft / 1000) / 60 % 60);
আমরা এই কোডটি ব্যবহার করে মানগুলিকে একটি স্ট্রিংয়ে ফর্ম্যাট করতে পারি:
const timeLeftText = `${daysLeft} days ${hoursLeft} hours ${minutesLeft} minutes.`;
এই কোডে, আমরা স্ট্রিং ইন্টারপোলেশন ব্যবহার করি যে মানগুলি আমরা আগে গণনা করেছি তার পরিবর্তে। এটি আমাদের একটি টাইমস্ট্যাম্প দেবে যেমন:314 দিন 13 ঘন্টা 52 মিনিট৷
এখন যেহেতু আমরা আমাদের টাইমস্ট্যাম্প তৈরি করেছি, আমরা এটিকে আমাদের ওয়েবপেজে রাখতে পারি:
document.getElementById("timer").innerHTML = timeLeftText; আমরা আমাদের সমস্ত কোড একটি ফাংশনে স্থানান্তর করতে পারি:
function countdown() {
var daysLeft = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
var hoursLeft = Math.floor((timeLeft / (1000 * 60 * 60)) % 24);
var minutesLeft = Math.floor((timeLeft / 1000) / 60 % 60);
const timeLeftText = `${daysLeft} days ${hoursLeft} hours ${minutesLeft} minutes.`;
document.getElementById("timer").innerHTML = timeLeftText;
}
countdown();
যখন আমরা আমাদের পৃষ্ঠা লোড করি, তখন নিম্নলিখিতগুলি ফিরে আসে:
এখন আমরা আমাদের টাইমার আছে. আমরা দিনের জন্য সম্পন্ন করেছি, তাই না? না; এত দ্রুত না আপনি যদি এক মিনিট অপেক্ষা করেন, আপনি দেখতে পাবেন আমাদের টাইমার আসলে গণনা করা হয়নি। কারণ আমাদের ব্রাউজারকে প্রতি মিনিটে আপডেট করতে বলতে হবে। আমরা এই কোডটি ব্যবহার করে তা করি:
setInterval(countdown, 60000);
আমাদের কাউন্টডাউন() ফাংশন ঘোষণা করার পরে এই কোডটি যোগ করা উচিত। এটি প্রতি 60,000 মিলিসেকেন্ডে আমাদের পৃষ্ঠাটি রিফ্রেশ করবে। এটি প্রতি 60 সেকেন্ডের সমান।
এখন যখন আমরা আমাদের কোড আপডেট করি তখন আপনি দেখতে পাবেন যে এটি প্রতি মিনিটে পরিবর্তিত হয়!
কিছু শৈলী যোগ করা
আমাদের কাউন্টডাউন টাইমার কার্যকরী হতে পারে, কিন্তু এটি ঠিক নান্দনিকভাবে আনন্দদায়ক নয়। আমাদের পৃষ্ঠাকে আরও আকর্ষণীয় করতে কিছু স্টাইল তৈরি করা যাক:
<style>
body {
padding-top: 20%;
height: 100vh;
background: linear-gradient(to bottom right, #CAA89C, #434EFC);
}
h1, p {
text-align: center;
color: white;
}
</style>
আমাদের ওয়েবপৃষ্ঠা এখন এই মত দেখায়:
আপনি দেখতে পাচ্ছেন, আমাদের পৃষ্ঠার এখন একটি গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড রয়েছে, আমাদের পাঠ্য কেন্দ্রে সারিবদ্ধ করা হয়েছে এবং আমাদের পাঠ্য সাদা রঙে প্রদর্শিত হচ্ছে। এটা দারুন দেখাচ্ছে!
উপসংহার
কাউন্টডাউন টাইমার অনেক সাইটের একটি গুরুত্বপূর্ণ বৈশিষ্ট্য। আপনি ব্যক্তিগত এবং পেশাদার উভয় ওয়েব পৃষ্ঠায় কাউন্টডাউন দেখতে পাবেন। একজন ব্যক্তির ব্লগ তাদের বিবাহের একটি কাউন্টডাউন ফিচার করতে পারে। একটি কোম্পানির ওয়েবসাইট একটি পণ্য লঞ্চ একটি কাউন্টডাউন বৈশিষ্ট্য হতে পারে.
এখন আপনি একজন বিশেষজ্ঞের মতো আপনার নিজস্ব জাভাস্ক্রিপ্ট কাউন্টডাউন টাইমার তৈরি করতে প্রস্তুত!
