Created calendar#5474
Conversation
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
I am requesting changes because one core task requirement is still not met, even though the calendar itself works correctly. The instructions explicitly say to put the main styles in src/styles/main.scss and link that file from src/index.html, but your project currently uses src/styles/index.scss and links ./styles/index.scss in the HTML. This is a critical, blocking mismatch with the specification, since file structure and naming are part of the requirements, not just a style preference.
To fix this:
- Rename
src/styles/index.scsstosrc/styles/main.scss(or move the content intomain.scss). - In
src/index.html, update the<link>taghrefto./styles/main.scssinstead of./styles/index.scss.
All other aspects—BEM structure, SCSS usage, modifiers for start day and month length, hover behavior, and generated day numbers—are implemented well, so once you align the stylesheet name and reference, your solution will fully match the task requirements. Keep the rest of your styling logic as is; this is purely a filename and link correction.
✨ 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
| <link | ||
| rel="stylesheet" | ||
| href="styles/index.scss" | ||
| href="./styles/index.scss" |
There was a problem hiding this comment.
The task requires: "Write styles in src/styles/main.scss instead of src/style.css". Here you are linking ./styles/index.scss and your stylesheet file is also named index.scss. To match the requirement, rename the file to main.scss and update this href accordingly.
| margin: 0; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; |
There was a problem hiding this comment.
The task requires: "Write styles in src/styles/main.scss instead of src/style.css". In your project you use index.scss and link to it here. To comply with the requirement, move/rename your styles to main.scss and update the href to ./styles/main.scss.
| $grid-padding: 10px; | ||
| $day-bg: #eee; | ||
| $hover-bg: #ffbfcb; | ||
| $border-color: #000; |
There was a problem hiding this comment.
The task description explicitly requires: "Write styles in src/styles/main.scss instead of src/style.css", but this HTML currently links ./styles/index.scss. You should place your main styles in main.scss and update the href to point to that file to comply with the requirement.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
I am approving your solution because it cleanly satisfies the functional requirements and the checklist items for this task. The calendar is correctly centered with flexbox, uses 31 .calendar__day elements without hardcoded numbers in the HTML, and day numbers are generated via SCSS using ::before and an @for loop. You’ve implemented BEM properly with a calendar block, calendar__day elements, and calendar--start-day-* / calendar--month-length-* modifiers that correctly control the first-day offset and month length. The hover behavior (pointer cursor, pink #FFBFCB background, 20px lift, 0.5s transition) matches the specification and is configured via variables rather than repeated literals. The layout width, gaps, and offsets are computed from SCSS variables, and @each / @for are used appropriately to generate modifiers and rules. No critical or blocking issues are apparent, and changing the modifiers in HTML behaves as required, so your implementation is accepted as complete. Great job using SCSS features and BEM consistently to build a flexible calendar layout.
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
2 participants
No description provided.