Skip to content

Commit

Permalink
add task solution
Browse files Browse the repository at this point in the history
  • Loading branch information
Daryna committed Dec 23, 2024
1 parent f12c803 commit 41faae8
Show file tree
Hide file tree
Showing 3 changed files with 202 additions and 5 deletions.
129 changes: 127 additions & 2 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,135 @@
<title>Calendar</title>
<link
rel="stylesheet"
href="styles/index.scss"
href="styles/main.scss"
/>
</head>
<body>
<h1>Calendar</h1>
<div class="calendar calendar--start-day--mon calendar--month-length--31">
<div
class="calendar__day"
data-day="1"
></div>
<div
class="calendar__day"
data-day="2"
></div>
<div
class="calendar__day"
data-day="3"
></div>
<div
class="calendar__day"
data-day="4"
></div>
<div
class="calendar__day"
data-day="5"
></div>
<div
class="calendar__day"
data-day="6"
></div>
<div
class="calendar__day"
data-day="7"
></div>
<div
class="calendar__day"
data-day="8"
></div>
<div
class="calendar__day"
data-day="9"
></div>
<div
class="calendar__day"
data-day="10"
></div>
<div
class="calendar__day"
data-day="11"
></div>
<div
class="calendar__day"
data-day="12"
></div>
<div
class="calendar__day"
data-day="13"
></div>
<div
class="calendar__day"
data-day="14"
></div>
<div
class="calendar__day"
data-day="15"
></div>
<div
class="calendar__day"
data-day="16"
></div>
<div
class="calendar__day"
data-day="17"
></div>
<div
class="calendar__day"
data-day="18"
></div>
<div
class="calendar__day"
data-day="19"
></div>
<div
class="calendar__day"
data-day="20"
></div>
<div
class="calendar__day"
data-day="21"
></div>
<div
class="calendar__day"
data-day="22"
></div>
<div
class="calendar__day"
data-day="23"
></div>
<div
class="calendar__day"
data-day="24"
></div>
<div
class="calendar__day"
data-day="25"
></div>
<div
class="calendar__day"
data-day="26"
></div>
<div
class="calendar__day"
data-day="27"
></div>
<div
class="calendar__day"
data-day="28"
></div>
<div
class="calendar__day"
data-day="29"
></div>
<div
class="calendar__day"
data-day="30"
></div>
<div
class="calendar__day"
data-day="31"
></div>
</div>
</body>
</html>
3 changes: 0 additions & 3 deletions src/styles/index.scss
View file

This file was deleted.

75 changes: 75 additions & 0 deletions src/styles/main.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
$day-width: 100px;
$gap: 1px;
$columns: 7;
$calendar-width: calc(($columns * $day-width) + ($columns - 1) * $gap);
$days: (
1: 'mon',
2: 'tue',
3: 'wed',
4: 'thu',
5: 'fri',
6: 'sat',
7: 'sun',
);

body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.calendar {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
margin: 0 auto;
gap: $gap;
max-width: $calendar-width;

&__day {
box-sizing: border-box;
width: $day-width;
height: 100px;
background-color: #eee;
border: 1px solid black;

&::before {
content: attr(data-day);
font-size: 30px;
color: black;
display: block;
text-align: center;
line-height: 100px;
}

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

&--start-day {
@each $i, $day in $days {
&--#{$day} {
.calendar__day:first-child {
margin-left: calc($i * (#{$day-width} + #{$gap}));
}
}
}
}

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

0 comments on commit 41faae8

Please sign in to comment.