Conversation
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Good work on this task. The SCSS structure is solid and most requirements are met. However, I'm requesting changes for two issues that prevent the solution from being complete:
- Incorrect Filename: The task explicitly requires the main stylesheet to be
src/styles/main.scss, but it is currently namedindex.scss. Please rename the file and update the corresponding<link>inindex.html. - Incomplete Feature: The
month-lengthmodifier is required for months with 28, 29, 30, and 31 days. Your@forloop insrc/styles/utils/mixins.scssonly generates styles up to 30 days, leaving the 31-day case unimplemented.
After you fix these, your solution should be ready for approval!
✨ Please rate this review in the Platform's notification center1. 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 button2 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 tag3.
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
src/styles/calendar.scss
Outdated
| &:hover { | ||
| background-color: $hover-color; | ||
| transform: translateY(-20px); | ||
| cursor: pointer; |
There was a problem hiding this comment.
This property is already set for the .calendar__day element on line 19. It's redundant to declare it again in the :hover state.
| @import './utils/variables'; | ||
| @import './utils/mixins'; | ||
| @import './calendar'; |
There was a problem hiding this comment.
The task description requires the main stylesheet to be named main.scss. Please rename this file to main.scss and update the <link> in index.html to point to the new filename.
src/styles/utils/mixins.scss
Outdated
| } | ||
| } | ||
|
|
||
| @for $len from 28 through 30 { |
There was a problem hiding this comment.
According to the task description, you need to add a month-length modifier for the calendar with values 28, 29, 30, and 31. This @for loop only iterates from 28 to 30, which means the modifier for a 31-day month is never generated.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Your solution is approved because it fulfills all core task requirements and the calendar works as specified. The layout is correctly centered, the calendar width and 7-column grid are computed from SCSS variables, and each day is a 100px grey square with a 1px border and proper box-sizing. Day numbers are generated via ::before and @for from 1 to 31 using the required font, and the start-day and month-length modifiers correctly adjust the first-day offset and hide extra days for 28–31 day months. Hover behavior (pointer cursor, background color change to #FFBFCB, upward translate, and 0.5s transition) matches the specification.
The Backstop visual tests show small pixel-level differences, but there is no evidence that your HTML or SCSS is functionally incorrect for this task; these diffs are likely due to environment or rendering nuances rather than broken logic. If you want to polish further, you could inspect the Backstop report locally and tweak fonts or timing to reduce those diffs, but this is not a blocker. Overall, you organized your SCSS well with variables, mixins, and BEM naming, which is a solid implementation—nice work.
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
2 participants
reflects in changing calendar layout
Typical MistakesfromBEMlesson theory are checked.