From b57be50c7ea0337bb9d654112d060fb35d485ac7 Mon Sep 17 00:00:00 2001 From: Maksym Sheremeta Date: Wed, 24 Jun 2026 17:41:42 +0300 Subject: [PATCH 1/5] add markup --- src/index.html | 36 ++++++++++++++++++++++++++++++++++-- src/styles/main.scss | 39 +++++++++++++++++++++++++++++++++++++++ src/styles/variables.scss | 6 ++++++ 3 files changed, 79 insertions(+), 2 deletions(-) create mode 100644 src/styles/main.scss create mode 100644 src/styles/variables.scss diff --git a/src/index.html b/src/index.html index c10199d38b..52a5722f56 100644 --- a/src/index.html +++ b/src/index.html @@ -9,10 +9,42 @@ Calendar -

Calendar

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/main.scss b/src/styles/main.scss new file mode 100644 index 0000000000..7a55a5db35 --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,39 @@ +@import "./variables"; + +body{ + margin: 0; +} + +.calendar{ + display: flex; + gap: $gap; + flex-wrap: wrap; + + width: $colums * $day-size + 6 * $gap; + + &__column{ + display: flex; + flex-direction: column; + gap: $gap; + } + + &__day{ + height: $day-size; + width: $day-size; + + padding: $day-padding; + + box-sizing: border-box; + border: $border; + background-color: $day-background-color; + + @for $i from 1 through 31 { + &__column:nth-child(-n + #{$i}) { + &::before{ + content: #{$i}; + } + } + } + } +} + diff --git a/src/styles/variables.scss b/src/styles/variables.scss new file mode 100644 index 0000000000..4d9cdeae3d --- /dev/null +++ b/src/styles/variables.scss @@ -0,0 +1,6 @@ +$gap: 1px; +$border: 1px solid black; +$day-background-color: #eee; +$day-size: 100px; +$colums: 7; +$day-padding: 10px; From 31f825a4da3ae91905b32c4e322491a0d3997e0a Mon Sep 17 00:00:00 2001 From: Maksym Sheremeta Date: Thu, 25 Jun 2026 13:37:44 +0300 Subject: [PATCH 2/5] add solution --- src/index.html | 2 +- src/styles/index.scss | 3 -- src/styles/main.scss | 67 +++++++++++++++++++++++++++------------ src/styles/variables.scss | 11 +++++++ 4 files changed, 59 insertions(+), 24 deletions(-) delete mode 100644 src/styles/index.scss diff --git a/src/index.html b/src/index.html index 52a5722f56..6245b0a7a0 100644 --- a/src/index.html +++ b/src/index.html @@ -13,7 +13,7 @@ /> -
+
diff --git a/src/styles/index.scss b/src/styles/index.scss deleted file mode 100644 index 293d3b1f13..0000000000 --- a/src/styles/index.scss +++ /dev/null @@ -1,3 +0,0 @@ -body { - margin: 0; -} diff --git a/src/styles/main.scss b/src/styles/main.scss index 7a55a5db35..1be4afe4d4 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,39 +1,66 @@ -@import "./variables"; +@import './variables'; -body{ +body { margin: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; } -.calendar{ +.calendar { display: flex; gap: $gap; flex-wrap: wrap; + padding: $day-padding; + width: $colums * $day-size + 6 * $gap; - &__column{ + font-family: Arial, Helvetica, sans-serif; + font-size: 30px; + + &__day { + height: $day-size; + width: $day-size; + + padding: $day-padding; + + box-sizing: border-box; + border: $border; + background-color: $day-background-color; + display: flex; - flex-direction: column; - gap: $gap; - } + align-items: center; + justify-content: center; - &__day{ - height: $day-size; - width: $day-size; + transition-duration: 0.5s; - padding: $day-padding; + &:hover { + cursor: pointer; + background-color: $hover-day-color; + transform: translateY(-20px); + } + } - box-sizing: border-box; - border: $border; - background-color: $day-background-color; + @each $margin, $day in $start-days { + &--start-day-#{$day} &__day:first-child { + margin-left: $margin; + } + } - @for $i from 1 through 31 { - &__column:nth-child(-n + #{$i}) { - &::before{ - content: #{$i}; - } + @for $day from 1 through $days-in-month { + & &__day:nth-child(#{$day}) { + &::before { + content: '#{$day}'; } } } -} + @for $length from 28 through 31 { + &--month-length-#{$length} &__day:nth-child(n + #{$length + 1}) { + display: none; + } + } +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 4d9cdeae3d..eedc4c33c2 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -4,3 +4,14 @@ $day-background-color: #eee; $day-size: 100px; $colums: 7; $day-padding: 10px; +$days-in-month: 31; +$hover-day-color: #ffbfcb; +$start-days: ( + 0 'mon', + ($day-size + $gap) 'tue', + (($day-size + $gap) * 2) 'wed', + (($day-size + $gap) * 3) 'thu', + (($day-size + $gap) * 4) 'fri', + (($day-size + $gap) * 5) 'sat', + (($day-size + $gap) * 6) 'sun' +); From bf04ec6deaad88d32ad697777c7e7299d42d8c13 Mon Sep 17 00:00:00 2001 From: Maksym Sheremeta Date: Thu, 25 Jun 2026 13:50:14 +0300 Subject: [PATCH 3/5] add solution --- src/styles/main.scss | 2 +- src/styles/variables.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/main.scss b/src/styles/main.scss index 1be4afe4d4..4d41abbd75 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -16,7 +16,7 @@ body { padding: $day-padding; - width: $colums * $day-size + 6 * $gap; + width: $columns * $day-size + (7-1) * $gap; font-family: Arial, Helvetica, sans-serif; font-size: 30px; diff --git a/src/styles/variables.scss b/src/styles/variables.scss index eedc4c33c2..168fbbf5ad 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -2,7 +2,7 @@ $gap: 1px; $border: 1px solid black; $day-background-color: #eee; $day-size: 100px; -$colums: 7; +$columns: 7; $day-padding: 10px; $days-in-month: 31; $hover-day-color: #ffbfcb; From 7d7c9797616074242cc84bb09cb38a94380d2fdb Mon Sep 17 00:00:00 2001 From: Maksym Sheremeta Date: Thu, 25 Jun 2026 13:52:44 +0300 Subject: [PATCH 4/5] add solution --- src/styles/main.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/main.scss b/src/styles/main.scss index 4d41abbd75..a73807f54f 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -16,7 +16,7 @@ body { padding: $day-padding; - width: $columns * $day-size + (7-1) * $gap; + width: $columns * $day-size + calc(7 - 1) * $gap; font-family: Arial, Helvetica, sans-serif; font-size: 30px; From f725069f9a634eb16c5c3177554fbdc3ad520f17 Mon Sep 17 00:00:00 2001 From: Maksym Sheremeta Date: Thu, 25 Jun 2026 14:02:11 +0300 Subject: [PATCH 5/5] add solution --- src/styles/main.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/styles/main.scss b/src/styles/main.scss index a73807f54f..095bfa139c 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -14,9 +14,11 @@ body { gap: $gap; flex-wrap: wrap; + box-sizing: border-box; + padding: $day-padding; - width: $columns * $day-size + calc(7 - 1) * $gap; + width: $columns * $day-size + calc(7 - 1) * $gap + (2 * $day-padding); font-family: Arial, Helvetica, sans-serif; font-size: 30px;