Calendar #3989
Calendar #3989
Conversation
TaniaP26
commented
Dec 3, 2024
TaniaP26
commented
- DEMO LINK
- TEST REPORT LINK
There was a problem hiding this comment.
Great job on meeting the task requirements! 🎉 The code is well-structured and follows the specified guidelines. Just make sure to update the stylesheet link to point to the compiled .css file instead of the .scss file to ensure proper styling in the browser. Keep up the excellent work! 😊
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| @@ -9,10 +9,43 @@ | |||
| <title>Calendar</title> | |||
| <link | |||
| rel="stylesheet" | |||
| href="styles/index.scss" | |||
| href="styles/main.scss" | |||
There was a problem hiding this comment.
The href attribute is linking to a .scss file (styles/main.scss). Browsers cannot directly interpret SCSS files. You should link to the compiled CSS file instead, such as styles/main.css.
| @@ -0,0 +1,61 @@ | |||
| @import './utils/variables'; | |||
There was a problem hiding this comment.
Ensure that the file ./utils/variables exists and contains the necessary variable definitions, such as $width-calendar, $width-square, $week-day, and $month-length. Without these definitions, the SCSS will not compile correctly.
| display: flex; | ||
| flex-wrap: wrap; | ||
| gap: 1px; | ||
| width: $width-calendar; |
There was a problem hiding this comment.
The variable $width-calendar is used here. Make sure it is defined in the imported variables file, otherwise, this will cause a compilation error.
| width: $width-calendar; | ||
| margin: auto; | ||
|
|
||
| @each $name, $number in $week-day { |
There was a problem hiding this comment.
The loop uses $week-day. Ensure that $week-day is a map or list defined in the variables file, as it is used to dynamically generate styles.
| text-align: center; | ||
| line-height: $width-square; | ||
|
|
||
| @for $i from 1 through $month-length { |
There was a problem hiding this comment.
The loop uses $month-length. Ensure that $month-length is defined in the variables file, as it is used to dynamically generate styles for each day of the month.
| @@ -0,0 +1,7 @@ | |||
| .calendar { | |||
| @each $name, $number in $week-day { | |||
There was a problem hiding this comment.
Ensure that the variable $week-day is defined and accessible in this context. It should be a map or list that provides the necessary data for the @each loop to function correctly.
| .calendar { | ||
| @each $name, $number in $week-day { | ||
| &--start-day--#{name} { | ||
| margin-left: (($number - 1) * $width-square) + ($number - 1); |
There was a problem hiding this comment.
The variable $width-square is used here. Make sure it is defined and accessible in this context, otherwise, this will cause a compilation error.
