From 80e817373442428f0505e09682e9a1617ece4e02 Mon Sep 17 00:00:00 2001 From: IvanVarvaruk Date: Mon, 13 Jul 2026 13:41:09 +0300 Subject: [PATCH 1/4] fixed --- src/index.html | 34 +++++++++++++++++++++++++- src/styles/blocks/calendar.scss | 43 +++++++++++++++++++++++++++++++++ src/styles/index.scss | 8 ++++++ src/styles/utils/varibles.scss | 11 +++++++++ 4 files changed, 95 insertions(+), 1 deletion(-) create mode 100644 src/styles/blocks/calendar.scss create mode 100644 src/styles/utils/varibles.scss diff --git a/src/index.html b/src/index.html index c10199d38b..4fa43da9a0 100644 --- a/src/index.html +++ b/src/index.html @@ -13,6 +13,38 @@ /> -

Calendar

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/blocks/calendar.scss b/src/styles/blocks/calendar.scss new file mode 100644 index 0000000000..6cafa85600 --- /dev/null +++ b/src/styles/blocks/calendar.scss @@ -0,0 +1,43 @@ +.calendar { + display: flex; + flex-flow: row wrap; + gap: $gap; + width: $cell-size * 7 + $gap * 6; + + &__day { + box-sizing: border-box; + background-color: #eee; + border: 1px solid #000; + transition-duration: 0.5s; + height: $cell-size; + width: $cell-size; + + line-height: 98px; + text-align: center; + font-size: 30px; + } + + @for $i from 1 through 31 { + &__day:nth-child(#{$i})::before { + content: '#{$i}'; + } + } + + @each $name, $number in $week-days { + &--start-day-#{$name} &__day:first-child { + margin-left: ($number * $cell-size) + ($number * $gap); + } + } + + &__day:hover { + background-color: #ffbfcb; + cursor: pointer; + transform: translateY(-20px); + } + + @for $days from 28 through 31 { + &--month-length-#{$days} &__day:nth-child(n + #{$days + 1}) { + display: none; + } + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..ba9f5c5a26 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,11 @@ body { margin: 0; + font-family: Arial, Helvetica, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; } + +@import 'utils/varibles'; +@import 'blocks/calendar'; diff --git a/src/styles/utils/varibles.scss b/src/styles/utils/varibles.scss new file mode 100644 index 0000000000..52e25287dc --- /dev/null +++ b/src/styles/utils/varibles.scss @@ -0,0 +1,11 @@ +$cell-size: 100px; +$gap: 1px; +$week-days: ( + 'mon': 0, + 'tue': 1, + 'wed': 2, + 'thu': 3, + 'fri': 4, + 'sat': 5, + 'sun': 6, +); From e454d7796dcf40032a7dd066e476b7830004bbea Mon Sep 17 00:00:00 2001 From: IvanVarvaruk Date: Mon, 13 Jul 2026 13:44:00 +0300 Subject: [PATCH 2/4] updated readme --- README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 6a30283def..c0120f7118 100644 --- a/README.md +++ b/README.md @@ -36,13 +36,13 @@ 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://IvanVarvaruk.github.io/layout_calendar/) +- [TEST REPORT LINK](https://IvanVarvaruk.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. -- [ ] Changing 'month-lengh' and 'start-day' modifier in the code element +- [x] Changing 'month-lengh' and 'start-day' modifier in the code element reflects in changing calendar layout -- [ ] Each day has no modifiers, only class (eg. calendar__day) -- [ ] All `Typical Mistakes` from `BEM` lesson theory are checked. -- [ ] Code follows all the [Code Style Rules ❗️](https://mate-academy.github.io/layout_task-guideline/html-css-code-style-rules) +- [x] Each day has no modifiers, only class (eg. calendar__day) +- [x] All `Typical Mistakes` from `BEM` lesson theory are checked. +- [x] Code follows all the [Code Style Rules ❗️](https://mate-academy.github.io/layout_task-guideline/html-css-code-style-rules) From 753ceff25730294cc66379e8b22dad9cce11492a Mon Sep 17 00:00:00 2001 From: IvanVarvaruk Date: Mon, 13 Jul 2026 14:14:31 +0300 Subject: [PATCH 3/4] fixed requested changes --- src/index.html | 2 +- src/styles/blocks/calendar.scss | 16 +++++++++++++--- src/styles/{index.scss => main.scss} | 1 - src/styles/utils/varibles.scss | 14 +++++++------- 4 files changed, 21 insertions(+), 12 deletions(-) rename src/styles/{index.scss => main.scss} (78%) diff --git a/src/index.html b/src/index.html index 4fa43da9a0..323acbc747 100644 --- a/src/index.html +++ b/src/index.html @@ -9,7 +9,7 @@ Calendar diff --git a/src/styles/blocks/calendar.scss b/src/styles/blocks/calendar.scss index 6cafa85600..8dd5c4f53c 100644 --- a/src/styles/blocks/calendar.scss +++ b/src/styles/blocks/calendar.scss @@ -8,10 +8,14 @@ box-sizing: border-box; background-color: #eee; border: 1px solid #000; - transition-duration: 0.5s; height: $cell-size; width: $cell-size; + transition: + background-color 0.25s, + transform 0.25s; + + font-family: Arial, Helvetica, sans-serif; line-height: 98px; text-align: center; font-size: 30px; @@ -24,8 +28,14 @@ } @each $name, $number in $week-days { - &--start-day-#{$name} &__day:first-child { - margin-left: ($number * $cell-size) + ($number * $gap); + @if $number == 0 { + &--start-day-#{$name} &__day:first-child { + margin-left: (6 * $cell-size) + (6 * $gap); + } + } @else { + &--start-day-#{$name} &__day:first-child { + margin-left: (($number - 1) * $cell-size) + (($number - 1) * $gap); + } } } diff --git a/src/styles/index.scss b/src/styles/main.scss similarity index 78% rename from src/styles/index.scss rename to src/styles/main.scss index ba9f5c5a26..6abc99df58 100644 --- a/src/styles/index.scss +++ b/src/styles/main.scss @@ -1,6 +1,5 @@ body { margin: 0; - font-family: Arial, Helvetica, sans-serif; display: flex; justify-content: center; align-items: center; diff --git a/src/styles/utils/varibles.scss b/src/styles/utils/varibles.scss index 52e25287dc..64caea5fc0 100644 --- a/src/styles/utils/varibles.scss +++ b/src/styles/utils/varibles.scss @@ -1,11 +1,11 @@ $cell-size: 100px; $gap: 1px; $week-days: ( - 'mon': 0, - 'tue': 1, - 'wed': 2, - 'thu': 3, - 'fri': 4, - 'sat': 5, - 'sun': 6, + 'sun': 0, + 'mon': 1, + 'tue': 2, + 'wed': 3, + 'thu': 4, + 'fri': 5, + 'sat': 6, ); From 4ca0405cb167cdfcbf7fd87d6ce6c6f1318855a0 Mon Sep 17 00:00:00 2001 From: IvanVarvaruk Date: Mon, 13 Jul 2026 15:26:37 +0300 Subject: [PATCH 4/4] fixed --- src/styles/blocks/calendar.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/blocks/calendar.scss b/src/styles/blocks/calendar.scss index 8dd5c4f53c..d62871559d 100644 --- a/src/styles/blocks/calendar.scss +++ b/src/styles/blocks/calendar.scss @@ -12,8 +12,8 @@ width: $cell-size; transition: - background-color 0.25s, - transform 0.25s; + background-color 0.5s, + transform 0.5s; font-family: Arial, Helvetica, sans-serif; line-height: 98px;