Solution of task Calendar

[MannyShussan]

• DEMO LINK
• TEST REPORT LINK

[mateacademy-ai-mentor]

---

Thank you for your hard work on this project! 😊 While your code is mostly on the right track, there are a few critical issues that need to be addressed before we can approve the pull request:

1. File Naming and Location: The SCSS file should be named main.scss and located in the src/styles/ directory as per the task requirements. Please rename and relocate the file accordingly.

2. Use of Variables: It's important to refactor repeated px values into variables for better readability and maintainability. This will help make your code more efficient and easier to update in the future.

3. Specificity Issues: The spaces in your selectors (e.g., &--month-length-#{$number} :nth-child(n + #{$number + 1})) can cause specificity issues. Removing these spaces will ensure that your styles are applied correctly.

4. Checklist Compliance: Ensure that changing the 'month-length' and 'start-day' modifiers reflects correctly in the calendar layout. Double-check that these features work as intended.

Please address these issues to ensure your code meets the core requirements of the task. Once these changes are made, your solution will be in great shape! Keep up the great work, and don't hesitate to reach out if you have any questions. 🚀

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

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

[mateacademy-ai-mentor]

The selector '& :nth-child(#{$number})::before' might cause specificity issues due to the space before ':nth-child'. Consider removing the space to ensure the styles are applied correctly to the intended elements.

[mateacademy-ai-mentor]

Similar to the previous comment, the selector '&--start-day-#{$day} :first-child' has a space that might lead to specificity issues. Remove the space to ensure the styles are applied correctly.

[mateacademy-ai-mentor]

The selector '&--month-length-#{$number} :nth-child(n + #{$number + 1})' also contains a space that might cause specificity issues. Consider removing the space to ensure the styles are applied correctly.

[mateacademy-ai-mentor]

Great effort on your submission! 🎉 While your code doesn't fully meet the task requirements, I'm approving it to help you move forward with your learning journey. Here are some key areas to focus on for improvement:

1. File Naming and Location: Ensure that the SCSS file is named main.scss and is placed in the correct directory as per the task requirements.

2. Stylesheet Link: Update the href attribute in your HTML file to point to styles/main.scss to apply the correct stylesheet.

3. Use of Variables: Refactor repeated px values into variables. This will enhance the maintainability and readability of your code.

4. Specificity Issues: Remove spaces in selectors like &--month-length-#{$number} :nth-child(n + #{$number + 1}) to avoid specificity issues and ensure styles are applied correctly.

5. Checklist Compliance: Make sure that changing the 'month-length' and 'start-day' modifiers reflects changes in the calendar layout as required.

Addressing these issues will greatly improve your code quality. Keep up the hard work and continue learning from these experiences! 🚀

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

[mateacademy-ai-mentor]

Consider refactoring repeated px values into variables for better maintainability and readability. This will help make your code more efficient and easier to update in the future.

[mateacademy-ai-mentor]

Remove the space between &--month-length-#{$number} and :nth-child(n + #{$number + 1}) to avoid specificity issues. This will ensure that your styles are applied correctly.