deploy commit for question

[tkrylataja]

• 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 requirement-level issues that block full completion of the task. First, the styles entry file is not named as required: the HTML currently links to styles/index.scss, but the specification explicitly demands using src/styles/main.scss as the main entry, so you should create main.scss, import your existing partials there, and update the <link> href accordingly. Second, the calendar width and padding calculations use repeated hardcoded values (10px padding and 20px total) directly in calendar.scss/variables.scss, which violates the requirement to avoid repeated literal px values and to use named variables like $calendar-padding in both padding and width: $day-size * 7 + $day-gap * 6 + $calendar-padding * 2. Third, the hover animation currently only sets transition-duration: 0.5s, but the requirement says all hover-related changes must be animated, so you should explicitly set transition: background-color 0.5s, transform 0.5s; (or equivalent) on .calendar__day to cover both the pink background and the upward transform.

Functionally, your calendar layout, BEM structure, @for/@each usage, and start-day/month-length modifiers look very good and match the intended behavior, so once you fix the entry file name, extract the repeated px values into clear SCSS variables, and make the transition fully cover hover changes, your solution will satisfy all the core requirements. Keep going—these are relatively small but important corrections, and you’re very close to a fully compliant 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.

Footnotes

1. Rate AI review example ↩

2. Re-request AI review example ↩

3. Add AI review comments example ↩

[mateacademy-ai-mentor]

This violates the requirement "Don't use hardcoded px values if they are used several times" and "Use properly named variables to make all the calculations more clear". Here 20px and 10px are hardcoded; consider defining padding and total width using variables (e.g. $calendar-padding, computed width using $day-size, $day-gap, and $calendar-padding) instead of literal px values.

[mateacademy-ai-mentor]

Checklist item: "All hover-related changes should be animated with the duration of 0.5s". Currently only transition-duration is set, but no transition-property or shorthand specifying background-color and transform. To ensure all hover-related properties are animated, specify transition: background-color 0.5s, transform 0.5s; (or equivalent) instead of only duration.

[mateacademy-ai-mentor]

The task requires: "Write styles in src/styles/main.scss instead of src/style.css", and your HTML links to styles/index.scss. You should introduce main.scss as the entry file and update this href to point to styles/main.scss, importing your other SCSS there.

[mateacademy-ai-mentor]

The width calculation partially hardcodes 20px (derived from padding), while the description says "Don't use hardcoded px values if they are used several times" and asks for clearer calculations via variables. Consider introducing a $calendar-padding variable and using it both here and in the padding declaration.

[mateacademy-ai-mentor]

padding: 10px; uses a repeated literal value that participates in the width calculation; the requirements ask not to hardcode px values used multiple times and to use variables. Put this 10px into a named variable (e.g. $calendar-padding) and reuse it.

[mateacademy-ai-mentor]

Your width calculation width: $day-size * 7 + $day-gap * 6 + 20px; uses a hardcoded 20px padding total, and you also use padding: 10px; separately. This violates the requirement "Don't use hardcoded px values if they are used several times" and "Use properly named variables to make all the calculations more clear." Consider introducing variables for padding and using them both in width and padding to keep the math explicit and avoid repeated literals.

[Anton-Kuchmasov]

Good job!