লাইব্রেরী ছাড়াই শুধুমাত্র জাভাস্ক্রিপ্ট দিয়ে ডিজিটাল ঘড়ি তৈরী করুন।

আমাদের ওয়েব সাইট কিংবা ওয়েব অ্যাপ্লিকেশনে ডিজিটাল ঘড়ি লাগাতে আমরা অনেকে জেকোয়ারী লাইব্রেরী কিংবা অন্য কোন লাইব্রেরী ব্যবহার করে থাকি। অথচ কোন প্লাগইন কিংবা লাইব্রেরী ছাড়া-ই আপনি নিজেই কিছু লাইন এর পিউর জাভাস্ক্রিপ্ট ব্যবহার করে একটি ডিজিটাল ক্লক তৈরী করে ফেলতে পারেন। আজকে আমরা এই পোষ্টটি দ্বারা কোন প্রকার লাইব্রেরী ছাড়া শুধুমাত্র জাভাস্ক্রিপ্ট ব্যবহার করে একটি ডিজিটাল ক্লক তৈরী করা শিখব। চলুন তাহলে কাজ শুরু করা যাক।

ঘড়ির ডিজাইন তৈরী

ঘডিটি দেখতে কিরকম হবে তা ডিজাইন করতে কিছু এইচটিএমএল (HTML) মার্কআপ তৈরী করে নিই এবং স্ট্যাইল এর জন্য নিন্মোক্ত সিএসএস (CSS) অ্যাপ্লাই করি।

এইচটিএমএল (HTML) মার্কআপ:

<div class="clock">
        <div class="hour">
            <div class="text">HH</div>
            <div class="val"></div>
        </div>
        <div class="min">
            <div class="text">MM</div>
            <div class="val"></div>
        </div>
        <div class="sec">
            <div class="text">SS</div>
            <div class="val"></div>
        </div>
</div>

সিএসএস (CSS):

.clock {
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  font-family: sans-serif;
}
.clock .hour,
.clock .min,
.clock .sec {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.clock .text {
  text-align: center;
}
.clock .val {
  height: 45px;
  margin: 2px;
  background: #222;
  color: #d2d0d0;
  font-size: 21px;
  text-align: center;
  line-height: 45px;
}

এতটুকু আমাদের ডিজাইনের কাজ। এখন শুধুমাত্র কিছু পিউর জাভাস্কিপ্ট এর কোড লিখলেই আমাদের ঘড়িটি চলবে। মজার না? চলুন কোড লিখি-

ঘড়ির জন্য জাভাস্ক্রিপ্ট কোড

window.onload = function () {
    var hEl = document.querySelector('.hour .val');
    var mEl = document.querySelector('.min .val');
    var sEl = document.querySelector('.sec .val');

    setInterval(function () {
        var now = new Date();

        hEl.innerHTML = now.getHours()
        mEl.innerHTML = now.getMinutes()
        sEl.innerHTML = now.getSeconds()

    }, 1000)
}

কোডের ব্যাখ্যা:

প্রথমে আমরা window.onload ফাংশনেটি ব্যবহার করেছি এবং আমাদের সমস্ত কোডগুলো এই ফাংশনের মধ্যেই করেছি। এটার কারণ এই window.onload ফাংশনটি তখনই কল হয় যখন পুরো ওয়েবপেইজটি লোড হওয়া শেষ হয়। যদি আমরা এই ফাংশনটির মধ্যে কোডগুলো না লিখি তবে এরর আসবে কারণ লোড হওয়ার আগে document.querySelector ডম (DOM) থেকে আমাদের দেয়া ক্লাসটি খুজবে এবং তা পাবে না। আমরা এইচটিএমএল এ ঘন্টা, মিনিট ও সেকেন্ট প্রদর্শন করানোর জন্য তিনটি  DIV নিয়েছিলাম যেগুলোর ভিতরে প্রত্যেকটিতে একটি .val ক্লাসযুক্ত DIV নিয়েছি আমাদের ঘড়ির ঘন্টা, মিনিট ও সেকেন্ড প্রদর্শন করানোর জন্য।

এখন আমরা ঘন্টাকে প্রদর্শন করানোর জন্য document.querySelector এর মাধ্যমে hour DIV এর মধ্যে থাকা val ক্লাসটি কে একটি ভেরিয়েভলে যুক্ত করেছি যার নাম দিয়েছি hEl মানে Hour Element । একই ভাবে মিনিটের জন্য ও সেকেন্ডের জন্য আরো দু'টি ভেরিয়েবল নিয়েছি। উল্লেখ্য এইখানে document.querySelector আমরা ক্লাসের আগে ডট (.) ব্যবহার করেছি, যদি DIV এ ID ব্যবহার করতাম তখন আমরা হ্যাস (#) চিহ্ন ব্যবহার করতাম।

এর পর আমরা setInterval ফাংশনটি ব্যবহার করেছি। setInterval ফাংশনটি দু'টি প্যারামিটার নেয়। একটি হল ফাংশন অন্যটি হল সময় (মিলিসেকেন্ডে)। এখানে আমরা ১ প্যারামিটার হিসেবে একটি anonymous function (নামবিহীন ফাংশন) দিয়েছি এবং ২য় প্যারামিটারে ১০০০ ভ্যালু দিয়েছি ( মিলিসেকেন্ড হিসেবে) ১০০০ মিলিসেকেন্ড = ১ সেকেন্ড। তার মানে আমাদের পাঠানো anonymous ফাংশনটি প্রতি ১ সেকেন্ড পর পর কল হবে এবং আমাদের ঘড়িটি আপডেটেট টাইম প্রদর্শন করবে।

এর পর আমরা anonymous ফাংশনটির মধ্যে জাভাস্কিপ্ট এর একটি Date Object নিলাম। আমরা জানি, Date object টিকে কোন কিছু না দিলে তা বর্তমান তারিখ ও সময় রিটার্ন করে তাই আমরা বর্তমান তারিখ সময় নিতে কোন কিছু পাস করিনি প্যারামিটার হিসেবে। এখন আমাদের যে তিনটা ভেরিয়েবল ছিল ঐগুলোতে আমরা innerHTML প্রপার্টি ব্যবহার করে যথাক্রমে ঘন্টা, মিনিট ও সেকেন্ড প্রদর্শন করাবো।

আমরা যে now ভেরিয়েবলে একটি Date Object নিয়েছিলাম, তার থেকে আমরা getHours() ফাংশনটিকে কল করলে বর্তমান সময়ের ঘন্টার পার্টটি পাওয়া যাবে ( ২৪ ঘন্টার ফরম্যাট হিসেবে)। getMinutes() ফাংশনটি কল করলে বর্তমান মিনিট ও getSeconds() কল করলে বর্তমান সেকেন্ড পাওয়া যাবে। Date Object এর এই তিনটি ফাংশন ব্যবহার করে আমরা এর ভ্যালুগুলো আমাদের ঘন্টা, মিনিট ও সেকেন্ডের এইচটিএমএল এর DIV গুলোতে প্রদর্শন করাবো।

এখন সব সেভ করে ওয়েবপেইজটি ব্রাউজারে রান করলে আমরা একটি সুন্দর ও সিম্পল ডিজিটাল ঘড়ি দেখতে পাবে যা লাইভ প্রতি সেকেন্ডে আপডেট হবে।