Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
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
12 changes: 6 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,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://cuka9955-lang.github.io/layout_calendar/)
- [TEST REPORT LINK](https://cuka9955-lang.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
- [x] 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)
- [ ] 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)
- [x] Each day has no modifiers, only class (eg. calendar__day)
- [x] All `Typical Mistakes` from `BEM` lesson theory are checked.
- [x] 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

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
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
38 changes: 35 additions & 3 deletions src/index.html
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>
<body class="page">

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 HTML uses class="page" on the body, but the SCSS defines styles for body directly, not for a .page block. Since the task mentions using BEM and a page block file exists, consider applying the centering styles to .page instead of body to align with the intended BEM structure.

<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>
55 changes: 55 additions & 0 deletions src/styles/blocks/calendar.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
.calendar {

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 BEM and checklist item #3 ("All Typical Mistakes from BEM lesson theory are checked"): the page block is used in HTML (<body class="page">) but here you style the body element instead of the .page class. Update this to .page so the block is styled via its class, not a tag selector.

display: flex;
flex-wrap: wrap;
gap: $gap;
padding: $padding;
box-sizing: border-box;
width: ($column * $cell-size) + (($column - 1) * $gap) + (2 * $padding);

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

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

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

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

@each $day in $days-of-week {
$index: index($days-of-week, $day);

&--start-day-#{$day} {
.calendar__day:first-child {
margin-left: ($index - 1) * ($cell-size + $gap);
}
}
}
}
7 changes: 7 additions & 0 deletions src/styles/blocks/page.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
body {

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 page block is used as a class on <body> in HTML, but here it is styled as the bare body element, which violates BEM and checklist item #3 about following BEM typical mistakes; use .page instead of body for this block.

display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
3 changes: 0 additions & 3 deletions src/styles/index.scss

This file was deleted.

3 changes: 3 additions & 0 deletions src/styles/main.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@import './variables';

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 selector should target the BEM block class .page instead of the raw body element to align with BEM and checklist item #3 about avoiding typical BEM mistakes.

@import './blocks/calendar';
@import './blocks/page';
5 changes: 5 additions & 0 deletions src/styles/variables.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
$column: 7;

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 page block is used in HTML (<body class="page">), but the styles are currently attached to the raw body selector in page.scss. This violates the requirement to follow BEM and checklist item #3 about typical BEM mistakes; update page.scss to style .page instead of body so the block is controlled via its class.

$cell-size: 100px;
$gap: 1px;
$padding: 10px;
$days-of-week: (mon, tue, wed, thu, fri, sat, sun);
Loading