Skip to content

Commit

Permalink
add solution
Browse files Browse the repository at this point in the history
  • Loading branch information
KOliinyk committed Dec 19, 2024
1 parent f12c803 commit a3d8127
Show file tree
Hide file tree
Showing 3 changed files with 110 additions and 5 deletions.
38 changes: 36 additions & 2 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,44 @@
<title>Calendar</title>
<link
rel="stylesheet"
href="styles/index.scss"
href="styles/main.scss"
/>
</head>
<body>
<h1>Calendar</h1>
<div class="container">
<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>
</div>
</body>
</html>
3 changes: 0 additions & 3 deletions src/styles/index.scss

This file was deleted.

74 changes: 74 additions & 0 deletions src/styles/main.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
$block: 100px;
$gap: 1px;
$days: 31;

body {
margin: 0;
}

.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.calendar {
flex-wrap: wrap;
gap: $gap;
max-width: 706px;
padding: 0 10px;
display: flex;

&:nth-child(7n + 10) {
margin-top: 0;
}
}

.calendar .calendar__day {
width: $block;
height: $block;
border: 1px solid #000;
background-color: #eee;
text-align: center;
cursor: pointer;
justify-content: center;
align-items: center;
transition-property: background-color, transform;
transition-duration: 0.5s;
display: flex;
box-sizing: border-box;

&:hover {
transform: translateY(-20px);
background-color: #ffbfcb;
}
}

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

$days: (
'mon': 0,
'tue': 1,
'wed': 2,
'thu': 3,
'fri': 4,
'sat': 5,
'sun': 6,
);

@each $day, $number in $days {
.calendar--start-day-#{$day} .calendar__day:first-child {
margin-left: #{(($block + $gap) * $number)};
}
}

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

0 comments on commit a3d8127

Please sign in to comment.