Skip to content

add markup #5446

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

add markup #5446

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b57be50
add markup
Kiofd Jun 24, 2026
31f825a
add solution
Kiofd Jun 25, 2026
bf04ec6
add solution
Kiofd Jun 25, 2026
7d7c979
add solution
Kiofd Jun 25, 2026
f725069
add solution
Kiofd Jun 25, 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 24, 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.

width: $colums * $day-size + 6 * $gap; does not implement the spec: it doesn’t include the 10px paddings on both sides and $colums is a misspelling; revise this to use correctly named variables and include padding in the width calculation per the task requirements.

/>
</head>

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 24, 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__column is defined here but never used in your HTML; this extra element complicates the BEM structure and is unnecessary for the required layout of 31 .calendar__day cells inside .calendar. Consider removing or reworking it to match the markup.

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

@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 requirement says "limit its width to exactly 7 columns + 10px paddings" and to use variables for these calculations. Here your width: $colums * $day-size + 6 * $gap; only accounts for 6 gaps and ignores $day-padding, so the resulting width does not match "7 columns + 10px paddings". Consider including both horizontal paddings and the correct number of gaps via variables so the total width is computed exactly as specified.

@Kiofd Kiofd Jun 25, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

i use additional paddings and do not add this padings to width

@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 is currently computed as width: $columns * $day-size + calc(7 - 1) * $gap;, which only includes the day columns and 6 gaps. The description requires the width to be "exactly 7 columns + 10px paddings", and variables must be used for repeated px values. This violates that requirement because the horizontal paddings ($day-padding on left and right) are not included in the width calculation. Consider updating the formula to add both left and right padding (via $day-padding) so the total width becomes 7 columns + 6 gaps + 2 * padding.

This is the same issue noted in the previous review and remains blocking until fixed.

<div class="calendar__day"></div>

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 24, 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 define the basic dimensions and styles of the day cell, but you don’t add any hover effects (pointer cursor, pink #FFBFCB background, 20px upward transform with 0.5s animation) that the task specifies.

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

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 24, 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 @for loop is nested under &__day and targets &__column:nth-child(-n + #{$i})::before, but there is no .calendar__column in your HTML; this means day numbers are never generated. You should instead target .calendar__day:nth-child(#{$i})::before to render numbers 1–31 using ::before as required.

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

68 changes: 68 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,68 @@
@import './variables';

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

.calendar {
display: flex;
gap: $gap;
flex-wrap: wrap;

box-sizing: border-box;

padding: $day-padding;

width: $columns * $day-size + calc(7 - 1) * $gap + (2 * $day-padding);

font-family: Arial, Helvetica, sans-serif;
font-size: 30px;

&__day {
height: $day-size;
width: $day-size;

padding: $day-padding;

box-sizing: border-box;
border: $border;
background-color: $day-background-color;

display: flex;
align-items: center;
justify-content: center;

transition-duration: 0.5s;

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

@each $margin, $day in $start-days {
&--start-day-#{$day} &__day:first-child {
margin-left: $margin;
}
}

@for $day from 1 through $days-in-month {
& &__day:nth-child(#{$day}) {
&::before {
content: '#{$day}';
}
}
}

@for $length from 28 through 31 {
&--month-length-#{$length} &__day:nth-child(n + #{$length + 1}) {
display: none;
}
}
}
17 changes: 17 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,17 @@
$gap: 1px;
$border: 1px solid black;
$day-background-color: #eee;

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 24, 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 container is not centered horizontally and vertically in the viewport as required; you need additional layout styles (e.g. on body or a wrapper) to satisfy the “Display a calendar in the middle of the screen” requirement.

$day-size: 100px;
$columns: 7;
$day-padding: 10px;
$days-in-month: 31;
$hover-day-color: #ffbfcb;
$start-days: (
0 'mon',
($day-size + $gap) 'tue',
(($day-size + $gap) * 2) 'wed',
(($day-size + $gap) * 3) 'thu',
(($day-size + $gap) * 4) 'fri',
(($day-size + $gap) * 5) 'sat',
(($day-size + $gap) * 6) 'sun'
);
Loading