Update scripts.js

Calander/scripts.js

@@ -1,81 +1,84 @@
-let today = new Date();
+const today = new Date();
 let currentMonth = today.getMonth();
 let currentYear = today.getFullYear();
-let selectYear = document.getElementById("year");
-let selectMonth = document.getElementById("month");
 
-let months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+const selectYear = document.getElementById("year");
+const selectMonth = document.getElementById("month");
+const monthAndYear = document.getElementById("monthAndYear");
+const calendarBody = document.getElementById("calendar-body");
 
-let monthAndYear = document.getElementById("monthAndYear");
-showCalendar(currentMonth, currentYear);
+const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
+                "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 
+document.addEventListener("DOMContentLoaded", () => {
+  showCalendar(currentMonth, currentYear);
+});
 
 function next() {
-    currentYear = (currentMonth === 11) ? currentYear + 1 : currentYear;
-    currentMonth = (currentMonth + 1) % 12;
-    showCalendar(currentMonth, currentYear);
+  currentMonth = (currentMonth + 1) % 12;
+  if (currentMonth === 0) currentYear++;
+  showCalendar(currentMonth, currentYear);
 }
 
 function previous() {
-    currentYear = (currentMonth === 0) ? currentYear - 1 : currentYear;
-    currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1;
-    showCalendar(currentMonth, currentYear);
+  currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1;
+  if (currentMonth === 11) currentYear--;
+  showCalendar(currentMonth, currentYear);
 }
 
 function jump() {
-    currentYear = parseInt(selectYear.value);
-    currentMonth = parseInt(selectMonth.value);
+  const selectedYear = parseInt(selectYear.value);
+  const selectedMonth = parseInt(selectMonth.value);
+
+  if (!isNaN(selectedYear) && !isNaN(selectedMonth)) {
+    currentYear = selectedYear;
+    currentMonth = selectedMonth;
     showCalendar(currentMonth, currentYear);
+  }
 }
 
 function showCalendar(month, year) {
-
-    let firstDay = (new Date(year, month)).getDay();
-    let daysInMonth = 32 - new Date(year, month, 32).getDate();
-
-    let tbl = document.getElementById("calendar-body"); // body of the calendar
-
-    // clearing all previous cells
-    tbl.innerHTML = "";
-
-    // filing data about month and in the page via DOM.
-    monthAndYear.innerHTML = months[month] + " " + year;
-    selectYear.value = year;
-    selectMonth.value = month;
-
-    // creating all cells
-    let date = 1;
-    for (let i = 0; i < 6; i++) {
-        // creates a table row
-        let row = document.createElement("tr");
-
-        //creating individual cells, filing them up with data.
-        for (let j = 0; j < 7; j++) {
-            if (i === 0 && j < firstDay) {
-                let cell = document.createElement("td");
-                let cellText = document.createTextNode("");
-                cell.appendChild(cellText);
-                row.appendChild(cell);
-            }
-            else if (date > daysInMonth) {
-                break;
-            }
-
-            else {
-                let cell = document.createElement("td");
-                let cellText = document.createTextNode(date);
-                if (date === today.getDate() && year === today.getFullYear() && month === today.getMonth()) {
-                    cell.classList.add("bg-info");
-                } // color today's date
-                cell.appendChild(cellText);
-                row.appendChild(cell);
-                date++;
-            }
-
-
+  const firstDay = new Date(year, month).getDay();
+  const daysInMonth = 32 - new Date(year, month, 32).getDate();
+
+  // Clear previous calendar
+  calendarBody.innerHTML = "";
+
+  // Set month and year
+  monthAndYear.textContent = `${months[month]} ${year}`;
+  selectYear.value = year;
+  selectMonth.value = month;
+
+  let date = 1;
+
+  for (let i = 0; i < 6; i++) {
+    const row = document.createElement("tr");
+
+    for (let j = 0; j < 7; j++) {
+      const cell = document.createElement("td");
+
+      if (i === 0 && j < firstDay) {
+        cell.textContent = "";
+      } else if (date > daysInMonth) {
+        break;
+      } else {
+        cell.textContent = date;
+
+        // Highlight today
+        if (
+          date === today.getDate() &&
+          year === today.getFullYear() &&
+          month === today.getMonth()
+        ) {
+          cell.classList.add("bg-info");
         }
 
-        tbl.appendChild(row); // appending each row into calendar body.
+        date++;
+      }
+
+      row.appendChild(cell);
     }
 
-}
+    calendarBody.appendChild(row);
+  }
+}