Стрелки за промена на месецот во календарот на JavaScript

Ајде сега под календарот да направиме стрелки за промена на месецот. Да ги внесеме промените во 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));
});

Имплементирајте ги копчињата за промена на месецот.

Направете ја информацијата над календарот да одговара на прикажаниот месец и година.