Skip to content

add solution #5204

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.

Sign up for GitHub

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

Open
Alena-88 wants to merge 2 commits into
base: master
Choose a base branch
from
+123 −7
Open

add solution #5204

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cfcf4ba
add solution
Alena-88 Feb 19, 2026
4f1ff70
add-readme
Alena-88 Feb 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 34 additions & 2 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,42 @@
<title>Calendar</title>
<link
rel="stylesheet"
href="styles/index.scss"
href="styles/main.scss"
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This violates the implementation requirement: "Write styles in src/styles/main.scss instead of src/style.css" — the link href points to "styles/main.scss". Update the stylesheet link to the required path, e.g. href="src/styles/main.scss", so the project uses the correct SCSS file.

Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This violates the requirement: "Write styles in src/styles/main.scss instead of src/style.css." The currently has href="styles/main.scss". Change it to href="src/styles/main.scss" so the page uses the correct stylesheet file.

/>
</head>
<body>
<h1>Calendar</h1>
<div 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>
</div>
</body>
</html>
52 changes: 52 additions & 0 deletions src/styles/calendar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
.calendar {
display: flex;
flex-wrap: wrap;
gap: $gap;
padding: $padding;
width: calc($cell-size * $columns + $gap * ($columns - 1) + $padding * 2);
box-sizing: border-box;

&__day {
flex: 0 0 $cell-size;
width: $cell-size;
height: $cell-size;
background-color: $bg-color;
border: 1px solid $color-border-day;
display: flex;
justify-content: center;
align-items: center;
font-family: $font-family;
font-size: $font-size;
transition:
background-color 0.5s,
transform 0.5s;
}

&__day:hover {
cursor: pointer;
background-color: $bg-color-hover;
transform: translateY(-20px);
}

@for $i from 1 through 31 {
&__day:nth-child(#{$i})::before {
content: '#{$i}';
}
}

@for $i from 28 through 30 {
&--month-length-#{$i} {
.calendar__day:nth-child(n + #{$i + 1}) {
display: none;
}
}
}
Comment on lines +37 to +43
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This violates checklist item #1: 'Changing month-lengh and start-day modifier in the code element reflects in changing calendar layout'. The @for loop generating month-length modifiers only runs from 28 through 30, so there is no generated .calendar--month-length-31 rule. Your HTML uses calendar--month-length-31, so that modifier currently has no effect. Suggestion: change the loop to include 31 (e.g. @for $i from 28 through 31) so all required month-length modifiers are generated.

Comment on lines +37 to +43
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This @for loop only generates .calendar--month-length-28, -29, and -30. The task requires month-length modifiers for 28, 29, 30 and 31: "Add a modifier month-length for the calendar with values 28, 29, 30 and 31". Update the loop to include 31, e.g. @for $i from 28 through 31 { ... }, so .calendar--month-length-31 is created and the HTML modifier works.


@each $day, $index in $days {
&--start-day-#{$day} {
.calendar__day:first-child {
margin-left: ($cell-size + $gap) * $index;
}
}
}
Comment on lines +45 to +51
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This also violates checklist item #1: although you used @each $day, $index in $days to create start-day modifiers, the numeric mapping in $days (see variables.scss) is incorrect for a Sunday-first grid. In src/styles/variables.scss you have 'mon': 0, ... 'sun': 6 which will place --start-day-mon at the leftmost column (index 0) rather than Monday being the second column. Because your margin-left uses ($cell-size + $gap) * $index, the mapping should reflect columns where Sunday = 0, Monday = 1, ..., Saturday = 6 (or adjust the index arithmetic). Suggestion: either change $days to 'sun': 0, 'mon': 1, ... 'sat': 6 in variables.scss or adapt the margin calculation accordingly so Monday becomes column 1 and Friday column 5.

Comment on lines +45 to +51
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The @each relies on the $days map to compute margin-left offsets for .calendar--start-day-*. The task requires correct placement so that Monday is the 1st and Friday is the 5th: "Implement start-day modifier for the calendar with mon, tue, wed, thu, fri, sat and sun values" and "The month should start at the correct column (Monday is the 1st, Friday is the 5th)". Ensure the $days map (in variables.scss) uses a Sunday-first offset mapping (for example 'sun': 0, 'mon': 1, 'tue': 2, 'wed': 3, 'thu': 4, 'fri': 5, 'sat': 6) so .calendar--start-day-* places the 1st under the correct weekday.

}
3 changes: 0 additions & 3 deletions src/styles/index.scss
View file
Open in desktop

This file was deleted.

16 changes: 16 additions & 0 deletions src/styles/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
@import './variables';
@import './calendar';
Comment on lines +1 to +2
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The calendar import is present, but the weekday mapping used by the start-day modifiers is incorrect. In src/styles/variables.scss the $days map sets 'mon': 0 … 'sun': 6, and calendar.scss uses that map to compute margin-left for the first day. That mapping places Monday in the very first column (index 0) instead of the Monday column when the grid starts from Sunday. This causes .calendar--start-day-* modifiers to put the 1st on the wrong column and therefore does not satisfy the requirement that the month starts at the correct column (e.g. Monday should place the 1st under Monday). Suggest remapping so 'sun': 0, 'mon': 1, 'tue': 2, … 'sat': 6. See variables.scss and calendar.scss for the current implementation: . This also means changing the mapping is required so that changing the start-day modifier in the HTML (e.g. calendar--start-day-mon) reflects the correct layout, which is part of the checklist item: "Changing 'month-lengh' and 'start-day' modifier in the code element reflects in changing calendar layout".

Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

calendar.scss generates month-length modifiers with @for $i from 28 through 30 which creates rules for 28, 29 and 30 only. The task explicitly requires modifiers for 28, 29, 30 and 31 (use @for). The missing 31 value means there is no explicit .calendar--month-length-31 rule generated by the loop (the HTML currently uses calendar--month-length-31 by default). Update the loop to include 31 (for example @for $i from 28 through 31) so the code fulfills the requirement and so that changing the month-length modifier in the HTML changes which days are shown. This violates checklist item: "Changing 'month-lengh' and 'start-day' modifier in the code element reflects in changing calendar layout". See calendar.scss: .


*,
*::before,
*::after {
box-sizing: border-box;
}

body {
display: flex;
justify-content: center;
align-items: center;
height: $body-height;
margin: 0;
}
19 changes: 19 additions & 0 deletions src/styles/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
$cell-size: 100px;
$body-height: 100vh;
$font-family: Arial, sans-serif;
$gap: 1px;
$columns: 7;
$padding: 10px;
$bg-color: #eee;
$bg-color-hover: #ffbfcb;
$color-border-day: #000;
$font-size: 30px;
$days: (
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This does not follow the Code Style requirement to "Use properly named variables to make all the calculations more clear." The name $days is ambiguous — rename it to something descriptive (for example $start-day-offsets or $start-day-map) so the intent is clear when used in the SCSS that generates margin-left for the first day.

'mon': 0,
'tue': 1,
'wed': 2,
'thu': 3,
'fri': 4,
'sat': 5,
'sun': 6,
Comment on lines +11 to +18
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This violates checklist item: "- [ ] Changing 'month-lengh' and 'start-day' modifier in the code element reflects in changing calendar layout" — the $days map assigns 'mon': 0 ... 'sun': 6, which is inverted for a Sunday-first grid and will place the 1st on the wrong weekday. Update the map so offsets match a Sunday-first grid, for example:

$start-day-offsets: (
'sun': 0,
'mon': 1,
'tue': 2,
'wed': 3,
'thu': 4,
'fri': 5,
'sat': 6,
);

(Your current map in src/styles/variables.scss is the source of the problem: .)

);
Comment on lines +11 to +19
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This violates checklist item #1: 'Changing month-lengh and start-day modifier in the code element reflects in changing calendar layout.' The $days map currently has 'mon': 0 ... 'sun': 6 which is inverted for a calendar that starts from Sunday. For a Sunday-first calendar the offsets should be: 'sun': 0, 'mon': 1, 'tue': 2, 'wed': 3, 'thu': 4, 'fri': 5, 'sat': 6. Consider replacing the map with e.g.:

$start-day-offsets: (
'sun': 0,
'mon': 1,
'tue': 2,
'wed': 3,
'thu': 4,
'fri': 5,
'sat': 6
);