একটি ডিজিটাল ঘড়ি তৈরি করা একটি সহজ ব্যায়াম যা আপনি উইন্ডোজ ফর্ম অ্যাপ্লিকেশন তৈরি করতে শেখার সময় করতে পারেন।
এটি আপনাকে বুঝতে সাহায্য করতে পারে কিভাবে ইউজার ইন্টারফেসে UI উপাদান যোগ করতে হয় এবং কিভাবে কিছু মান ব্যবহারকারীর কাছে ফেরত প্রদর্শন করতে হয়।
ডিজিটাল ঘড়ি অ্যাপ্লিকেশন সময় প্রদর্শনের জন্য একটি লেবেল ব্যবহার করে। আপনি ফাইলের পিছনে অ্যাপের কোডের ভিতরে টিক এবং লোড ইভেন্টগুলি ব্যবহার করে প্রতি সেকেন্ডে সময় আপডেট করতে পারেন।
ডিজিটাল ঘড়ির জন্য কীভাবে UI তৈরি করবেন
অ্যাপের জন্য UI তৈরি করতে, ক্যানভাসে একটি লেবেল যোগ করুন এবং এটিকে ডিজিটাল ঘড়ির মতো দেখতে ডিজাইন করুন।
কিভাবে রিয়েল টাইমে ঘড়ি আপডেট করবেন
আপনি প্রতি সেকেন্ডে ঘড়ির লেবেল আপডেট করতে একটি Windows Forms অ্যাপে ইভেন্ট ব্যবহার করতে পারেন।
টাইমার UI উপাদানটিতে একটি “টিক” ইভেন্ট রয়েছে যা প্রতি সেকেন্ডে একটি ঘড়ির টিক টিক চিহ্ন উপস্থাপন করতে ফায়ার করে। টাইমার UI উপাদানটি হাইলাইট করুন এবং বৈশিষ্ট্য উইন্ডোতে লাইটনিং আইকনে ক্লিক করুন।
নতুন ফাংশনের ভিতরে, বর্তমান সিস্টেম তারিখ এবং সময় পান।
টিক ইভেন্ট কাজ করার জন্য, আপনাকে প্রথমে টাইমার শুরু করতে হবে। উইন্ডোর শীর্ষে Form1.cs [ডিজাইন] ট্যাবে ক্লিক করে ক্যানভাস ভিউতে ফিরে যান।
একটি নতুন ফাংশন তৈরি করতে লোড ইভেন্টে ডাবল-ক্লিক করুন। আপনি যখন অ্যাপ্লিকেশন শুরু করবেন তখন ফর্মটি লোড হলে এই ফাংশনটি চলবে।
উইন্ডোজ ফর্ম ব্যবহার করে সহজ অ্যাপ্লিকেশন তৈরি করা
একটি ডিজিটাল ঘড়ি বা অ্যালার্ম তৈরি করা আপনার জ্ঞান প্রসারিত করার এবং কীভাবে একটি সাধারণ অ্যাপ্লিকেশন তৈরি করতে হয় তা শিখতে একটি দুর্দান্ত উপায়। এখন আপনি শিখতে চান এমন অন্যান্য টেক স্ট্যাকে একই ধরনের ঘড়ি তৈরি করার চেষ্টা করতে পারেন।
ডিজিটাল ঘড়ি জাভাস্ক্রিপ্টের সেরা শিক্ষানবিস প্রকল্পগুলির মধ্যে একটি। যেকোনো দক্ষতার স্তরের লোকেদের শেখার জন্য এটি যথেষ্ট সহজ।
এই নিবন্ধে, আপনি শিখবেন কিভাবে HTML, CSS এবং JavaScript ব্যবহার করে আপনার নিজস্ব ডিজিটাল ঘড়ি তৈরি করবেন। আপনি বিভিন্ন জাভাস্ক্রিপ্ট ধারণা যেমন ভেরিয়েবল তৈরি করা, ফাংশন ব্যবহার করা, তারিখের সাথে কাজ করা, DOM অ্যাক্সেস করা এবং বৈশিষ্ট্য যোগ করা এবং আরও অনেক কিছুর সাথে অভিজ্ঞতা অর্জন করবেন।
ডিজিটাল ক্লক প্রজেক্টের ফোল্ডার স্ট্রাকচার
HTML, CSS, এবং JavaScript ফাইল সমন্বিত একটি রুট ফোল্ডার তৈরি করুন। আপনি চাইলে ফাইলের নাম দিতে পারেন। এখানে রুট ফোল্ডারের নাম ডিজিটাল-ঘড়ি। স্ট্যান্ডার্ড নামকরণের নিয়ম অনুসরণ করে, HTML, CSS এবং JavaScript ফাইলগুলিকে যথাক্রমে index.html, styles.css এবং script.js নাম দেওয়া হয়েছে।
এখানে, ডিজিটাল ঘড়ির আইডি দিয়ে একটি ডিভ তৈরি করা হয়েছে। এই ডিভটি জাভাস্ক্রিপ্ট ব্যবহার করে একটি ডিজিটাল ঘড়ি প্রদর্শন করতে ব্যবহৃত হয়। Style.css হল একটি বাহ্যিক CSS পৃষ্ঠা এবং <link> ট্যাগ ব্যবহার করে HTML পৃষ্ঠার সাথে লিঙ্ক করা হয়েছে। একইভাবে, script.js হল একটি বাহ্যিক JS পৃষ্ঠা এবং <script> ট্যাগ ব্যবহার করে একটি HTML পৃষ্ঠার সাথে লিঙ্ক করা হয়েছে।
বর্তমান তারিখ এবং সময় তারিখ পরিবর্তনশীল মধ্যে সংরক্ষণ করা হবে. এখন আপনাকে তারিখ অবজেক্ট থেকে বর্তমান ঘন্টা, মিনিট এবং সেকেন্ড বের করতে হবে।
date.getHours(), date.getMinutes(), এবং date.getSeconds() একটি তারিখ অবজেক্ট থেকে যথাক্রমে বর্তমান ঘন্টা, মিনিট এবং সেকেন্ড পেতে ব্যবহৃত হয়। সমস্ত সময়ের উপাদানগুলি আরও ক্রিয়াকলাপের জন্য পৃথক ভেরিয়েবলে সংরক্ষণ করা হয়।
বর্তমান মেরিডিয়ান নির্দিষ্ট করা হচ্ছে (AM/PM)
যেহেতু ডিজিটাল ঘড়িটি 12-ঘন্টার বিন্যাসে রয়েছে, তাই আপনাকে বর্তমান ঘন্টা অনুযায়ী উপযুক্ত মেরিডিয়ান নির্দিষ্ট করতে হবে। যদি বর্তমান ঘন্টা 12 এর চেয়ে বেশি বা সমান হয়, তাহলে মেরিডিয়ানটি PM (পোস্ট মেরিডিয়ান) অন্যথায়, এটি AM (অ্যান্ট মেরিডিয়ান)।
বর্তমান ঘন্টাকে 12-ঘন্টার বিন্যাসে রূপান্তর করুন
এখন আপনাকে বর্তমান ঘন্টাকে 12 ঘন্টা ফর্ম্যাটে রূপান্তর করতে হবে। যদি বর্তমান ঘন্টা 0 হয়, বর্তমান ঘন্টা 12 এ আপডেট করা হয় (12-ঘন্টা বিন্যাস অনুযায়ী)। এছাড়াও, যদি বর্তমান ঘন্টা 12-এর বেশি হয়, তাহলে এটি 12-ঘন্টা সময়ের বিন্যাসের সাথে সারিবদ্ধ রাখতে 12 থেকে বিয়োগ করা হয়।
উপরের CSS ডিজিটাল ঘড়ি স্টাইল করতে ব্যবহৃত হয়। এখানে, ঘড়ির পাঠ্য প্রদর্শনের জন্য Open Sans Condensed ফন্ট ব্যবহার করা হয়। এটি @import ব্যবহার করে গুগল ফন্ট থেকে আমদানি করা হয়। #digital-clock id নির্বাচক টার্গেট ডিভ নির্বাচন করতে ব্যবহৃত হয়। আইডি নির্বাচক একটি নির্দিষ্ট উপাদান নির্বাচন করতে একটি HTML উপাদানের আইডি বৈশিষ্ট্য ব্যবহার করে।
অন্যান্য জাভাস্ক্রিপ্ট প্রজেক্ট ডেভেলপ করুন
আপনি যদি জাভাস্ক্রিপ্টে একজন শিক্ষানবিস হন এবং একজন ভাল ওয়েব ডেভেলপার হতে চান, তাহলে আপনাকে অবশ্যই কিছু ভাল জাভাস্ক্রিপ্ট-ভিত্তিক প্রকল্প তৈরি করতে হবে। তারা আপনার জীবনবৃত্তান্তের পাশাপাশি আপনার কর্মজীবনে মূল্য যোগ করতে পারে।
আপনি চেষ্টা করতে পারেন এমন কয়েকটি প্রকল্প হল ক্যালকুলেটর, হ্যাংম্যান গেম, টিক ট্যাক টো, জাভাস্ক্রিপ্ট ওয়েদার অ্যাপ, ইন্টারেক্টিভ ল্যান্ডিং পেজ, ওয়েট কনভার্সন টুল, রক পেপার সিজার ইত্যাদি।
আপনি যদি আপনার পরবর্তী জাভাস্ক্রিপ্ট-ভিত্তিক প্রকল্প খুঁজছেন, একটি সাধারণ ক্যালকুলেটর একটি চমৎকার পছন্দ।