কাউন্টডাউন টাইমার ইন্টারনেটে সব জায়গায় ব্যবহৃত হয় বড় ইভেন্টের জন্য। নयी ওয়েবসাইট লঞ্চ, প্রোডাক্ট আনার্সমেন্ট — যেকোনো ইভেন্টের জন্য কাউন্টডাউন তৈরি করা যায়।
এই গাইডে HTML, CSS এবং জাভাস্ক্রিপ্ট ব্যবহার করে কাউন্টডাউন টাইমার বানানো শিখব।
ওয়েবপেজ সেটআপ
কোনো এক্সটার্নাল লাইব্রেরি ব্যবহার না করে সাদা 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>
এখন স্টাইল বা লজিক নেই, তাই কিছু দেখাবে না। জাভাস্ক্রিপ্ট লিখি।
টাইমার তৈরি
জাভাস্ক্রিপ্টে Date অবজেক্ট আছে ডেট ও টাইমের জন্য। এটি দুটি কাজে লাগবে: টার্গেট টাইমের টাইমস্ট্যাম্প এবং বর্তমান ডেট।
<script> ট্যাগের ভিতরে লিখব। টার্গেট ডেট থেকে বর্তমান ডেট বিয়োগ করলে মিলিসেকেন্ডে পার্থক্য পাওয়া যায়:
var timeLeft = +new Date("2021-05-04") - +new Date();
এটি পরবর্তী স্টার ওয়ার্স ডে (৪ মে, ২০২১) পর্যন্ত সময় বের করবে। কিন্তু এটি মিলিসেকেন্ডে আছে, মানব পড়া সহজ নয়। দিন, ঘন্টা, মিনিটে কনভার্ট করুন:
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;
সব কোড ফাংশনে রাখুন:
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);
countdown() ফাংশনের পর এই লাইনটি যোগ করুন। ৬০,০০০ মিলিসেকেন্ড = ৬০ সেকেন্ড = ১ মিনিট।
স্টাইল যোগ করা
টাইমার কাজ করছে কিন্তু সুন্দর নয়। কিছু CSS যোগ করুন:
<style> body { padding-top: 20%; height: 100vh; background: linear-gradient(to bottom right, #CAA89C, #434EFC); } h1, p { text-align: center; color: white; } </style>
এখন পেজে গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড, সেন্টার আলাইন টেক্সট, সাদা রঙের লিখ — সব সুন্দর দেখাবে।
উপসংহার
কাউন্টডাউন টাইমার অনেক সাইটের গুরুত্বপূর্ণ ফিচার। পারসোনাল ব্লগে বিয়ের কাউন্টডাউন, কোম্পানি সাইটে প্রোডাক্ট লঞ্চ কাউন্টডাউন — সব জায়গায় পাওয়া যায়।
এখন আপনি একজন এক্সপার্টের মতো নিজের জাভাস্ক্রিপ্ট কাউন্টডাউন টাইমার বানাতে পারবেন!
