Develop #3877
Develop #3877
Conversation
There was a problem hiding this comment.
Great job on your work! 🎉 While there are a few minor code style improvements suggested, they don't impact the core functionality of your project. Keep up the good work and consider the feedback for future enhancements.
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| @@ -9,10 +9,45 @@ | |||
| <title>Calendar</title> | |||
| <link | |||
| rel="stylesheet" | |||
| href="styles/index.scss" | |||
| href="styles/index.css" | |||
There was a problem hiding this comment.
The link to the stylesheet should use a relative path starting with './' to indicate that the file is in a subdirectory relative to the current file. Change href="styles/index.css" to href="./styles/index.css".
| <ul class="calendar calendar--start-day-sun calendar--month-length-31"> | ||
| <li class="calendar__day"></li> | ||
| <li class="calendar__day"></li> | ||
| <li class="calendar__day"></li> | ||
| <li class="calendar__day"></li> | ||
| <li class="calendar__day"></li> | ||
| <li class="calendar__day"></li> | ||
| <li class="calendar__day"></li> | ||
| <li class="calendar__day"></li> | ||
| <li class="calendar__day"></li> | ||
| <li class="calendar__day"></li> | ||
| <li class="calendar__day"></li> | ||
| <li class="calendar__day"></li> | ||
| <li class="calendar__day"></li> | ||
| <li class="calendar__day"></li> | ||
| <li class="calendar__day"></li> | ||
| <li class="calendar__day"></li> | ||
| <li class="calendar__day"></li> | ||
| <li class="calendar__day"></li> | ||
| <li class="calendar__day"></li> | ||
| <li class="calendar__day"></li> | ||
| <li class="calendar__day"></li> | ||
| <li class="calendar__day"></li> | ||
| <li class="calendar__day"></li> | ||
| <li class="calendar__day"></li> | ||
| <li class="calendar__day"></li> | ||
| <li class="calendar__day"></li> | ||
| <li class="calendar__day"></li> | ||
| <li class="calendar__day"></li> | ||
| <li class="calendar__day"></li> | ||
| <li class="calendar__day"></li> | ||
| <li class="calendar__day"></li> |
There was a problem hiding this comment.
Consider using a loop or a more dynamic way to generate the list items if possible. This will make the code more maintainable and reduce repetition.
| } | ||
|
|
||
| @for $value from 28 through 31 { | ||
| &--month-length-#{$value} :nth-child(-n + #{$value}) { |
There was a problem hiding this comment.
There is an extra space before ':nth-child(-n + #{$value})'. According to the Code Style Rules ❗️, there should not be a space between the class name and the pseudo-class.
| .calendar__day { | ||
| width: 100px; | ||
| height: 100px; | ||
| border: 1px solid #000; | ||
| background: #eee; | ||
| display: none; |
There was a problem hiding this comment.
The '.calendar__day' class has 'display: none;' which means that the days will not be visible by default. Ensure this is intentional, as it might hide the calendar days unless overridden by other styles.
| .calendar--month-length-28 :nth-child(-n + 28) { | ||
| display: flex; | ||
| } | ||
|
|
||
| .calendar--month-length-29 :nth-child(-n + 29) { | ||
| display: flex; | ||
| } | ||
|
|
||
| .calendar--month-length-30 :nth-child(-n + 30) { | ||
| display: flex; | ||
| } | ||
|
|
||
| .calendar--month-length-31 :nth-child(-n + 31) { | ||
| display: flex; | ||
| } |
There was a problem hiding this comment.
The selectors for '.calendar--month-length-*' classes use ':nth-child(-n + *)' to display certain days. Ensure that these classes are applied correctly in the HTML to reflect the correct number of days for each month.
| .calendar--start-day-tue .calendar__day:first-child { | ||
| margin-left: 101px; | ||
| } | ||
|
|
||
| .calendar--start-day-wed .calendar__day:first-child { | ||
| margin-left: 202px; | ||
| } | ||
|
|
||
| .calendar--start-day-thu .calendar__day:first-child { | ||
| margin-left: 303px; | ||
| } | ||
|
|
||
| .calendar--start-day-fri .calendar__day:first-child { | ||
| margin-left: 404px; | ||
| } | ||
|
|
||
| .calendar--start-day-sat .calendar__day:first-child { | ||
| margin-left: 505px; | ||
| } | ||
|
|
||
| .calendar--start-day-sun .calendar__day:first-child { | ||
| margin-left: 606px; | ||
| } |
There was a problem hiding this comment.
The '.calendar--start-day-*' classes adjust the margin-left for the first calendar day. Verify that these classes are applied correctly to align the first day of the month according to the starting day of the week.
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 ❗️