From a4bec9d197c6d2be2ee424c8c0dc95501d01bb9c Mon Sep 17 00:00:00 2001 From: Maksym Babalich <17033001m@gmail.com> Date: Sun, 5 Jul 2026 01:43:41 +0300 Subject: [PATCH 1/4] add task solution --- README.md | 4 +-- src/index.html | 34 ++++++++++++++++++++++++- src/styles/index.scss | 59 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 94 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 6a30283def..808f8fa071 100644 --- a/README.md +++ b/README.md @@ -36,8 +36,8 @@ This is possible because [we use the Parcel library](https://en.parceljs.org/scs ❗️ Replace `` with your Github username and copy the links to `Pull Request` description: -- [DEMO LINK](https://.github.io/layout_calendar/) -- [TEST REPORT LINK](https://.github.io/layout_calendar/report/html_report/) +- [DEMO LINK](https://MasyaArc.github.io/layout_calendar/) +- [TEST REPORT LINK](https://MasyaArc.github.io/layout_calendar/report/html_report/) ❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it. diff --git a/src/index.html b/src/index.html index c10199d38b..2c793f8ddd 100644 --- a/src/index.html +++ b/src/index.html @@ -13,6 +13,38 @@ /> -

Calendar

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..f06d5b0f59 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,62 @@ +@use 'sass:list'; + +$modifikator: mon, tue, wed, thu, fri, sat, sun; +$day-width: 100px; +$calendar-gap: 1px; + body { margin: 0; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + padding: 0; +} + +.calendar { + width: 706px; + display: flex; + margin: auto; + gap: $calendar-gap; + flex-wrap: wrap; + + &__day { + text-align: center; + align-content: center; + background-color: #eee; + box-sizing: border-box; + width: $day-width; + height: 100px; + padding: 10px; + border: 1px solid black; + transition-duration: 500ms; + + &:hover { + cursor: pointer; + background-color: #ffbfcb; + transform: translateY(-20px); + } + } +} + +@for $i from 1 through 31 { + .calendar .calendar__day:nth-child(#{$i})::before { + content: '#{$i}'; + font-family: Arial, Helvetica, sans-serif; + font-size: 30px; + } +} + +@for $i from 28 through 31 { + .calendar--month-length-#{$i} .calendar__day:nth-child(n + #{$i + 1}) { + display: none; + } +} + +@each $day in $modifikator { + $offset: (list.index($modifikator, $day) - 1) * ($day-width + $calendar-gap); + + .calendar--start-day-#{$day} .calendar__day:first-child { + margin-left: $offset; + } } From 99b11dc1ea7cf66d23eaddf10b5ee0e0da190aa1 Mon Sep 17 00:00:00 2001 From: Maksym Babalich <17033001m@gmail.com> Date: Sun, 5 Jul 2026 01:52:18 +0300 Subject: [PATCH 2/4] fixed commets AI --- src/index.html | 2 +- src/styles/main.scss | 63 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 64 insertions(+), 1 deletion(-) create mode 100644 src/styles/main.scss diff --git a/src/index.html b/src/index.html index 2c793f8ddd..6245b0a7a0 100644 --- a/src/index.html +++ b/src/index.html @@ -9,7 +9,7 @@ Calendar diff --git a/src/styles/main.scss b/src/styles/main.scss new file mode 100644 index 0000000000..170cd95bce --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,63 @@ +@use 'sass:list'; + +$modifikator: mon, tue, wed, thu, fri, sat, sun; +$day-width: 100px; +$day-height: 100px; +$calendar-gap: 1px; + + +body { + margin: 0; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + padding: 0; +} + +.calendar { + width: $day-width * 7 + $calendar-gap * 10; + display: flex; + margin: auto; + gap: $calendar-gap; + flex-wrap: wrap; + + &__day { + text-align: center; + align-content: center; + background-color: #eee; + box-sizing: border-box; + width: $day-width; + height: $day-height; + border: 1px solid black; + transition-duration: 500ms; + + &:hover { + cursor: pointer; + background-color: #ffbfcb; + transform: translateY(-20px); + } + } +} + +@for $i from 1 through 31 { + .calendar .calendar__day:nth-child(#{$i})::before { + content: '#{$i}'; + font-family: Arial, Helvetica, sans-serif; + font-size: 30px; + } +} + +@for $i from 28 through 31 { + .calendar--month-length-#{$i} .calendar__day:nth-child(n + #{$i + 1}) { + display: none; + } +} + +@each $day in $modifikator { + $offset: (list.index($modifikator, $day) - 1) * ($day-width + $calendar-gap); + + .calendar--start-day-#{$day} .calendar__day:first-child { + margin-left: $offset; + } +} From 827e2c90f4af2baa7af986bdecd73e7238a36e3f Mon Sep 17 00:00:00 2001 From: Maksym Babalich <17033001m@gmail.com> Date: Sun, 5 Jul 2026 01:55:41 +0300 Subject: [PATCH 3/4] fix review --- src/styles/index.scss | 62 ------------------------------------------- 1 file changed, 62 deletions(-) delete mode 100644 src/styles/index.scss diff --git a/src/styles/index.scss b/src/styles/index.scss deleted file mode 100644 index f06d5b0f59..0000000000 --- a/src/styles/index.scss +++ /dev/null @@ -1,62 +0,0 @@ -@use 'sass:list'; - -$modifikator: mon, tue, wed, thu, fri, sat, sun; -$day-width: 100px; -$calendar-gap: 1px; - -body { - margin: 0; - min-height: 100vh; - display: flex; - justify-content: center; - align-items: center; - padding: 0; -} - -.calendar { - width: 706px; - display: flex; - margin: auto; - gap: $calendar-gap; - flex-wrap: wrap; - - &__day { - text-align: center; - align-content: center; - background-color: #eee; - box-sizing: border-box; - width: $day-width; - height: 100px; - padding: 10px; - border: 1px solid black; - transition-duration: 500ms; - - &:hover { - cursor: pointer; - background-color: #ffbfcb; - transform: translateY(-20px); - } - } -} - -@for $i from 1 through 31 { - .calendar .calendar__day:nth-child(#{$i})::before { - content: '#{$i}'; - font-family: Arial, Helvetica, sans-serif; - font-size: 30px; - } -} - -@for $i from 28 through 31 { - .calendar--month-length-#{$i} .calendar__day:nth-child(n + #{$i + 1}) { - display: none; - } -} - -@each $day in $modifikator { - $offset: (list.index($modifikator, $day) - 1) * ($day-width + $calendar-gap); - - .calendar--start-day-#{$day} .calendar__day:first-child { - margin-left: $offset; - } -} From 16fe79f352c7de456a44ad3ca6c40304c19bfc31 Mon Sep 17 00:00:00 2001 From: Maksym Babalich <17033001m@gmail.com> Date: Sun, 5 Jul 2026 02:12:38 +0300 Subject: [PATCH 4/4] fix last review --- src/styles/main.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/styles/main.scss b/src/styles/main.scss index 170cd95bce..e0d9c3914e 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -5,7 +5,6 @@ $day-width: 100px; $day-height: 100px; $calendar-gap: 1px; - body { margin: 0; min-height: 100vh; @@ -16,17 +15,19 @@ body { } .calendar { - width: $day-width * 7 + $calendar-gap * 10; + width: $day-width * 7 + $calendar-gap * 6; display: flex; - margin: auto; gap: $calendar-gap; flex-wrap: wrap; + margin: auto; &__day { text-align: center; align-content: center; background-color: #eee; box-sizing: border-box; + margin: 0; + width: $day-width; height: $day-height; border: 1px solid black;