From 0a1467fb140f9118e6b605329555337080baff31 Mon Sep 17 00:00:00 2001 From: Jona Heitzer Date: Tue, 31 Dec 2024 11:17:23 +0100 Subject: [PATCH] Initial commit --- index.html | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ index.js | 36 +++++++++++++++++++++++++++++++++++ 2 files changed, 92 insertions(+) create mode 100644 index.html create mode 100644 index.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..70c1fe1 --- /dev/null +++ b/index.html @@ -0,0 +1,56 @@ + + + + + + + Weekly Calendar + + + + +

Datefinder

+
+ + + + diff --git a/index.js b/index.js new file mode 100644 index 0000000..8e50ec8 --- /dev/null +++ b/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); +}); +