JavaScript да календарда ойни алмаштириш учун ўқлар

Энди календар ostida ойни алмаштириш учун ўқлар ясаймиз. HTML кодга ўзгартиришлар киритамиз:

<div id="parent">
	<div id="calendar">
		<div class="info">Yan 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));
});

Кўриб turganingizdek, бу ерда getNextYear ва getNextMonth функсиялари ишлатилган. Улар нима қилиши кераклигини муҳокама қилаймиз.

Номидан кўриниб turganidek, getNextYear функсияси кейинги йилни олади. Бу ерда назарда тутилган шундаки, агар ҳозир декабрь бўлса, кейинги ойга ўтганда йил 1 га orthi kerak. Агар ҳозир декабрь бўлмаса, функсия жуда оддий ҳозирги йилни qaytarishi керак.

getNextMonth функсияси кейинги ойни олиши керак. У декабрьдан бошқа барча ойлар учун ой рақамига битта qo'shadi. Ва декабрь учун кейинги ой 0 рақамли январ бўлади.

Охирги ой тугмаси босилганда ҳам xuddi шунга ўхшаш амаллар бажарилиши керак:

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

Ойни алмаштириш тугмаларининг ишини амалга оширинг.

Календар ustidagi маълумот кўрсатилаётган ой ва йилга мос келиши учун тартибга солинг.