Skip to content

Commit

Permalink
solution
Browse files Browse the repository at this point in the history
  • Loading branch information
kripikripi committed Oct 24, 2024
1 parent 7f98364 commit 09543af
Show file tree
Hide file tree
Showing 5 changed files with 125 additions and 21 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
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
61 changes: 45 additions & 16 deletions src/index.html
Original file line number Diff line number Diff line change
@@ -1,18 +1,47 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Calendar</title>
<link
rel="stylesheet"
href="styles/index.scss"
/>
</head>
<body>
<h1>Calendar</h1>
</body>
</html>

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Calendar</title>
<link rel="stylesheet" href="styles/index.scss" />
</head>

<body>
<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>
45 changes: 45 additions & 0 deletions src/styles/index.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,48 @@
$calendar-day-size: 100px;
$calendar-day-border: 1px solid black;
$calendar-day-color: #eee;
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}

.calendar {
padding: 10px;
height: calc($calendar-day-size * 7);
width: calc($calendar-day-size * 7);
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 1px;
&__day {
width: $calendar-day-size;
height: $calendar-day-size;
box-sizing: border-box;
background-color: $calendar-day-color;
border: 1px solid black;
gap: 1px;
display: flex;
justify-content: center;
align-items: center;
@for $i from 1 through 31 {
&:nth-child(#{$i}) {
&::before {
content: '#{$i}';
font-size: 30px;
text-align: center;
}
}
}
&:hover {
cursor: pointer;
background-color: #ffbfcb;
transform: translate(0, -20px);
transition: 0.5s;
}
}
@for $i from 28 through 31 {
&--month-length-#{$i} .calendar__day:nth-child(n + #{$i + 1}) {
display: none;
}
}
}

0 comments on commit 09543af

Please sign in to comment.