calendar #4013

maponomarenko · 2024-12-16T13:01:41Z

❗️ Copy this Checklist to the Pull Request description after links, and put - [x] before each point after you checked it.

[x ] Changing 'month-lengh' and 'start-day' modifier in the code element
reflects in changing calendar layout
[x ] Each day has no modifiers, only class (eg. calendar__day)
[ x] All Typical Mistakes from BEM lesson theory are checked.
[ x] Code follows all the Code Style Rules ❗️

mateacademy-ai-mentor

Thank you for your hard work on this project! 😊 There are a few critical issues that need to be addressed before we can approve the pull request:

SCSS Compilation: The href attribute in your HTML is linking directly to an SCSS file. Browsers cannot interpret SCSS files directly, so you need to compile your SCSS into a CSS file and link to that CSS file instead.
SCSS Variables: Ensure that all SCSS variables such as $calendar-width, $gap, $day-size, $day-color, $day-border, $font-size, and $weekdays are defined or imported correctly. Missing definitions can lead to styling issues.
Month-Length Modifier: The month-length modifier is not visible in the provided SCSS code. This needs to be implemented to set the last day to show using nth-child.

Once these issues are resolved, your code will meet the task requirements. Keep up the great work, and feel free to reach out if you have any questions! 🚀

✨ 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.

mateacademy-ai-mentor · 2024-12-16T13:03:09Z

src/index.html

@@ -12,7 +12,41 @@
      href="styles/index.scss"


The href attribute is linking to a SCSS file (styles/index.scss). Browsers cannot directly interpret SCSS files. You need to compile the SCSS into a CSS file and link to the resulting CSS file instead.

mateacademy-ai-mentor · 2024-12-16T13:03:09Z

src/styles/blocks/calendar.scss

+.calendar {
+    display: flex;
+    flex-wrap: wrap;
+    width: $calendar-width;


Ensure that the variable $calendar-width is defined. If it's not defined in this file, it should be imported from another SCSS file.

mateacademy-ai-mentor · 2024-12-16T13:03:09Z

src/styles/blocks/calendar.scss

+    width: $calendar-width;
+    padding: 0;
+    margin: auto;
+    gap: $gap;


Ensure that the variable $gap is defined. If it's not defined in this file, it should be imported from another SCSS file.

mateacademy-ai-mentor · 2024-12-16T13:03:09Z

src/styles/blocks/calendar.scss

+
+    &__day {
+        box-sizing: border-box;
+        width: $day-size;


Ensure that the variable $day-size is defined. If it's not defined in this file, it should be imported from another SCSS file.

mateacademy-ai-mentor · 2024-12-16T13:03:09Z

src/styles/blocks/calendar.scss

+        box-sizing: border-box;
+        width: $day-size;
+        height: $day-size;
+        background-color: $day-color;


Ensure that the variable $day-color is defined. If it's not defined in this file, it should be imported from another SCSS file.

mateacademy-ai-mentor · 2024-12-16T13:03:09Z

src/styles/blocks/calendar.scss

+        width: $day-size;
+        height: $day-size;
+        background-color: $day-color;
+        border: $day-border;


Ensure that the variable $day-border is defined. If it's not defined in this file, it should be imported from another SCSS file.

mateacademy-ai-mentor · 2024-12-16T13:03:09Z

src/styles/blocks/calendar.scss

+        justify-content: center;
+        align-items: center;
+        font-family: Arial, sans-serif;
+        font-size: $font-size;


Ensure that the variable $font-size is defined. If it's not defined in this file, it should be imported from another SCSS file.

mateacademy-ai-mentor · 2024-12-16T13:03:09Z

src/styles/blocks/calendar.scss

+        }
+    }
+
+    @each $day, $number in $weekdays {


Ensure that the variable $weekdays is defined. If it's not defined in this file, it should be imported from another SCSS file.

mateacademy-ai-mentor

Great job on your submission! 🎉 Your code meets the task requirements and constraints, and you've done well to address previous issues. However, there are a few critical points to keep in mind for future improvements:

SCSS Compilation: Ensure that your SCSS is compiled into CSS before linking it in your HTML. This is crucial as browsers cannot interpret SCSS files directly.
SCSS Variables: While your variables.scss file defines necessary variables, make sure they are correctly imported into your main SCSS file to avoid undefined variable issues.
Code Structure: Your implementation follows the BEM methodology and the HTML structure is well-organized, which is excellent.

Remember, addressing these issues will enhance the functionality and maintainability of your code. 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! ✨

mateacademy-ai-mentor · 2024-12-16T13:51:39Z

src/index.html

@@ -12,7 +12,41 @@
      href="styles/index.scss"
    />


The href attribute is linking to an SCSS file (styles/index.scss). Browsers cannot interpret SCSS files directly. You need to compile your SCSS into a CSS file and link to that CSS file instead.

mateacademy-ai-mentor · 2024-12-16T13:51:39Z

src/styles/blocks/calendar.scss

+.calendar {
+    display: flex;
+    flex-wrap: wrap;
+    width: $calendar-width;


The variable $calendar-width is used here but is not defined in this file. Ensure that it is defined or imported from another file.

mateacademy-ai-mentor · 2024-12-16T13:51:40Z

src/styles/blocks/calendar.scss

+    width: $calendar-width;
+    padding: 0;
+    margin: auto;
+    gap: $gap;


The variable $gap is used here but is not defined in this file. Ensure that it is defined or imported from another file.

mateacademy-ai-mentor · 2024-12-16T13:51:40Z

src/styles/blocks/calendar.scss

+
+    &__day {
+        box-sizing: border-box;
+        width: $day-size;


The variable $day-size is used here but is not defined in this file. Ensure that it is defined or imported from another file.

mateacademy-ai-mentor · 2024-12-16T13:51:40Z

src/styles/blocks/calendar.scss

+        box-sizing: border-box;
+        width: $day-size;
+        height: $day-size;
+        background-color: $day-color;


The variable $day-color is used here but is not defined in this file. Ensure that it is defined or imported from another file.

mateacademy-ai-mentor · 2024-12-16T13:51:40Z

src/styles/blocks/calendar.scss

+        width: $day-size;
+        height: $day-size;
+        background-color: $day-color;
+        border: $day-border;


The variable $day-border is used here but is not defined in this file. Ensure that it is defined or imported from another file.

mateacademy-ai-mentor · 2024-12-16T13:51:40Z

src/styles/blocks/calendar.scss

+        justify-content: center;
+        align-items: center;
+        font-family: Arial, sans-serif;
+        font-size: $font-size;


The variable $font-size is used here but is not defined in this file. Ensure that it is defined or imported from another file.

mateacademy-ai-mentor · 2024-12-16T13:51:40Z

src/styles/blocks/calendar.scss

+        }
+    }
+
+    @each $day, $number in $weekdays {


The variable $weekdays is used here but is not defined in this file. Ensure that it is defined or imported from another file.

added first iteratiton of task

68e1cae

mateacademy-ai-mentor suggested changes Dec 16, 2024

View reviewed changes

added correcitons

a8f8c46

maponomarenko requested a review from mateacademy-ai-mentor December 16, 2024 13:50

mateacademy-ai-mentor approved these changes Dec 16, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

calendar #4013

calendar #4013

maponomarenko commented Dec 16, 2024

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Dec 16, 2024

mateacademy-ai-mentor Dec 16, 2024

mateacademy-ai-mentor Dec 16, 2024

mateacademy-ai-mentor Dec 16, 2024

mateacademy-ai-mentor Dec 16, 2024

mateacademy-ai-mentor Dec 16, 2024

mateacademy-ai-mentor Dec 16, 2024

mateacademy-ai-mentor Dec 16, 2024

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Dec 16, 2024

mateacademy-ai-mentor Dec 16, 2024

mateacademy-ai-mentor Dec 16, 2024

mateacademy-ai-mentor Dec 16, 2024

mateacademy-ai-mentor Dec 16, 2024

mateacademy-ai-mentor Dec 16, 2024

mateacademy-ai-mentor Dec 16, 2024

mateacademy-ai-mentor Dec 16, 2024

calendar #4013

Are you sure you want to change the base?

calendar #4013

Conversation

maponomarenko commented Dec 16, 2024

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment