-
Notifications
You must be signed in to change notification settings - Fork 3.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
develop #3954
base: master
Are you sure you want to change the base?
develop #3954
Conversation
PavloYurievich
commented
Nov 18, 2024
- DEMO LINK
- TEST REPORT LINK
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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. The use of a non-standard <container>
tag in your HTML is a significant issue, as it affects the core functionality and compatibility of your code across different browsers. Additionally, the SCSS file should be renamed to main.scss
as per the task requirements, and you should define SCSS variables for repeated pixel values to improve clarity and maintainability. Please make these changes, and feel free to reach out if you need any assistance! Keep up the great work! 🚀
✨ 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.
src/index.html
Outdated
<container | ||
class="calendar calendar--start-day-sun calendar--month-length-31" | ||
> | ||
<div class="calendar__day"></div> | ||
<div class="calendar__day"></div> | ||
<div class="calendar__day"></div> | ||
<div class="calendar__day"></div> | ||
<div class="calendar__day"></div> | ||
<div class="calendar__day"></div> | ||
<div class="calendar__day"></div> | ||
<div class="calendar__day"></div> | ||
<div class="calendar__day"></div> | ||
<div class="calendar__day"></div> | ||
<div class="calendar__day"></div> | ||
<div class="calendar__day"></div> | ||
<div class="calendar__day"></div> | ||
<div class="calendar__day"></div> | ||
<div class="calendar__day"></div> | ||
<div class="calendar__day"></div> | ||
<div class="calendar__day"></div> | ||
<div class="calendar__day"></div> | ||
<div class="calendar__day"></div> | ||
<div class="calendar__day"></div> | ||
<div class="calendar__day"></div> | ||
<div class="calendar__day"></div> | ||
<div class="calendar__day"></div> | ||
<div class="calendar__day"></div> | ||
<div class="calendar__day"></div> | ||
<div class="calendar__day"></div> | ||
<div class="calendar__day"></div> | ||
<div class="calendar__day"></div> | ||
<div class="calendar__day"></div> | ||
<div class="calendar__day"></div> | ||
<div class="calendar__day"></div> | ||
</container> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The <container>
tag is not a standard HTML element. Consider replacing it with a <div>
or <section>
tag to ensure compatibility with all browsers.
src/styles/index.scss
Outdated
|
||
@each $day, $dayCount in $days { | ||
&--start-day-#{$day} :first-child { | ||
margin-left: 101px * $dayCount; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The margin-left
calculation uses 101px * $dayCount
. Ensure that this calculation aligns with your intended layout, as incorrect values might cause misalignment in the calendar layout.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great job on addressing the previous issues! 🎉 Your HTML and SCSS files are well-structured and meet the task requirements. However, there are a few areas for improvement:
- SCSS Compilation: Ensure your SCSS file is compiled to CSS, as browsers cannot interpret SCSS directly. Update the HTML link to point to the compiled CSS file.
- SCSS Variables: Consider defining SCSS variables for repeated values like
101px
,100px
, and706px
to enhance maintainability and readability.
These adjustments will help you maintain your code more effectively. 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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The href
attribute is pointing to a .scss
file. Browsers cannot directly interpret SCSS files; they need to be compiled into CSS first. Please compile your SCSS file to a CSS file and update this link to point to the resulting CSS file.
display: flex; | ||
flex-wrap: wrap; | ||
gap: 1px; | ||
width: 706px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Consider defining a SCSS variable for the width value 706px
to improve maintainability and readability. This will make it easier to update the value in the future if needed.
height: 100px; | ||
width: 100px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The height and width values 100px
are repeated. Consider defining SCSS variables for these values to improve maintainability and readability.
|
||
@each $day, $dayCount in $days { | ||
&--start-day-#{$day} :first-child { | ||
margin-left: 101px * $dayCount; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The margin-left calculation uses a hardcoded value 101px
. Consider defining a SCSS variable for this value to improve maintainability and readability.