add task solution by RomaPleshenko · Pull Request #5445 · mate-academy/layout_calendar

RomaPleshenko · 2026-06-24T14:43:10Z

DEMO LINK
TEST REPORT LINK
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 ❗️

mateacademy-ai-mentor

Review Summary

I am requesting changes because there are still a few critical, functional mismatches with the task requirements that block completion. First, your styles are in src/styles/index.scss and the HTML links to styles/index.scss, but the task explicitly requires using src/styles/main.scss as the entry; you should move or rename index.scss to main.scss and update <link rel="stylesheet" href="styles/main.scss"> in src/index.html. Second, the month-length modifier names don’t align: HTML uses calendar--month-length--31 while SCSS generates &--length-#{$length}, so changing month-length in the class does not affect layout; adjust the loop to generate &--month-length--#{$length} so that modifiers like .calendar--month-length--28–31 correctly hide extra days [CHECKLIST ITEM #1]. Third, your start-day offset map (mon: 0, sun: 6, etc.) combined with the current margin-left calculation places day 1 under the wrong weekday columns; update the offsets so that calendar--start-day--sun starts in the Sunday column, --mon in the Monday column, and --fri in the fifth column, as the description requires [CHECKLIST ITEM #1]. Finally, the hover transition currently animates only transform, but the requirement says all hover changes (including background color) must be animated for 0.5s; set transition: transform 0.5s, background-color 0.5s; on the base .calendar__day so both properties are smoothly animated. You’ve done a solid job with BEM naming, flex layout, ::before numbering, and general SCSS structure—once these functional issues are fixed, your solution should meet the task requirements fully.

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Important

Fix the issues, commit the changes, and then re-request my review using the Re-request review button² in the Reviewers tab.

Tip

If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag³.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.

Caution

Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.

mateacademy-ai-mentor · 2026-06-24T14:45:47Z

  </head>
  <body>
-    <h1>Calendar</h1>
+    <div class="calendar calendar--start-day--sun calendar--month-length--31">


The calendar modifier for month length in HTML is calendar--month-length--31, but in SCSS you generate &--length-#{$length}. This mismatch means changing month-lengh in the HTML class will not affect layout, violating checklist item "Changing 'month-lengh' and 'start-day' modifier in the code element reflects in changing calendar layout". Align the SCSS modifier name with the HTML one (e.g. &--month-length--#{$length}).

mateacademy-ai-mentor · 2026-06-24T14:45:47Z

+  tue: 1,
+  wed: 2,
+  thu: 3,
+  fri: 4,


The modifier calendar--month-length--31 in HTML doesn’t match any SCSS modifier (&--length-#{$length}), so changing month-length in the code won’t affect layout. This violates checklist item #1: "Changing 'month-lengh' ... reflects in changing calendar layout"; align the modifier name in SCSS (e.g. &--month-length--#{$length}).

mateacademy-ai-mentor · 2026-06-24T14:45:47Z

+$day-step: $day-size + $calendar-gap;
+$weekdays: (
+  mon: 0,


Task description requires writing styles in src/styles/main.scss, but this file links styles/index.scss. You need to point to styles/main.scss (or make main.scss the entry that includes your calendar styles).

mateacademy-ai-mentor · 2026-06-24T14:45:47Z

+    &:hover {
+      cursor: pointer;
+      background-color: #ffbfcb;
+      transform: translateY(-20px);
+      transition: transform 0.5s;


Hover transition currently animates only transform, but the requirement says all changes (including background color) must be animated with duration 0.5s. Extend transition to include background-color as well.

mateacademy-ai-mentor · 2026-06-24T14:45:47Z

+  @for $length from 28 through $calendar-days-count {
+    &--length-#{$length} {


This loop generates &--length-#{$length} modifiers (e.g. calendar--length-31), but HTML uses calendar--month-length--31. Because of this mismatch, the month-length modifier does not control layout as required (checklist item #1).

mateacademy-ai-mentor

Review Summary

I am requesting changes because there is a critical mismatch between the modifier class names in your HTML and those generated in your SCSS, which breaks the requirement that changing start-day and month-length in the code must change the calendar layout [CHECKLIST ITEM #1]. In src/index.html you use modifiers like calendar--start-day-sun and calendar--month-length-31, but in src/styles/main.scss you generate both &--start-day--#{$day} / &--start-day-#{$day} and &--month-length--#{$length} / &--month-length-#{$length}, so only some of the styles ever apply and some selectors (like &:not(.calendar--start-day--sun)) never match your HTML. This inconsistency is a functional blocker, because it means that updating the modifiers on the .calendar element does not reliably move the first day or hide extra days as the task describes.

To fix this, choose one BEM-compatible naming convention and use it consistently for both HTML and SCSS, for example: .calendar--start-day-sun and .calendar--month-length-31 in HTML, and corresponding &--start-day-sun / &--month-length-31 in SCSS (or the double-dash variant, as long as both files match exactly). Then remove the duplicate @each and @for blocks that generate the unused modifier variants, so you have a single implementation of start-day and a single implementation of month-length. After that, verify that changing start-day (e.g. to calendar--start-day-wed) correctly shifts the first day’s column and that changing month-length (e.g. to calendar--month-length-29) hides the appropriate trailing days. Everything else in your layout, hover behavior, and use of SCSS features looks solid, so once you align the class names and clean up duplicates, your solution should fully meet the requirements. Keep going—you’re very close to a complete, correct implementation.

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Important

Fix the issues, commit the changes, and then re-request my review using the Re-request review button² in the Reviewers tab.

Tip

If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag³.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.

Caution

Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.

mateacademy-ai-mentor · 2026-06-25T10:05:27Z

  <body>
-    <h1>Calendar</h1>
+    <div
+      class="calendar calendar--start-day-sun calendar--month-length-31"


The calendar modifiers here use single dashes (calendar--start-day-sun, calendar--month-length-31), but your SCSS defines both &--start-day--#{$day}/&--start-day-#{$day} and &--month-length--#{$length}/&--month-length-#{$length}. This can cause the layout not to change correctly when you modify these classes, which violates checklist item #1: "Changing 'month-lengh' and 'start-day' modifier in the code element reflects in changing calendar layout". Align the modifier naming in SCSS to exactly match the HTML classes you use here and remove the unused variants.

mateacademy-ai-mentor · 2026-06-25T10:05:27Z

+  wed: 2,
+  thu: 3,
+  fri: 4,
+  sat: 5,


The calendar element uses calendar--start-day-sun and calendar--month-length-31, but in SCSS you generate modifiers as &--start-day--#{$day} and &--month-length--#{$length} (double dash before the value). This mismatch violates checklist item #1: "Changing 'month-lengh' and 'start-day' modifier in the code element reflects in changing calendar layout" because changing the HTML modifiers does not trigger the intended styles. Align the class naming convention between HTML and SCSS and keep only one consistent pattern.

mateacademy-ai-mentor · 2026-06-25T10:05:27Z

+  @each $day, $offset in $weekdays {
+    &--start-day-#{$day} {
+      .calendar__day:first-child {
+        margin-left: if($offset > 0, $offset * $day-step, 0);
+      }
+    }
+  }


This second @each block creates &--start-day-#{$day} modifiers, which are redundant and still do not match the HTML pattern (calendar--start-day-sun). Keeping two different modifier naming schemes is confusing and violates the requirement that changing start-day in the code element should affect layout [CHECKLIST ITEM #1]. Choose one correct BEM-compatible naming convention and remove the extra set.

mateacademy-ai-mentor · 2026-06-25T10:05:27Z

+  @for $length from 28 through $calendar-days-count {
+    &--month-length--#{$length} {
+      .calendar__day:nth-child(n + #{$length + 1}) {
+        display: none;
+      }
+    }


You generate &--month-length--#{$length} modifiers here, but the HTML uses calendar--month-length-31 (single dash before 31). Because of this mismatch, changing the month-length class in HTML does not hide days as intended, violating checklist item #1: "Changing 'month-lengh' and 'start-day' modifier in the code element reflects in changing calendar layout". Make the HTML class names and SCSS modifiers consistent and keep only one version.

mateacademy-ai-mentor · 2026-06-25T10:05:27Z

+  @for $length from 28 through $calendar-days-count {
+    &--month-length-#{$length} {
+      .calendar__day:nth-child(n + #{$length + 1}) {
+        display: none;
+      }
+    }
+  }


This second @for block creates &--month-length-#{$length} modifiers, which are redundant relative to the previous block and contribute to inconsistent naming. The task requires a single month-length modifier implementation using @for that directly controls which days are shown [CHECKLIST ITEM #1]. Remove the duplicate block and ensure the remaining one matches the HTML class naming.

mateacademy-ai-mentor

Sorry, the pull request review was unsuccessful for the following reasons:

Warning

No changes were made in the pull request since the last review. Please make sure that you have added files to the pull request and committed the changes.
_{[CODE: NCM]}

If the issue is within your control, please address it.
The next review attempt will automatically launch in about 1 hour.
If you believe this is an error or need assistance, please contact the support team.

mateacademy-ai-mentor

Review Summary

Your solution is approved because it fully meets the functional and technical requirements for the calendar component. You correctly used BEM naming (.calendar, .calendar__day, and block-only modifiers), SCSS variables for all repeated sizes and spacing, and generated both the day numbers and the month-length/start-day modifiers using @for and @each as required. The calendar layout behaves properly when changing calendar--start-day-* and calendar--month-length-* on the .calendar element, satisfying the dynamic layout expectations and [CHECKLIST ITEM #1].

The hover interaction is also well done: the cells change to a pink #FFBFCB background, move up with transform: translateY(-20px), and animate over 0.5s, which matches the specification. Your markup has exactly 31 .calendar__day elements with numbers injected via ::before, and the flex-based 7-column grid with gaps and padding is calculated cleanly via variables. Overall, this is a solid, clean implementation that shows good understanding of SCSS, BEM, and layout calculations; keep up this level of structure and clarity in future tasks.

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Rate AI review example ↩

add task solution

7a7b0f8

mateacademy-ai-mentor suggested changes Jun 24, 2026

View reviewed changes

RomaPleshenko added 4 commits June 24, 2026 18:47

add task solution

d2f2424

add task solution

ac0a036

add task solution

78fc08f

fix

3eab0a0

RomaPleshenko requested a review from mateacademy-ai-mentor June 25, 2026 10:04

mateacademy-ai-mentor suggested changes Jun 25, 2026

View reviewed changes

RomaPleshenko requested a review from mateacademy-ai-mentor June 25, 2026 10:13

mateacademy-ai-mentor reviewed Jun 25, 2026

View reviewed changes

fix all

b7fbeec

RomaPleshenko requested a review from mateacademy-ai-mentor June 25, 2026 10:18

RomaPleshenko added 2 commits June 25, 2026 13:41

fix

cfbbfc4

DONE

8aba36f

mateacademy-ai-mentor approved these changes Jun 25, 2026

View reviewed changes

		@for $length from 28 through $calendar-days-count {
		&--length-#{$length} {

Uh oh!

Conversation

RomaPleshenko commented Jun 24, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants