Calendar in JavaScript

In this section, we will implement a calendar. For simplicity, we will simply make the calendar display for the current month. But with an eye to the fact that it can be finalized so that you can change the month and year. Here is an example of what we should get:

Here is the layout that you can use when solving the problem:

<div id="parent">
	<div id="calendar">
		<table>
			<thead>
				<tr>
					<th>Mon</th>
					<th>Tue</th>
					<th>Wed</th>
					<th>Thu</th>
					<th>Fri</th>
					<th>Sat</th>
					<th>Sun</th>
				</tr>
			</thead>
			<tbody class="body"></tbody>
		</table>
	</div>
</div>

#parent {
	text-align: center;
}
#calendar {
	display: inline-block;
}
#calendar td, #calendar th {
	padding: 5px 12px;
	border: 1px solid black;
	text-align: center;
}

Immediately, let's get references to all the necessary tags in variables, and also write down the current month and year:

let calendar = document.querySelector('#calendar');
let body = calendar.querySelector('.body');

let date  = new Date();
let year  = date.getFullYear();
let month = date.getMonth();

Copy the code snippets I have provided.