Home-theater-designers
ডিজিটাল ঘড়ি জাভাস্ক্রিপ্টের সেরা শিক্ষানবিশ প্রকল্পগুলির মধ্যে একটি। যেকোনো দক্ষতার স্তরের মানুষের জন্য এটা শেখা বেশ সহজ।
এই নিবন্ধে, আপনি শিখবেন কিভাবে এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট ব্যবহার করে আপনার নিজের একটি ডিজিটাল ঘড়ি তৈরি করতে হয়। আপনি বিভিন্ন জাভাস্ক্রিপ্ট ধারণার সাথে অভিজ্ঞতা পাবেন যেমন ভেরিয়েবল তৈরি করা, ফাংশন ব্যবহার করা, তারিখের সাথে কাজ করা, DOM- এ বৈশিষ্ট্যগুলি অ্যাক্সেস করা এবং যুক্ত করা এবং আরও অনেক কিছু।
কিভাবে মাদারবোর্ড আছে তা কিভাবে বলব
চল শুরু করি.
ডিজিটাল ঘড়ির উপাদান
ডিজিটাল ঘড়ির চারটি অংশ রয়েছে: ঘন্টা, মিনিট, সেকেন্ড এবং মেরিডিয়াম।
ডিজিটাল ঘড়ি প্রকল্পের ফোল্ডার গঠন
একটি রুট ফোল্ডার তৈরি করুন যাতে HTML, CSS এবং জাভাস্ক্রিপ্ট ফাইল থাকে। আপনি যে কোন ফাইলকে নাম দিতে পারেন। এখানে রুট ফোল্ডারের নাম দেওয়া হয়েছে ডিজিটাল ঘড়ি । স্ট্যান্ডার্ড নামকরণের প্রচলন অনুযায়ী, এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট ফাইলগুলির নামকরণ করা হয় index.html , styles.css , এবং script.js যথাক্রমে
এইচটিএমএল ব্যবহার করে ডিজিটাল ঘড়িতে কাঠামো যোগ করা
খোলা index.html নিম্নলিখিত কোডটি ফাইল করুন এবং আটকান:
Digital Clock Using JavaScript
এখানে, ক ডিভ একটি দিয়ে তৈরি করা হয় আইডি এর ডিজিটাল ঘড়ি । এই ডিভিটি জাভাস্ক্রিপ্ট ব্যবহার করে ডিজিটাল ঘড়ি প্রদর্শন করতে ব্যবহৃত হয়। styles.css একটি বহিরাগত CSS পৃষ্ঠা এবং এটি a ব্যবহার করে HTML পৃষ্ঠার সাথে সংযুক্ত ট্যাগ একইভাবে, script.js এটি একটি বহিরাগত জেএস পৃষ্ঠা এবং এটি ব্যবহার করে HTML পৃষ্ঠার সাথে সংযুক্ত < স্ক্রিপ্ট> ট্যাগ
জাভাস্ক্রিপ্ট ব্যবহার করে ডিজিটাল ঘড়িতে কার্যকারিতা যোগ করা
খোলা script.js নিম্নলিখিত কোডটি ফাইল করুন এবং আটকান:
function Time() {
// Creating object of the Date class
var date = new Date();
// Get current hour
var hour = date.getHours();
// Get current minute
var minute = date.getMinutes();
// Get current second
var second = date.getSeconds();
// Variable to store AM / PM
var period = '';
// Assigning AM / PM according to the current hour
if (hour >= 12) {
period = 'PM';
} else {
period = 'AM';
}
// Converting the hour in 12-hour format
if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}
// Updating hour, minute, and second
// if they are less than 10
hour = update(hour);
minute = update(minute);
second = update(second);
// Adding time elements to the div
document.getElementById('digital-clock').innerText = hour + ' : ' + minute + ' : ' + second + ' ' + period;
// Set Timer to 1 sec (1000 ms)
setTimeout(Time, 1000);
}
// Function to update time elements if they are less than 10
// Append 0 before time elements if they are less than 10
function update(t) {
if (t <10) {
return '0' + t;
}
else {
return t;
}
}
Time();জাভাস্ক্রিপ্ট কোড বোঝা
দ্য সময় () এবং হালনাগাদ() ফাংশনগুলি ডিজিটাল ঘড়িতে কার্যকারিতা যুক্ত করতে ব্যবহৃত হয়।
বর্তমান সময়ের উপাদান পাওয়া
বর্তমান তারিখ এবং সময় পেতে, আপনাকে একটি তারিখ বস্তু তৈরি করতে হবে। জাভাস্ক্রিপ্টে তারিখ অবজেক্ট তৈরির জন্য এটি সিনট্যাক্স:
var date = new Date();বর্তমান তারিখ এবং সময় সংরক্ষণ করা হবে তারিখ পরিবর্তনশীল এখন আপনাকে তারিখের বস্তু থেকে বর্তমান ঘন্টা, মিনিট এবং দ্বিতীয়টি বের করতে হবে।
date.getHours () , date.getMinutes (), এবং date.getSeconds () তারিখ বস্তু থেকে যথাক্রমে বর্তমান ঘন্টা, মিনিট, এবং দ্বিতীয় পেতে ব্যবহৃত হয়। সমস্ত সময় উপাদানগুলি পরবর্তী ক্রিয়াকলাপের জন্য পৃথক ভেরিয়েবলে সংরক্ষণ করা হয়।
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();বর্তমান দুপুর নির্ধারণ করা (AM/PM)
যেহেতু ডিজিটাল ঘড়িটি 12 ঘন্টার বিন্যাসে, তাই আপনাকে বর্তমান ঘন্টা অনুযায়ী উপযুক্ত মেরিডিয়াম বরাদ্দ করতে হবে। যদি বর্তমান ঘন্টা 12 এর চেয়ে বেশি বা সমান হয়, তাহলে মেরিডিয়াম PM (পোস্ট মেরিডিয়াম) অন্যথায়, এটি AM (Ante Meridiem)।
var period = '';
if (hour >= 12) {
period = 'PM';
} else {
period = 'AM';
}বর্তমান সময়কে 12-ঘন্টা ফর্ম্যাটে রূপান্তর করা
এখন আপনাকে বর্তমান ঘন্টাটিকে 12 ঘন্টার বিন্যাসে রূপান্তর করতে হবে। যদি বর্তমান ঘন্টা 0 হয়, তাহলে বর্তমান ঘন্টা 12 তে আপডেট করা হবে (12-ঘন্টা বিন্যাস অনুযায়ী)। এছাড়াও, যদি বর্তমান ঘন্টা 12 এর বেশি হয়, তাহলে এটি 12-এর কমিয়ে 12-ঘন্টা সময় বিন্যাসের সাথে সামঞ্জস্য রাখতে হবে।
সম্পর্কিত: কীভাবে পাঠ্য নির্বাচন, কাটা, অনুলিপি, আটকানো এবং একটি ওয়েব পৃষ্ঠায় ডান ক্লিক অক্ষম করবেন
if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}সময় উপাদান আপডেট করা হচ্ছে
আপনার সময় উপাদানগুলি 10 (একক-ডিজিট) এর কম হলে আপডেট করতে হবে। 0 সমস্ত একক-সংখ্যার সময় উপাদানগুলিতে যুক্ত করা হয় (ঘন্টা, মিনিট, সেকেন্ড)।
hour = update(hour);
minute = update(minute);
second = update(second);
function update(t) {
if (t <10) {
return '0' + t;
}
else {
return t;
}
}DOM- এ সময় উপাদান যোগ করা
প্রথমে, DOM টার্গেট div এর id ব্যবহার করে অ্যাক্সেস করা হয় ( ডিজিটাল ঘড়ি )। তারপর সময় উপাদানগুলি div ব্যবহার করে বরাদ্দ করা হয় অভ্যন্তরীণ পাঠ্য সেটার
document.getElementById('digital-clock').innerText = hour + ' : ' + minute + ' : ' + second + ' ' + period;প্রতি সেকেন্ডে ঘড়ি আপডেট করা হচ্ছে
ঘড়িটি প্রতি সেকেন্ডে আপডেট করা হয় setTimeout () জাভাস্ক্রিপ্টে পদ্ধতি।
setTimeout(Time, 1000);সিএসএস ব্যবহার করে ডিজিটাল ক্লক স্টাইল করা
খোলা styles.css নিম্নলিখিত কোডটি ফাইল করুন এবং আটকান:
সম্পর্কিত: কিভাবে CSS বক্স-ছায়া ব্যবহার করবেন: কৌশল এবং উদাহরণ
/* Importing Open Sans Condensed Google font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap');
#digital-clock {
background-color: #66ffff;
width: 35%;
margin: auto;
padding-top: 50px;
padding-bottom: 50px;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 64px;
text-align: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}উপরের সিএসএস ডিজিটাল ঘড়িকে স্টাইল করতে ব্যবহৃত হয়। এখানে, ওপেন সানস কনডেন্সড ফন্টটি ঘড়ির পাঠ্য প্রদর্শন করতে ব্যবহৃত হয়। এটি গুগল ফন্ট ব্যবহার করে আমদানি করা হয়েছে - আমদানি । দ্য #ডিজিটাল ঘড়ি আইডি সিলেক্টর টার্গেট ডিভ সিলেক্ট করতে ব্যবহৃত হয়। আইডি নির্বাচক ব্যবহার করে আইডি একটি নির্দিষ্ট উপাদান নির্বাচন করার জন্য একটি এইচটিএমএল এলিমেন্টের বৈশিষ্ট্য।
সম্পর্কিত: সহজ সিএসএস কোড উদাহরণ আপনি 10 মিনিটে শিখতে পারেন
আপনি যদি এই নিবন্ধে ব্যবহৃত সম্পূর্ণ সোর্স কোডটি দেখতে চান তবে এখানে গিটহাব সংগ্রহস্থল । এছাড়াও, আপনি যদি এই প্রকল্পের লাইভ সংস্করণটি দেখতে চান তবে আপনি এটির মাধ্যমে এটি পরীক্ষা করতে পারেন গিটহাব পৃষ্ঠাগুলি ।
বিঃদ্রঃ : এই নিবন্ধে ব্যবহৃত কোড হল এমআইটি লাইসেন্সপ্রাপ্ত ।
অন্যান্য জাভাস্ক্রিপ্ট প্রকল্পগুলি বিকাশ করুন
আপনি যদি জাভাস্ক্রিপ্টে একজন শিক্ষানবিশ হন এবং একজন ভাল ওয়েব ডেভেলপার হতে চান, তাহলে আপনাকে কিছু ভাল জাভাস্ক্রিপ্ট-ভিত্তিক প্রকল্প তৈরি করতে হবে। তারা আপনার জীবনবৃত্তান্তের পাশাপাশি আপনার ক্যারিয়ারে মূল্য যোগ করতে পারে।
আপনি কিছু প্রকল্প যেমন ক্যালকুলেটর, একটি হ্যাঙ্গম্যান গেম, টিক ট্যাক টো, একটি জাভাস্ক্রিপ্ট আবহাওয়া অ্যাপ্লিকেশন, একটি ইন্টারেক্টিভ ল্যান্ডিং পৃষ্ঠা, একটি ওজন রূপান্তর সরঞ্জাম, রক পেপার কাঁচি ইত্যাদি চেষ্টা করতে পারেন।
আমার কি ধরনের ইউটিউব ভিডিও করা উচিত
আপনি যদি আপনার পরবর্তী জাভাস্ক্রিপ্ট-ভিত্তিক প্রকল্পটি খুঁজছেন, একটি সাধারণ ক্যালকুলেটর একটি চমৎকার পছন্দ।
শেয়ার করুন শেয়ার করুন টুইট ইমেইল এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট ব্যবহার করে কীভাবে একটি সাধারণ ক্যালকুলেটর তৈরি করবেনপ্রোগ্রামিং করার সময় সহজ, গণনা করা কোড হল যাওয়ার উপায়। এইচটিএমএল, সিএসএস এবং জেএস -এ আপনার নিজস্ব ক্যালকুলেটর কীভাবে তৈরি করবেন তা দেখুন।
পরবর্তী পড়ুন সম্পর্কিত বিষয়- ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্ট
- প্রোগ্রামিং
- এইচটিএমএল
- ওয়েব ডেভেলপমেন্ট
- জাভাস্ক্রিপ্ট
- সিএসএস
যুবরাজ ভারতের দিল্লি বিশ্ববিদ্যালয়ের কম্পিউটার সায়েন্সের স্নাতক ছাত্র। তিনি ফুল স্ট্যাক ওয়েব ডেভেলপমেন্ট সম্পর্কে উত্সাহী। যখন তিনি লিখছেন না, তিনি বিভিন্ন প্রযুক্তির গভীরতা অন্বেষণ করছেন।
যুবরাজ চন্দ্রের কাছ থেকে আরোআমাদের নিউজলেটার সদস্যতা
প্রযুক্তি টিপস, রিভিউ, ফ্রি ইবুক এবং এক্সক্লুসিভ ডিলের জন্য আমাদের নিউজলেটারে যোগ দিন!
সাবস্ক্রাইব করতে এখানে ক্লিক করুন