Skip to content

add task solution #5448

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
diiyavol wants to merge 9 commits into
base: master
Choose a base branch
from
Open

add task solution #5448

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9c272da
add task solution
diiyavol Jun 25, 2026
505ce61
add task solution2
diiyavol Jun 25, 2026
a8515e8
add task solution3
diiyavol Jun 25, 2026
71dc4ab
add task solution4
diiyavol Jun 25, 2026
7f66f2e
add task solution5
diiyavol Jun 25, 2026
ea4395a
add solution6
diiyavol Jun 25, 2026
29e52f0
add solution7
diiyavol Jun 26, 2026
82b1337
add solution8
diiyavol Jun 26, 2026
c310d2a
add solution9
diiyavol Jun 26, 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
38 changes: 35 additions & 3 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"
/>
</head>
<body>
<h1>Calendar</h1>
<body class="main">
Comment on lines 13 to +15

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 25, 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 width must be calculated as exactly 7 columns plus 10px paddings using SCSS variables, but here you hardcode max-width: 800px and don’t base it on the cell size, border, gap, and padding variables as required ("Don't use hardcoded px values if they are used several times" and "Use properly named variables to make all the calculations more clear").

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

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 25, 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 task requires the calendar width to be "exactly 7 columns + 10px paddings" and asks not to reuse hardcoded px values. max-width: $calendar__count * ($day__width + $paddings); adds $paddings per column instead of a single padding value for the whole block, so changing $day__width or $days__gap will not correctly keep "7 columns + 10px paddings". Consider computing width from 7 * $day__width, 6 * $days__gap, and a single horizontal padding value as per the description.

<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
<div class="calendar__day"></div>
Comment on lines +25 to +26

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 25, 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.

With padding-left: $paddings; only, the calendar gets padding on one side, while the requirement talks about 10px paddings (plural). Together with the current max-width formula, this prevents the layout from truly reflecting "exactly 7 columns + 10px paddings". Consider applying padding symmetrically and updating the width calculation so that modifiers and size variables correctly control the layout as required by checklist item "Changing 'month-lengh' and 'start-day' modifier in the code element reflects in changing calendar layout".

<div class="calendar__day"></div>
<div class="calendar__day"></div>
Comment on lines +22 to +28

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 25, 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 task states all hover changes (transform and background color) must be animated with duration 0.5s, but this transition only animates transform and not background-color, and uses 500ms without including background-color. Consider adding background-color to the transition and ensuring the duration matches 0.5s.

<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>
3 changes: 0 additions & 3 deletions src/styles/index.scss
View file
Open in desktop

This file was deleted.

83 changes: 83 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,83 @@
$day__width: 100px;
$body__height: 100vh;
$days__gap: 1px;
$paddings: 10px;

* {
box-sizing: border-box;
}

body {
display: flex;
justify-content: center;
align-items: center;
height: $body__height;
margin: 0;
}

.calendar {
display: inline-flex;
max-width: 7 * $day__width + 6 * $days__gap + 2 * $paddings;
flex-wrap: wrap;
align-self: center;
gap: $days__gap;
padding-left: $paddings;
padding-right: $paddings;
}

.calendar__day {
width: $day__width;
height: $day__width;
background-color: #eee;
border: 1px solid black;
transition:
transform 0.5s,
background-color 0.5s;
}

.calendar__day:hover {
cursor: pointer;
transform: translateY(-20px);
background-color: #ffbfcb;
}

@for $i from 1 through 31 {
.calendar__day:nth-child(#{$i})::before {
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
content: '#{$i}';
color: black;

display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
}

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

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

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