Develop #3912
Develop #3912
Conversation
There was a problem hiding this comment.
Your implementation is solid and meets the task requirements, but there are a few critical issues to address. The HTML structure for the calendar is correct, but remember to compile your SCSS into CSS before linking it in your HTML. Ensure all variables, mixins, and functions like %arial-fsize, $days-week, $day-color, $day-margin, square, and getCalendarWidth are defined to avoid compilation errors. These improvements will enhance your code's functionality and maintainability. Keep up the good work and use this feedback to refine your skills! 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| rel="stylesheet" | ||
| href="styles/index.scss" | ||
| /> | ||
| <link rel="stylesheet" href="./styles/main.scss"> |
There was a problem hiding this comment.
The link tag is referencing a .scss file. Browsers cannot directly interpret SCSS files. You need to compile the SCSS into a CSS file and then link to the resulting CSS file instead.
| display: flex; | ||
| flex-wrap: wrap; | ||
| margin: 10% auto; | ||
| width: getCalendarWidth($day-box-size, $calendar-paddings); |
There was a problem hiding this comment.
Ensure that the function getCalendarWidth is defined elsewhere in your SCSS files. This function is used to calculate the width of the calendar, and if it's not defined, it will cause an error during compilation.
| width: getCalendarWidth($day-box-size, $calendar-paddings); | ||
|
|
||
| &__day { | ||
| @include square($day-box-size); |
There was a problem hiding this comment.
The mixin square is used here. Make sure this mixin is defined in your SCSS files. If it's missing, it will cause an error during compilation.
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| margin-block-end: $day-margin; |
There was a problem hiding this comment.
The variable $day-margin is used here. Ensure that this variable is defined in your SCSS files. Undefined variables will cause errors during compilation.
| align-items: center; | ||
| margin-block-end: $day-margin; | ||
| margin-inline-end: $day-margin; | ||
| background-color: $day-color; |
There was a problem hiding this comment.
The variable $day-color is used here. Ensure that this variable is defined in your SCSS files. Undefined variables will cause errors during compilation.
| } | ||
| } | ||
|
|
||
| @each $day-week, $num in $days-week { |
There was a problem hiding this comment.
The variable $days-week is used here. Ensure that this variable is defined in your SCSS files. Undefined variables will cause errors during compilation.
| } | ||
|
|
||
| .html { | ||
| @extend %arial-fsize; |
There was a problem hiding this comment.
The @extend %arial-fsize; directive is used here. Ensure that the placeholder selector %arial-fsize is defined in one of your imported SCSS files. If it's not defined, this will cause an error during compilation.
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 MistakesfromBEMlesson theory are checked.Code follows all the [Code Style Rules ❗️](https://mate-academy.github.io/layout_task-guideline/html-css-code-style-rules