From b3d6c7c75b0a3d365a60696986968b03b87062f5 Mon Sep 17 00:00:00 2001 From: vikingowl Date: Thu, 23 Jan 2025 21:16:02 +0100 Subject: [PATCH] added base-layout --- index.html | 24 ++++++++++++--- script.js | 63 ++++++++++++++++++++++++++++++++++++++ style.css | 89 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 172 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 0a23e70..ee03b3b 100644 --- a/index.html +++ b/index.html @@ -2,15 +2,31 @@ - - + + Calendar - + +
+
+
+
2025
+
+ + + +
+
September
+
+ +
+
+
+
diff --git a/script.js b/script.js index e69de29..e9fc032 100644 --- a/script.js +++ b/script.js @@ -0,0 +1,63 @@ +const WEEKDAYS = Object.freeze({ + MONDAY: 0, + TUESDAY: 1, + WEDNESDAY: 2, + THURSDAY: 3, + FRIDAY: 4, + SATURDAY: 5, + SUNDAY: 6 +}); + +const MONTHS = Object.freeze({ + JANUARY: 0, + FEBRUARY: 1, + MARCH: 2, + APRIL: 3, + MAY: 4, + JUNE: 5, + JULY: 6, + AUGUST: 7, + SEPTEMBER: 8, + OCTOBER: 9, + NOVEMBER: 10, + DEZEMBER: 11 +}) + +function generateDays() { + const visibleDays = 42 // 7 col, 5 row + const calendarBody = document.getElementById('calendar__body') + if (calendarBody) { + for (let i = 0; i < visibleDays; i++) { + const day = document.createElement('div') + day.classList.add('day') + if (i < Object.keys(WEEKDAYS).length) { + day.classList.add('weekday') + day.textContent = Object.keys(WEEKDAYS)[i] + } else { + const dayId = i % 7 + 1 + day.classList.add('day-' + dayId) + } + calendarBody.appendChild(day) + } + } +} + +function addCalendarDays() { + const date = new Date() + + console.log(date.getMonth()) +} + +function setHeaderInfo(month, year) { + const yearDOM = document.querySelector('#calendar__header .year') + const monthDOM = document.querySelector('#calendar__header .month') + + if (month) { + month.textContent = month + } +} + +document.addEventListener('DOMContentLoaded', () => { + generateDays() + addCalendarDays() +}) diff --git a/style.css b/style.css index e69de29..51486af 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,89 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: 'Poppins', sans-serif; +} + +.container { + width: 100%; + height: 100dvh; + display: flex; + justify-content: center; + align-items: center; + flex: 0 1 auto; +} + +.calendar { + width: 900px; + height: 650px; + background: floralwhite; + border: 1px solid black; +} + +#calendar__header { + background: aliceblue; + display: flex; + justify-content: space-between; + height: 3rem; +} + +#calendar__body { + width: 100%; + height: calc(100% - 3rem); + padding: 0.5rem; + + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + grid-template-rows: auto 1fr 1fr 1fr 1fr 1fr; + gap: 0.5rem 0.5rem; + grid-template-areas: + ". . . . . . ." + ". . . . . . ." + ". . . . . . ." + ". . . . . . ." + ". . . . . . ." + ". . . . . . ."; +} + +#calendar__header * { + width: 7rem; + height: 100%; + padding: 1rem 2rem; + display: flex; + align-items: center; + font-size: 1.2rem; +} + +#calendar__header .year { + justify-content: start; +} + +#calendar__header .month { + justify-content: end; +} + +#calendar__header .actions { + display: flex; + justify-content: center; + align-items: center; + gap: .5rem; +} + +#calendar__header .actions button { + display: flex; + justify-content: center; + align-items: center; + padding: 1rem; +} + +.day { + background: burlywood; +} + +.weekday { + height: 2.5rem; + display: flex; + justify-content: center; + align-items: center; +}