Skip to content

deploy commit for question #5480

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
tkrylataja wants to merge 1 commit into
base: master
Choose a base branch
from
Open

deploy commit for question #5480

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
29 changes: 29 additions & 0 deletions .github/workflows/test.yml-template
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
name: Test

on:
pull_request:
branches: [ master ]

jobs:
build:

runs-on: ubuntu-latest

strategy:
matrix:
node-version: [20.x]

steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- run: npm install
- run: npm test
- name: Upload HTML report(backstop data)
if: ${{ always() }}
uses: actions/upload-artifact@v2
with:
name: report
path: backstop_data
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://tkrylataja.github.io/layout_calendar/)
- [TEST REPORT LINK](https://tkrylataja.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)
9 changes: 5 additions & 4 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"@mate-academy/backstop-config": "latest",
"@mate-academy/bemlint": "latest",
"@mate-academy/linthtml-config": "latest",
"@mate-academy/scripts": "^1.8.6",
"@mate-academy/scripts": "^2.1.3",
"@mate-academy/stylelint-config": "latest",
"@parcel/transformer-sass": "^2.12.0",
"backstopjs": "6.3.23",
Expand Down
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>
<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>
54 changes: 54 additions & 0 deletions src/styles/calendar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
@import 'utils/variables';

.calendar {
display: flex;
flex-wrap: wrap;
gap: $day-gap;
width: $day-size * 7 + $day-gap * 6 + 20px;

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 14, 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 "Don't use hardcoded px values if they are used several times" and "Use properly named variables to make all the calculations more clear". Here 20px and 10px are hardcoded; consider defining padding and total width using variables (e.g. $calendar-padding, computed width using $day-size, $day-gap, and $calendar-padding) instead of literal px values.

padding: 10px;

&__day {
width: $day-size;
height: $day-size;
background-color: #eee;
border: 1px solid #000;

display: flex;
justify-content: center;
align-items: center;
position: relative;
cursor: pointer;
transition-duration: 0.5s;

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 14, 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.

Checklist item: "All hover-related changes should be animated with the duration of 0.5s". Currently only transition-duration is set, but no transition-property or shorthand specifying background-color and transform. To ensure all hover-related properties are animated, specify transition: background-color 0.5s, transform 0.5s; (or equivalent) instead of only duration.


&:hover {
background-color: #ffbfcb;

// transition-duration: 1s;
transform: translateY(-20px);
}

&::before {
font-family: Arial, sans-serif;
font-size: 30px;
}
}
}

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

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

@for $length from 28 through 31 {
.calendar--month-length-#{$length}
.calendar__day:nth-child(n + #{$length + 1}) {
display: none;
}
}
13 changes: 12 additions & 1 deletion src/styles/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,14 @@
body {
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 14, 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 width calculation partially hardcodes 20px (derived from padding), while the description says "Don't use hardcoded px values if they are used several times" and asks for clearer calculations via variables. Consider introducing a $calendar-padding variable and using it both here and in the padding declaration.

min-height: 100vh;

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 14, 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; uses a repeated literal value that participates in the width calculation; the requirements ask not to hardcode px values used multiple times and to use variables. Put this 10px into a named variable (e.g. $calendar-padding) and reuse it.

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

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 14, 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: "Write styles in src/styles/main.scss instead of src/style.css", and your HTML links to styles/index.scss. You should introduce main.scss as the entry file and update this href to point to styles/main.scss, importing your other SCSS there.


@import 'calendar';
11 changes: 11 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,11 @@
$day-size: 100px;
$day-gap: 1px;
$days: (
'mon': 0,
'tue': 1,
'wed': 2,
'thu': 3,

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 14, 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.

Your width calculation width: $day-size * 7 + $day-gap * 6 + 20px; uses a hardcoded 20px padding total, and you also use padding: 10px; separately. This violates the requirement "Don't use hardcoded px values if they are used several times" and "Use properly named variables to make all the calculations more clear." Consider introducing variables for padding and using them both in width and padding to keep the math explicit and avoid repeated literals.

'fri': 4,
'sat': 5,
'sun': 6,
);
Loading