Skip to content

Tasks solved #5475

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

Tasks solved #5475

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
69d6757
Tasks solved
GrizlixXx Jul 10, 2026
3a8bbca
Tasks solved, requesting changes changed
GrizlixXx Jul 10, 2026
7654843
Tasks solved, requesting changes changed
GrizlixXx Jul 10, 2026
b7d47ef
Tasks solved, requesting changes changed
GrizlixXx Jul 10, 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
11 changes: 6 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,15 @@ Display a calendar in the middle of the screen (both horizontally and vertically
- Set 31 days by default in your HTML

On hovering over a cell:

- cursor should become pointer
- The hovered cell has to become pink (use `#FFBFCB`)
- Move the hovered cell up by `20px` (use `transform`)
- All changes should be animated with the duration of 0.5s

> Here are the [Layout Tasks Instructions](https://mate-academy.github.io/layout_task-guideline)

*Important note*: In this task, you are allowed to link `*.scss` files directly in HTML `<link>` tags using `href` attribute.
_Important note_: In this task, you are allowed to link `*.scss` files directly in HTML `<link>` tags using `href` attribute.
This is possible because [we use the Parcel library](https://en.parceljs.org/scss.html) to bundle your solution's source code.

![reference image](reference.png).
Expand All @@ -36,13 +37,13 @@ This is possible because [we use the Parcel library](https://en.parceljs.org/scs

❗️ 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://GrizlixXx.github.io/layout_calendar/)
- [TEST REPORT LINK](https://GrizlixXx.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.

- [ ] Changing 'month-lengh' and 'start-day' modifier in the code element
reflects in changing calendar layout
- [ ] Each day has no modifiers, only class (eg. calendar__day)
reflects in changing calendar layout
- [ ] Each day has no modifiers, only class (eg. calendar\_\_day)
- [ ] All `Typical Mistakes` from `BEM` lesson theory are checked.
- [ ] Code follows all the [Code Style Rules ❗️](https://mate-academy.github.io/layout_task-guideline/html-css-code-style-rules)
45 changes: 41 additions & 4 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
<!-- #region head -->
<!doctype html>
<html lang="en">
<html
lang="en"
class="page"
>
<head>
<meta charset="UTF-8" />
<meta
Expand All @@ -9,10 +13,43 @@
<title>Calendar</title>
<link
rel="stylesheet"

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 10, 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 current $calendar-width only accounts for 7 day squares and 6 gaps, but ignores the horizontal padding applied on .calendar. The task requires limiting the width to exactly 7 columns plus 10px paddings, so you should include $calendar-padding in the width calculation to match the total layout width requirement.

href="styles/index.scss"
href="./styles/main.scss"
/>
</head>
<body>
<h1>Calendar</h1>
<!-- #endregion head -->
<body class="page__body">
<div class="calendar calendar--start-day-sun calendar--month-length-31">
Comment on lines 14 to +21

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 10, 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 the description requirement that "Set calendar to start from Sunday by default" and that "The month should start at the correct column (Monday is the 1st, Friday is the 5th)" when counting from Sunday. Currently mon: 0 and sun: 6 make Monday the first column and Sunday the seventh. You should adjust $week-days so Sunday has offset 0, Monday 1, ..., Saturday 6, ensuring that calendar--start-day-* modifiers place days in the correct columns and satisfy checklist item #1 about changing start-day reflecting correct layout.

Comment on lines 14 to +21

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 10, 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" together with the description rule "Set calendar to start from Sunday by default". Your $week-days map uses Monday-first offsets (mon: 0, ..., sun: 6), so the calendar--start-day-* modifiers position days as if Monday were column 0. You should change this map to Sunday-first (sun: 0, mon: 1, tue: 2, wed: 3, thu: 4, fri: 5, sat: 6) while keeping your existing margin-left calculation so the calendar responds correctly when start-day changes.

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

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 10, 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 set only transition-duration on .calendar__day, but the requirement says all hover changes (background-color and transform) should be animated. Consider defining the full transition (including properties like background-color and transform) to ensure both effects are animated over 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>
</body>
</html>
3 changes: 0 additions & 3 deletions src/styles/index.scss
View file
Open in desktop

This file was deleted.

70 changes: 70 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,70 @@
@use './utils/variables.scss' as *;

.page {
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
}

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

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 10, 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 variable currently only accounts for 7 day cells and gaps, but the task requires the width to be "exactly 7 columns + 10px paddings"; update $calendar-width (or the combination of width and padding) so that the final box width also includes the horizontal paddings defined by $calendar-padding.

box-sizing: border-box;
padding: $calendar-padding;
gap: $calendar-gap;

@for $length from 28 through 31 {

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 10, 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 @for loop uses through 31, but in Sass that upper bound is exclusive, so you never generate a &--month-length-31 modifier; this breaks checklist item "Changing 'month-lengh' ... reflects in changing calendar layout" because calendar--month-length-31 in HTML has no effect.

&--month-length-#{$length} {
Comment on lines +14 to +21

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 10, 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 the requirement and checklist item #1: Changing 'month-lengh' and 'start-day' modifier in the code element reflects in changing calendar layout because your $week-days map currently treats Monday as column 0 and Sunday as column 6, so the calendar layout does not start from Sunday as the first column as specified. You should update the offsets so sun: 0, mon: 1, ..., sat: 6, which will make the default calendar--start-day-sun place the first day in the first column and ensure “Monday is the 1st, Friday is the 5th” relative to a Sunday-first week.

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 10, 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 violates the Sunday-first requirement tied to checklist item #1: "Changing 'month-lengh' and 'start-day' modifier in the code element reflects in changing calendar layout" and the description statement "Set calendar to start from Sunday by default in your HTML". Your $week-days map treats Monday as offset 0 and Sunday as offset 6, which makes the calendar--start-day-sun modifier place the first day in the last column of a Monday-first grid. Update this map to sun: 0, mon: 1, tue: 2, wed: 3, thu: 4, fri: 5, sat: 6 while keeping your margin-left formula so the calendar is truly Sunday-first.

.calendar__day:nth-child(n + #{$length + 1}) {
display: none;
}
}
}

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

&__day {
display: flex;
justify-content: center;
align-items: center;

box-sizing: border-box;
border: $day-border;
background-color: $day-bg-color;
width: $day-size;
height: $day-size;

cursor: pointer;
transition:
background-color $anim-duration,
transform $anim-duration;

&::before {
font-family: $font-family;
font-size: $font-size;
}

&:hover {
background-color: $day-hover-color;
transform: $day-hover-transform;
}

@for $i from 1 through 31 {
&:nth-child(#{$i}) {
&::before {
content: '#{$i}';
}
}
}
}
}
22 changes: 22 additions & 0 deletions src/styles/utils/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
$day-size: 100px;
$day-bg-color: #eee;
$day-border: 1px solid #000;

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 10, 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 description requires the calendar to be centered in the middle of the screen both horizontally and vertically using the page element (class="page" on html), but currently only .page__body is a flex container; html.page itself is not styled, so the calendar may not be centered relative to the full viewport. Consider adding styles for .page/html.page to align the calendar in the center of the screen.

$font-family: Arial, sans-serif;
$font-size: 30px;
$calendar-gap: 1px;
$calendar-padding: 10px;
$day-hover-color: #ffbfcb;
$day-hover-transform: translateY(-20px);
$anim-duration: 0.5s;
$calendar-width: calc(
7 * #{$day-size} + 6 * #{$calendar-gap} + 2 * #{$calendar-padding}
);
$week-days: (
mon: 0,
tue: 1,
wed: 2,
thu: 3,
fri: 4,
sat: 5,
sun: 6,
Comment on lines +14 to +21

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 10, 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" – your $week-days map uses Monday-first offsets (mon: 0, ..., sun: 6) instead of the required Sunday-first offsets (sun: 0, mon: 1, ..., sat: 6), so the calendar--start-day-* behavior does not match the task’s Sunday-first semantics where "Monday is the 1st, Friday is the 5th" relative to Sunday.

);
Loading