add task solution #3891
add task solution #3891
Conversation
thshnhta
commented
Oct 22, 2024
thshnhta
commented
- DEMO LINK
- TEST REPORT LINK
There was a problem hiding this comment.
Great job on implementing the calendar! 🎉 The HTML structure and SCSS logic are well-aligned with the task requirements. Keep up the good work and continue to ensure dynamic adaptability for month lengths and start days.
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| @@ -9,10 +12,42 @@ | |||
| <title>Calendar</title> | |||
| <link | |||
| rel="stylesheet" | |||
| href="styles/index.scss" | |||
| href="./styles/index.scss" | |||
There was a problem hiding this comment.
Ensure that the SCSS file path is correct and that Parcel is configured to handle SCSS files. The task specifies that SCSS can be directly linked to HTML using Parcel.
| <body> | ||
| <h1>Calendar</h1> | ||
| <body class="page__body"> | ||
| <div class="calendar calendar--start-day-sun calendar--month-length-31"> |
There was a problem hiding this comment.
The class 'calendar--start-day-sun' is correctly applied to set the default start day to Sunday. Ensure that this class is dynamically changeable to reflect different start days as per the task requirements.
| <body> | ||
| <h1>Calendar</h1> | ||
| <body class="page__body"> | ||
| <div class="calendar calendar--start-day-sun calendar--month-length-31"> |
There was a problem hiding this comment.
The class 'calendar--month-length-31' is correctly applied to set the default month length to 31 days. Ensure that this class is dynamically changeable to reflect different month lengths as per the task requirements.
| .calendar { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| gap: $gap; |
There was a problem hiding this comment.
The variable '$gap' is used correctly for the gap between calendar days. Ensure that this variable is defined in your 'variables.scss' file to maintain consistency and avoid hardcoding values.
| flex-wrap: wrap; | ||
| gap: $gap; | ||
| padding: 10px; | ||
| width: calc((#{$day-size} * #{$columns}) + (#{$gap} * #{$columns - 1})); |
There was a problem hiding this comment.
The calculation for the calendar width is correct. Ensure that '$day-size' and '$columns' are defined in your 'variables.scss' file to maintain consistency and avoid hardcoding values.
| @each $day in $days { | ||
| $index: list.index($days, $day) - 1; | ||
| &--start-day-#{$day} .calendar__day:nth-child(1) { | ||
| margin-left: $index * ($day-size + 1px); |
There was a problem hiding this comment.
The use of '@each' to create start-day modifiers is correct. Ensure that the '$days' list is defined correctly to cover all days of the week as per the task requirements.
|
|
||
| @for $day from 28 through 31 { | ||
| .calendar--month-length-#{$day} | ||
| .calendar__day:nth-last-child(-n + #{31 - $day}) { |
There was a problem hiding this comment.
The use of '@for' to create month-length modifiers is correct. Ensure that this logic correctly hides the extra days for months with less than 31 days.
| @@ -0,0 +1,4 @@ | |||
| $day-size: 100px; | |||
| $gap: 1px; | |||
| $start-days: (0 'mon', 1 'tue', 2 'wed', 3 'thu', 4 'fri', 5 'sat', 6 'sun'); | |||
There was a problem hiding this comment.
The '$start-days' variable is defined correctly, but ensure that it is used consistently throughout your SCSS files to dynamically apply the start-day modifiers.
