Skip to content

add task solution #5458

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
fedorova-daryna wants to merge 3 commits into
base: master
Choose a base branch
from
+115 −2
Open

add task solution #5458

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
43f4a40
add task solution
fedorova-daryna Jun 30, 2026
ffe609d
fix problem
fedorova-daryna Jun 30, 2026
669603a
add final fixed
fedorova-daryna Jul 2, 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"
/>

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 30, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

calendar width is hardcoded with 100px and 1px repeated, and there is no padding included; this violates the requirement to “use properly named variables” and to limit width to “7 columns + 10px paddings” without duplicating px values.

</head>
<body>
<h1>Calendar</h1>
<div class="calendar calendar--start-day-sun calendar--month-length-31">

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 30, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

The calendar uses calendar--start-day-sun by default, but your $start-days map assigns sun: 6, so the generated rule applies a large margin-left to the first day; this violates the requirement that a Sunday-start month should place day 1 in the first column (no extra shift) and that “Monday is the 1st, Friday is the 5th” (your offsets are all shifted by one). Consider remapping offsets so sun has 0 (first column), mon has 1, tue 2, etc., to match the task’s column expectations.

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 2, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

This calendar element correctly uses calendar--start-day-sun and calendar--month-length-31 as default modifiers, but due to the current $start-days map, start-day-sun does not actually place day 1 in the first (Sunday) column, which violates checklist item #1: Changing 'month-lengh' and 'start-day' modifier in the code element reflects in changing calendar layout and the requirement that Sunday is the first column.

<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
Comment on lines +18 to +19

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 30, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

calendar__day uses hardcoded 100px sizes instead of SCSS variables reused in all calculations; this goes against the requirement to avoid repeated hardcoded px values.

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

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 30, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

You only set transition-duration without specifying which properties should be animated; the requirement says “all changes should be animated with duration 0.5s”, so consider using a full transition definition for background and transform.

<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>
Comment on lines +38 to +39

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 30, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

The calendar--start-day-sun modifier shifts the first day by 6 columns, which makes Sunday appear in the last column; for a Sunday-start month, the first day should be in the first column and not shifted, so this doesn’t satisfy the start-day semantics.

<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
Comment on lines +38 to +43

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 30, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Only sun and wed variants are defined for calendar--start-day-*, and they are written manually; the task requires using @each to generate modifiers for mon, tue, wed, thu, fri, sat, and sun.

<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
</div>
Comment on lines +46 to +48

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 30, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

The loop for numbering days with ::before is correct, but the requirement was to add the number in the center of each day via ::before; currently the centering is done by flex on .calendar__day, not using any layout on the pseudo-element itself. Consider ensuring the pseudo-element content is what’s centered.

</body>
</html>
81 changes: 81 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,81 @@
$day-size: 100px;
$gap: 1px;
$calendar-padding: 10px;
$columns: 7;
$hover-color: #ffbfcb;
$day-color: #eee;
$border-color: #000;
$hover-shift: 20px;
$days-width: $day-size * $columns;
$gaps-width: $gap * ($columns - 1);
$padding-width: $calendar-padding * 2;
$calendar-width: $days-width + $gaps-width + $padding-width;

body {
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

.calendar {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
gap: $gap;
width: $calendar-width;
padding: 0 $calendar-padding;
}

.calendar__day {
box-sizing: border-box;
width: $day-size;
height: $day-size;
border: 1px solid $border-color;
background-color: $day-color;
transition:
background-color 0.5s,
transform 0.5s;

&:hover {
cursor: pointer;
background-color: $hover-color;
transform: translateY(-$hover-shift);
}
}

@for $day from 1 through 31 {
.calendar__day:nth-child(#{$day})::before {
content: '#{$day}';
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-family: Arial, sans-serif;
font-size: 30px;
}
}

$start-days: (
mon: 0,
tue: 1,
wed: 2,
thu: 3,
fri: 4,
sat: 5,
sun: 6,
Comment on lines +60 to +67

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 30, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

This start-days map assigns sun: 6, which shifts a Sunday-start month so the first day appears in the 7th column. This violates the requirement that “Set calendar to start from Sunday by default” with Sunday as the first column; sun should have offset 0 (and other days adjusted) so that changing the calendar--start-day-* modifiers moves the first day to the correct column as per the description and checklist item “Changing 'month-lengh' and 'start-day' modifier in the code element reflects in changing calendar layout”.

Comment on lines +60 to +67

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 2, 2026

Copy link
Copy Markdown

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" because the $start-days offsets are not 0-based from Sunday. With sun: 6, the default calendar--start-day-sun will shift the first day into the 7th column instead of the first, so Sunday is not the first column and other days (like Monday and Friday) won’t align to the 2nd and 5th columns as required. Update the map to sun: 0, mon: 1, tue: 2, wed: 3, thu: 4, fri: 5, sat: 6 so the margin-left correctly reflects the starting weekday.

);

@each $day, $offset in $start-days {
.calendar--start-day-#{$day} .calendar__day:first-child {
margin-left: calc((#{$day-size} + #{$gap}) * #{$offset});
}
}

@for $month-length from 28 through 31 {
.calendar--month-length-#{$month-length}
.calendar__day:nth-child(n + #{$month-length + 1}) {
display: none;
}
}
Loading