Skip to content

Test BackStopJS zaliczony #5447

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

Test BackStopJS zaliczony #5447

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ebc260b
Test BackStopJS zaliczony
Jun 24, 2026
5d06fee
Kod poprawiony od wskazówek Mentora AI
Jun 24, 2026
5315942
Poprawki wg sugestii Mentora
Jun 24, 2026
0536d44
Padding wliczony do matematyki szerokości kalendarza co jest głupie
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
34 changes: 33 additions & 1 deletion src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,38 @@
/>
</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>

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

padding: 10px; repeats a hardcoded px value instead of using a named variable and is not reflected in $calendar-width. This breaks the requirement to avoid repeated magic px values and to make all calculations clear with variables (checklist item #4). Consider creating $calendar-padding and using it both here and in the width formula.

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

This still uses a hardcoded 10px instead of a padding variable included in the width calculation. It violates the requirement that the calendar width be fully computed via variables (7 columns + 10px paddings) and the previous HIGH‑priority correction to introduce $calendar-padding, include 2 * $calendar-padding in $calendar-width, and reuse that variable here.

@voyuser voyuser Jun 24, 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.

Yes, it is, but it's only once in whole file, the task has nothing to do with it. It says:
" - Don't use hardcoded px values if they are used several times"

@voyuser voyuser Jun 24, 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.

Counting Callendar width with padding is stupidity and wrong in SCSS / CSS planing..

<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>
6 changes: 6 additions & 0 deletions src/styles/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
@use './main.scss';

body {
margin: 0;

@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-width currently ignores the configured gap and padding, so the calendar width will not be "exactly 7 columns + 10px paddings" as required. Update this calculation to use $day-squere-width, $calendar-gap-width, and padding values so all repeated sizes are derived from variables.

display: flex;

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

This violates checklist item #1: "Changing 'month-lengh' and 'start-day' modifier in the code element reflects in changing calendar layout" and the description requirement "Use flex with 1px gap and limit its width to exactly 7 columns + 10px paddings". $calendar-width only accounts for day widths and gaps, but not the 10px left/right paddings, and there is no padding variable used in the width calculation.

justify-content: center;
align-items: center;
Comment on lines +6 to +7

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

get-correction uses $n - 1 directly as a pixel offset, which violates the requirement to avoid hardcoded px-like values and makes the spacing logic independent of $calendar-gap-width. Consider computing this based on $day-squere-width and $calendar-gap-width instead.

height: 100vh;
Comment on lines +7 to +8

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

This still conflicts with checklist item #1 and #4: start-day alignment must use the same variable-based layout logic (including padding/gap) and avoid implicit repeated px-based offsets. get-correction ignores padding and any border influence, so the first-day margin-left is not derived from a full calendar-width formula that includes padding.

}
76 changes: 76 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,76 @@
$day-size: 100px;
$day-border-width: 1px;
$calendar-gap-width: 1px;
$calendar-column-number: 7;
$calendar-padding: 10px;
$calendar-grid-width: $day-size * $calendar-column-number;
$calendar-gaps: ($calendar-column-number - 1) * $calendar-gap-width;
$calendar-width: $calendar-grid-width + $calendar-gaps + 2 * $calendar-padding;

@function get-correction($n) {
@return ($n - 1) * ($day-size + $calendar-gap-width);
}

$days-margin: (
'mon': 0,
'tue': get-correction(2),

@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 task requires the main styles to be written in src/styles/main.scss, and the linked stylesheet should correspond to that entry; pointing to styles/index.scss instead of styles/main.scss (or the compiled CSS entry) conflicts with the description. Consider linking the same SCSS file that the description names as the main one.

'wed': get-correction(3),
'thu': get-correction(4),
'fri': get-correction(5),
'sat': get-correction(6),
'sun': get-correction(7),
);

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

&__day {
width: $day-size;
min-width: $day-size;
height: $day-size;
border: $day-border-width solid black;
background-color: #eee;
font-size: 30px;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
transition:
transform 0.5s,
background-color 0.5s;

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

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

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

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