Skip to content

Commit

Permalink
add task solution
Browse files Browse the repository at this point in the history
  • Loading branch information
DjSerji committed Dec 7, 2024
1 parent f12c803 commit d0f692d
Show file tree
Hide file tree
Showing 2 changed files with 111 additions and 2 deletions.
36 changes: 34 additions & 2 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>
<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>
77 changes: 77 additions & 0 deletions src/styles/main.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
$day-size: 100px;
$day-gap: 1px;
$day-padding: 10px;
$calendar-border-color: #000;
$day-default-color: #eee;
$day-hover-color: #ffbfcb;
$transition-duration: 0.5s;

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

.calendar {
display: flex;
flex-wrap: wrap;
gap: $day-gap;
padding: $day-padding;
max-width: calc(($day-size + $day-gap) * 7 - $day-gap + 2 * $day-padding);

&__day {
width: $day-size;
height: $day-size;
background-color: $day-default-color;
border: 1px solid $calendar-border-color;
position: relative;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition:
transform $transition-duration,
background-color $transition-duration;

&:hover {
background-color: $day-hover-color;
transform: translateY(-20px);
}

&::before {
content: '';
font-family: Arial, sans-serif;
font-size: 30px;
font-weight: bold;
position: absolute;
color: #000;
}

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

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

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

0 comments on commit d0f692d

Please sign in to comment.