Стрелице за измену месеца у календару на 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));
});

Реализујте рад дугмића за измену месеца.

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