Skip to content

solution #5211

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

solution #5211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b5653a6
solution
kwyoe Feb 23, 2026
f42114b
added task solution
kwyoe Feb 23, 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
5 changes: 3 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,13 @@ This is possible because [we use the Parcel library](https://en.parceljs.org/scs

![reference image](reference.png).


## Checklist

❗️ Replace `<your_account>` with your Github username and copy the links to `Pull Request` description:

- [DEMO LINK](https://<your_account>.github.io/layout_calendar/)
- [TEST REPORT LINK](https://<your_account>.github.io/layout_calendar/report/html_report/)
- [DEMO LINK](https://kwyoe.github.io/layout_calendar/)
- [TEST REPORT LINK](https://kwyoe.github.io/layout_calendar/report/html_report/)

❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it.

Expand Down
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"
/>
</head>
<body>
<h1>Calendar</h1>
<div class="calendar calendar--start-day-sun calendar--month-length-31">
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 23, 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 from the task description: "Write styles in src/styles/main.scss instead of src/style.css." The HTML currently links to styles/index.scss (line 12). Please rename/move your stylesheet to src/styles/main.scss (or create main.scss and import the content) and update the <link> in src/index.html to href="styles/main.scss" so the project matches the exact task requirement.

<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>
56 changes: 56 additions & 0 deletions src/styles/blocks/calendar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
.calendar {
display: flex;
flex-wrap: wrap;
width: $calendar-width;
gap: $gap;
padding: $padding;
Comment on lines +4 to +6
Copy link

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

Choose a reason for hiding this comment

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

This breaks the requirement: "Limit calendar width to exactly 7 columns + 10px paddings." You set width: $calendar-width; and padding: $padding; on the same element. Because $calendar-width (defined in variables) already accounts for cells and gaps, adding padding makes the final outer width larger than the intended value. Include padding in the width calculation (for example compute an $calendar-outer-width that adds 2 * $padding to the inner width) or use the correct expression so the rendered outer width equals exactly 7 columns plus the required paddings. (See width and padding here.)


&__day {
display: flex;
box-sizing: border-box;
width: $cell-size;
height: $cell-size;
background-color: $cell-background-color;
border: $border-settings;
align-items: center;
justify-content: center;
position: relative;
font-family: $font-family;
font-size: $font-size;
font-weight: 400;
transition: 0.5s;

&::before {
font-size: $font-size;
font-weight: 400;
}

&:hover {
background-color: $hover-cell-background-color;
transform: translateY(-20px);
font-weight: 400;
cursor: pointer;
}

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

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

@each $day, $i in $days {
Copy link

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

Choose a reason for hiding this comment

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

This violates the checklist requirement: "- [ ] Changing 'month-lengh' and 'start-day' modifier in the code element reflects in changing calendar layout" — the start-day mapping is wrong. The $days map uses 'mon': 0, 'tue': 1, ..., 'sun': 6, which assumes the first column is Monday. Since the calendar in HTML is set to start from Sunday by default, the mapping should make sun => 0, mon => 1, tue => 2, ... so margin-left places the first day under the correct weekday. Update the $days map (or the multiplication) so .calendar--start-day-sun results in margin-left: 0, .calendar--start-day-mon results in margin-left: 1 * (cell + gap), etc.

.calendar--start-day-#{$day} .calendar__day:first-child {
margin-left: $i * ($cell-size + $gap);
}
}
Comment on lines +52 to +56
Copy link

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

Choose a reason for hiding this comment

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

This risks violating the checklist item: "Changing 'month-lengh' and 'start-day' modifier in the code element reflects in changing calendar layout". The @each block uses the $days map value $i directly to compute margin-left: $i * ($cell-size + $gap);. That works only if the $days map indexes match the expected 0-based column positions (Sunday = 0, Monday = 1, ..., Saturday = 6). Currently the project's $days map is Monday-first (so Sunday maps to 6), which will shift calendar--start-day-sun to the last column instead of the first. Fix by remapping $days to 'sun': 0, 'mon': 1, ... in variables.scss or change the formula to account for a 1-based index (e.g. ($i - 1) * ...). (See the @each and margin-left here.)

19 changes: 19 additions & 0 deletions src/styles/blocks/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
$count-day: 7;
$padding: 10px;
$gap: 1px;
$cell-size: 100px;
$calendar-width: $cell-size * $count-day + $gap * ($count-day - 1);
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 23, 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: "Limit calendar width to exactly 7 columns + 10px paddings." $calendar-width currently sums only cells and gaps, but padding: $padding is applied later which makes the element's outer width equal to $calendar-width + 2 * $padding. Include padding in the width calculation (for example $calendar-width: $cell-size * $count-day + $gap * ($count-day - 1) + $padding * 2;) or create a separate $calendar-outer-width used for width so the final rendered outer width equals 7 columns plus the 10px paddings.

$cell-background-color: #eee;
$font-family: Arial, sans-serif;
$font-size: 30px;
$hover-cell-background-color: #ffbfcb;
$border-settings: 1px solid #000;
$days: (
'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 23, 2026

Choose a reason for hiding this comment

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

This mapping will break the start-day modifiers and thus violates the checklist item: "Changing 'month-lengh' and 'start-day' modifier in the code element reflects in changing calendar layout". The $days map currently sets 'mon': 0 through 'sun': 6, which makes calendar--start-day-sun offset the first day to the last column. To match the HTML default calendar--start-day-sun (first day placed in the leftmost column), change the map so 'sun': 0, 'mon': 1, 'tue': 2, 'wed': 3, 'thu': 4, 'fri': 5, 'sat': 6.

Comment on lines +11 to +18
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 23, 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 treats Monday as column 0 and Sunday as column 6, so .calendar--start-day-sun will shift the first day into the last column instead of making Sunday the first column. Remap the map to 'sun': 0, 'mon': 1, 'tue': 2, 'wed': 3, 'thu': 4, 'fri': 5, 'sat': 6 or change the margin calculation to use ($i - 1) * ($cell-size + $gap) so each start-day modifier moves the first day to the correct column.

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

This file was deleted.

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

body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: $font-family;
}