diff --git a/index.html b/index.html
index 0a23e70..ee03b3b 100644
--- a/index.html
+++ b/index.html
@@ -2,15 +2,31 @@
-
-
+
+
Calendar
-
+
+
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;
+}