জাভাস্ক্রিপ্টে ক্যালেন্ডারে মাস পরিবর্তনের জন্য তীর

আসুন এখন ক্যালেন্ডারের নিচে মাস পরিবর্তনের জন্য তীর তৈরি করি। HTML কোডে পরিবর্তন করা যাক:

<div id="parent">
	<div id="calendar">
		<div class="info">জানু 2020</div>
		<table>
			<thead>
				<tr>
					<th>সোম</th>
					<th>মঙ্গল</th>
					<th>বুধ</th>
					<th>বৃহস্পতি</th>
					<th>শুক্র</th>
					<th>শনি</th>
					<th>রবি</th>
				</tr>
			</thead>
			<tbody class="body"></tbody>
		</table>
		<div class="nav">
			<a href="#" class="prev">←</a>
			<a href="#" class="next">→</a>
		</div>
	</div>
</div>

CSS কোডে পরিবর্তন করা যাক:

#parent {
	text-align: center;
}
#calendar {
	display: inline-block;
}
#calendar td, #calendar th {
	padding: 10px;
	border: 1px solid black;
	text-align: center;
}

#calendar .nav, #calendar .info {
	text-align: center;
}
#calendar a {
	color: blue;
	font-size: 25px;
	text-decoration: none;
}
#calendar a:hover {
	color: red;
}

#calendar .active {
	color: red;
}

চলুন ভেরিয়েবলে তীরগুলোর লিঙ্ক পাই:

let prev = calendar.querySelector('.prev');
let next = calendar.querySelector('.next');

আলোচনা

আসুন এখন আলোচনা করি কিভাবে সমস্যার সমাধান করা যায়। আসলে আমাদের ক্যালেন্ডারের কোডটি ভালভাবে প্রসারিতযোগ্য করে লেখা হয়েছে: আমাদের কাছে draw ফাংশন আছে, যা প্রদত্ত মাসের জন্য ক্যালেন্ডার আঁকে। এইভাবে তীরে ক্লিক করলে আমরা ভিন্ন মাস নম্বর (এবং সম্ভবত বছর) সহ ক্যালেন্ডার পুনরায় আঁকতে পারি।

পরের মাসের তীরে ক্লিক করে আমরা যা করতে পারি তার একটি উদাহরণ এখানে দেওয়া হল:

next.addEventListener('click', function() {
	draw(body, getNextYear(year, month), getNextMonth(month));
});

আপনি দেখতে পাচ্ছেন, এখানে getNextYear এবং getNextMonth ফাংশন ব্যবহার করা হয়েছে। আসুন আলোচনা করি তাদের কী করা উচিত।

নাম থেকে বোঝা যায়, getNextYear ফাংশনটি পরবর্তী বছর পায়। এখানে বোঝানো হয়েছে যে, যদি এখন ডিসেম্বর হয়, তাহলে পরের মাসে স্যুইচ করার সময় বছর 1 দ্বারা বৃদ্ধি পাবে। আর যদি এখন ডিসেম্বর না হয়, তাহলে ফাংশনটি শুধুমাত্র বর্তমান বছর ফেরত দেবে।

getNextMonth ফাংশনটিকে পরবর্তী মাস পেতে হবে। এটি সব মাসের জন্য, ডিসেম্বর ছাড়া, মাসের নম্বরে এক যোগ করবে। আর ডিসেম্বরের জন্য পরের মাস হবে জানুয়ারী 0 নম্বর সহ।

আগের মাসের বাটনে ক্লিক করলে একই অপারেশন করা উচিত:

prev.addEventListener('click', function() {
	draw(body, getPrevYear(year, month), getPrevMonth(month));
});

মাস পরিবর্তনের বাটনগুলির কাজ বাস্তবায়ন করুন।

ক্যালেন্ডারের উপরের তথ্যটি প্রদর্শিত মাস এবং বছরের সাথে মিলে যায় তা নিশ্চিত করুন।