Skip to content

Commit

Permalink
calendar task
Browse files Browse the repository at this point in the history
  • Loading branch information
bbbozhena committed Dec 18, 2024
1 parent f12c803 commit 3d739d7
Show file tree
Hide file tree
Showing 7 changed files with 146 additions and 7 deletions.
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
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,8 @@ 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://bbbozhena.github.io/layout_calendar/)
- [TEST REPORT LINK](https://bbbozhena.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
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": "^1.9.12",
"@mate-academy/stylelint-config": "latest",
"@parcel/transformer-sass": "^2.12.0",
"backstopjs": "6.3.23",
Expand Down
43 changes: 43 additions & 0 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,48 @@
</head>
<body>
<h1>Calendar</h1>
<div class="calendar calendar--start-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 class="calendar__days">
<div class="calendar__day start-day">Monday</div>
<div class="calendar__day start-day">Tuesday</div>
<div class="calendar__day start-day">Wednesday</div>
<div class="calendar__day start-day">Thursday</div>
<div class="calendar__day start-day">Friday</div>
<div class="calendar__day start-day">Saturday</div>
<div class="calendar__day start-day">Sunday</div>
</div> -->
</div>
</body>
</html>
59 changes: 59 additions & 0 deletions src/styles/index.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,62 @@
@import './variables';

body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
justify-content: center;
align-items: center;
display: flex;
height: 100vh;
}

h1 {
display: none;
}

.calendar {
display: flex;
flex-wrap: wrap;
counter-reset: day;
width: 707px;
gap: 1px;

@each $day, $index in (sun: 6, mon: 0, tue: 1, wed: 2, thu: 3, fri: 4, sat: 5)
{
&--start-#{$day} .calendar__day:first-child {
margin-left: calc(#{$index} * (#{100px} + #{1px}));
}
}

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

.calendar__day {
display: flex;
justify-content: center;
align-items: center;
width: $cell-size;
height: $cell-size;
border: 1px solid black;
background-color: $base-color;
cursor: pointer;
transition:
background-color $transition-duration,
transform $transition-duration;

&::before {
content: counter(day);
counter-increment: day;
font-family: Arial, sans-serif;
font-size: 30px;
color: black;
}

&:hover {
background-color: $hover-color;
transform: translateY($hover-offset);
}
}
7 changes: 7 additions & 0 deletions src/styles/variables.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
$base-color: #eee;
$columns: 7;
$padding: 10px;
$cell-size: 98px;
$hover-color: #ffbfcb;
$hover-offset: -20px;
$transition-duration: 0.5s;

0 comments on commit 3d739d7

Please sign in to comment.