Initial commit

index.js

@@ -0,0 +1,36 @@
+// Days of the week
+const daysOfWeek = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
+
+// Select the calendar container
+const calendar = document.getElementById("calendar");
+
+// Create the weekly calendar
+daysOfWeek.forEach((day) => {
+    // Create a column for each day
+    const dayColumn = document.createElement("div");
+    dayColumn.classList.add("day-column");
+
+    // Add a header for the day
+    const dayHeader = document.createElement("div");
+    dayHeader.classList.add("day-header");
+    dayHeader.textContent = day;
+    dayColumn.appendChild(dayHeader);
+
+    // Add hourly blocks for each day
+    for (let hour = 0; hour < 24; hour++) {
+        const hourBlock = document.createElement("div");
+        hourBlock.classList.add("hour-block");
+        hourBlock.textContent = `${hour}:00`;
+
+        // Add a click event listener to toggle color
+        hourBlock.addEventListener("click", () => {
+            hourBlock.classList.toggle("clicked");
+        });
+
+        dayColumn.appendChild(hourBlock);
+    }
+
+    // Append the day column to the calendar
+    calendar.appendChild(dayColumn);
+});
+