Kuu vahetamise nooled JavaScripti kalendris

Teeme nüüd kalendri alla nooled kuu vahetamiseks. Teeme muutused HTML koodis:

<div id="parent">
	<div id="calendar">
		<div class="info">Jaan 2020</div>
		<table>
			<thead>
				<tr>
					<th>E</th>
					<th>T</th>
					<th>K</th>
					<th>N</th>
					<th>R</th>
					<th>L</th>
					<th>P</th>
				</tr>
			</thead>
			<tbody class="body"></tbody>
		</table>
		<div class="nav">
			<a href="#" class="prev">←</a>
			<a href="#" class="next">→</a>
		</div>
	</div>
</div>

Teeme muutused CSS koodis:

#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;
}

Võtame noolte lingid muutujatesse:

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

Arutelu

Arutleme nüüd, kuidas ülesannet lahendada. Tegelikult on meie kalendri kood kirjutatud hea laiendatavusega: meil on funktsioon draw, mis joonistab kalendri etteantud kuu kohta. Seega võime nooleklõpsul ümber joonistada kalendri teise kuu numbri (ja võimalik, et aasta) jaoks.

Siin on näide sellest, mida võime teha järgmise kuu nooleklõpsul:

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

Nagu näete, siin kasutatakse funktsioone getNextYear ja getNextMonth. Arutleme, mida nad peaksid tegema.

Nagu nimest selgub, funktsioon getNextYear saab järgmise aasta. Siin mõeldakse seda, et kui praegu on detsember, siis kuu vahetamisel peaks aasta suurenema 1 võrra. Kui praegu ei ole detsember, siis funktsioon peaks lihtsalt tagastama praeguse aasta.

Funktsioon getNextMonth peaks saama järgmise kuu. See kõigile kuudele, välja arvatud detsember, lisab kuu numbrile ühe. Detsembri puhul on järgmine kuu jaanuar numbriga 0.

Sarnased toimingud tuleks teha eelmise kuu nupu vajutamisel:

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

Rakendage kuu vahetamise nuppude töö.

Tehke nii, et kalendri kohal olev info vastaks kuvatavat kuud ja aastat.