Skip to content
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

Jump to bottom

add solution #3906

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

add solution #3906

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c21ea37
add solution
ychaiun Oct 27, 2024
cfad46f
fix variables and functions
ychaiun Oct 28, 2024
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,28 +20,29 @@ Display a calendar in the middle of the screen (both horizontally and vertically
- Set 31 days by default

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 Instruction](https://github.com/mate-academy/layout_task-guideline#how-to-solve-the-layout-tasks-on-github)

*Note*: In this task, you can directly link `*.scss` files in HTML `<link>` tags. This is possible because [we use the Parcel library](https://en.parceljs.org/scss.html) to bundle the source code.
_Note_: In this task, you can directly link `*.scss` files in HTML `<link>` tags. This is possible because [we use the Parcel library](https://en.parceljs.org/scss.html) to bundle the source code.

![reference image](reference.png).

## Checklist

❗️ 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://ychaiun.github.io/layout_calendar/)
- [TEST REPORT LINK](https://ychaiun.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)
38 changes: 35 additions & 3 deletions src/index.html
View file
Open in desktop
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/index.scss"
/>
</head>
<body>
<h1>Calendar</h1>
<body class="page">
<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>
27 changes: 27 additions & 0 deletions src/styles/blocks/calendar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
.calendar {
display: flex;
gap: $gap;
flex-wrap: wrap;
width: $calendar-width;
padding: $calendar-padding;

&__day {
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
min-width: $cell-width;
min-height: $cell-height;
background-color: $cell-background;
border: 1px solid black;
transition:
transform $animation-duration ease,
background-color $animation-duration ease;

&:hover {
cursor: pointer;
transform: translateY(-20px);
background-color: $cell-background-hover;
}
}
}
17 changes: 17 additions & 0 deletions src/styles/blocks/function.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
@for $i from 1 through 31 {
.calendar__day:nth-child(#{$i})::before {
content: '#{$i}';
}
}

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

@each $day, $shift in $week {
.calendar--start-day-#{$day} .calendar__day:first-child {
margin-left: $shift + ($shift / 100);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

and calculate this with here

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's should not ($shift / 100), just use the gap here

}
}
10 changes: 10 additions & 0 deletions src/styles/blocks/global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.page {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
font-size: $font-size;
}
18 changes: 18 additions & 0 deletions src/styles/blocks/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
$cell-width: 100px;
$cell-height: 100px;
$cell-background: #eee;
$cell-background-hover: #ffbfcb;
$gap: 1px;
$calendar-padding: 10px;
$calendar-width: ($cell-width * 7) + ($gap * 6);
$font-size: 30px;
$animation-duration: 0.5s;
$week: (
'mon': 0,
'tue': 100px,
'wed': 200px,
'thu': 300px,
'fri': 400px,
'sat': 500px,
'sun': 600px,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
'tue': 100px,
'wed': 200px,
'thu': 300px,
'fri': 400px,
'sat': 500px,
'sun': 600px,
'tue': 1,
'wed': 2,
'thu': 3,
'fri': 4,
'sat': 5,
'sun': 6,

);
7 changes: 4 additions & 3 deletions src/styles/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
body {
margin: 0;
}
@import './blocks/variables';
@import './blocks/global';
@import './blocks/function';
@import './blocks/calendar';
Loading