Strele za promenu meseca u kalendaru na JavaScriptu

Hajde sada da ispod kalendara napravimo strele za promenu meseca. Unesimo izmene u HTML kod:

<div id="parent">
	<div id="calendar">
		<div class="info">Yandex 2020</div>
		<table>
			<thead>
				<tr>
					<th>pon</th>
					<th>uto</th>
					<th>sre</th>
					<th>čet</th>
					<th>pet</th>
					<th>sub</th>
					<th>ned</th>
				</tr>
			</thead>
			<tbody class="body"></tbody>
		</table>
		<div class="nav">
			<a href="#" class="prev">←</a>
			<a href="#" class="next">→</a>
		</div>
	</div>
</div>

Unesimo izmene u CSS kod:

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

Uzmimo linkove na strele u promenljive:

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

Razgovor

Hajde sada da razgovaramo o tome kako da rešimo zadatak. U stvari, kod našeg kalendara je napisan dobro proširivo: imamo funkciju draw, koja crta kalendar za zadati mesec. Tako da pri kliku na strelicu možemo ponovo nacrtati kalendar sa drugim brojem meseca (i možda godine).

Evo primera šta možemo da uradimo po kliku na strelicu sledećeg meseca:

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

Kao što vidite, ovde se koriste funkcije getNextYear i getNextMonth. Hajde da razgovaramo o tome šta one treba da rade.

Kao što sledi iz naziva, funkcija getNextYear dobija sledeću godinu. Ovde se podrazumeva da, ako je sada decembar, onda pri prebacivanju na sledeći mesec godina bi trebalo da se poveća za 1. Ako sada nije decembar, onda funkcija treba samo da vrati trenutnu godinu.

Funkcija getNextMonth treba da dobije sledeći mesec. Za sve mesece, osim decembra, ona će broju meseca dodati jedan. A za decembar sledeći mesec biće januar sa brojem 0.

Slične operacije treba da uradimo pri kliku na dugme prethodnog meseca:

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

Implementirajte rad dugmića za promenu meseca.

Uredite tako da informacije iznad kalendara odgovaraju prikazivanom mesecu i godini.