Develop #3893
Develop #3893
Conversation
There was a problem hiding this comment.
It looks like there are a few critical issues that need to be addressed before we can approve this pull request. The most pressing concern is the incorrect stylesheet link in the HTML file, which points to a '.scss' file instead of a '.css' file. This will prevent the styles from being applied correctly in the browser. Additionally, ensure that all necessary SCSS variables are defined to avoid compilation errors. Once these issues are resolved, your calendar layout will be in great shape! Keep up the good work, and don't hesitate to reach out if you need any help! 😊
✨ 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.
| @@ -9,10 +9,42 @@ | |||
| <title>Calendar</title> | |||
| <link | |||
| rel="stylesheet" | |||
| href="styles/index.scss" | |||
| href="./styles/main.scss" | |||
There was a problem hiding this comment.
The href attribute in the link tag is pointing to a '.scss' file. Browsers cannot directly interpret SCSS files; they need to be compiled into CSS first. Ensure that the SCSS file is compiled to a CSS file and update the href to point to the resulting '.css' file.
| .calendar { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| width: ($day-size + $gap) * $col-count - $gap; |
There was a problem hiding this comment.
Ensure that the variables $day-size, $gap, and $col-count are defined elsewhere in your SCSS files. If they are not defined, this will cause a compilation error.
src/styles/blocks/calendar.scss
Outdated
| cursor: pointer; | ||
| background-color: #ffbfcb; | ||
| transform: translate(0, -20px); | ||
| animation-duration: 0.5s; |
There was a problem hiding this comment.
The 'animation-duration' property is declared but not used in any animation. Consider removing it or implementing an animation that utilizes this property.
src/styles/blocks/calendar.scss
Outdated
| background-color: #ffbfcb; | ||
| transform: translate(0, -20px); | ||
| animation-duration: 0.5s; | ||
| transition: 0.5s; |
There was a problem hiding this comment.
The 'transition' property should specify which properties are transitioning. Currently, it is set to '0.5s' without specifying the properties, which might lead to unexpected behavior.
| } | ||
| } | ||
|
|
||
| @for $day from 28 through $month-length { |
There was a problem hiding this comment.
Ensure that the variable $month-length is defined and correctly set to the number of days in the current month. This is crucial for the correct functioning of the calendar layout.
There was a problem hiding this comment.
Great job on structuring your HTML and SCSS files! 🎉 While there are a few critical issues, such as the incorrect stylesheet link and potential SCSS variable problems, your use of SCSS features is commendable. Please address these issues to enhance your code further. Keep up the good work and continue learning from these experiences!
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| @@ -9,10 +9,42 @@ | |||
| <title>Calendar</title> | |||
| <link | |||
| rel="stylesheet" | |||
| href="styles/index.scss" | |||
| href="./styles/main.scss" | |||
There was a problem hiding this comment.
The stylesheet link is pointing to a '.scss' file. HTML cannot directly use SCSS files; they need to be compiled to CSS first. Ensure the stylesheet is linked to a '.css' file instead.
| .calendar { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| width: ($day-size + $gap) * $col-count - $gap; |
There was a problem hiding this comment.
Ensure that the variables $day-size, $gap, $col-count, and $padding are defined elsewhere in your SCSS files. If they are not defined, this will cause a compilation error.
| transition-duration: 0.5s; | ||
| } | ||
|
|
||
| @for $number from 1 through $month-length { |
There was a problem hiding this comment.
Ensure that the variable $month-length is defined and holds the correct number of days for the month you are styling. Otherwise, the loop will not work as intended.
| } | ||
| } | ||
|
|
||
| @each $day, $index in $week-day { |
There was a problem hiding this comment.
Ensure that the variable $week-day is defined as a list or map of days. This is necessary for the @each loop to function correctly.
DEMO LINK
TEST REPORT LINKnpm run lint
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 ❗️