From 9c272da180bde735a408b9c2ea7eb6cc6cab1591 Mon Sep 17 00:00:00 2001 From: diiyavol Date: Thu, 25 Jun 2026 19:09:40 +0300 Subject: [PATCH 1/9] add task solution --- src/index.html | 36 ++++++++++++++++++++-- src/styles/index.scss | 72 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 106 insertions(+), 2 deletions(-) diff --git a/src/index.html b/src/index.html index c10199d38b..842a5f5853 100644 --- a/src/index.html +++ b/src/index.html @@ -12,7 +12,39 @@ href="styles/index.scss" /> - -

Calendar

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..4e48924fc5 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,75 @@ +* { + box-sizing: border-box; +} + body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; margin: 0; } + +.calendar { + display: inline-flex; + max-width: 800px; + flex-wrap: wrap; + align-self: center; + gap: 1px; + padding-left: 10px; +} + +.calendar__day { + cursor: pointer; + width: 100px; + height: 100px; + background-color: #eee; + border: 1px solid black; + transition: transform 500ms; +} + +.calendar__day:hover { + transform: translateY(-20px); + background-color: #ffbfcb; +} + +@for $i from 1 through 31 { + .calendar__day:nth-child(#{$i})::before { + font-family: Arial, Helvetica, sans-serif; + font-size: 30px; + content: '#{$i}'; + color: black; + + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + } +} + +$start-days: ( + 'mon': 0, + 'tue': 1, + 'wed': 2, + 'thu': 3, + 'fri': 4, + 'sat': 5, + 'sun': 6, +); + +@each $day, $index in $start-days { + .calendar--start--day--#{$day} { + .calendar__day:first-child { + margin-left: calc((100px + 1px) * #{$index}); + } + } +} + +@for $days-count from 28 through 31 { + .calendar--month--length--#{$days-count} { + .calendar__day:nth-child(n + #{$days-count + 1}) { + display: none; + } + } +} From 505ce61da09d965f013862bc804c187763785bfe Mon Sep 17 00:00:00 2001 From: diiyavol Date: Thu, 25 Jun 2026 19:17:09 +0300 Subject: [PATCH 2/9] add task solution2 --- src/index.html | 2 +- src/styles/{index.scss => main.scss} | 17 +++++++++++------ 2 files changed, 12 insertions(+), 7 deletions(-) rename src/styles/{index.scss => main.scss} (83%) diff --git a/src/index.html b/src/index.html index 842a5f5853..411d29186b 100644 --- a/src/index.html +++ b/src/index.html @@ -9,7 +9,7 @@ Calendar diff --git a/src/styles/index.scss b/src/styles/main.scss similarity index 83% rename from src/styles/index.scss rename to src/styles/main.scss index 4e48924fc5..747aeac3f6 100644 --- a/src/styles/index.scss +++ b/src/styles/main.scss @@ -1,3 +1,8 @@ +$calendar__width: 800px; +$day__width: 100px; +$days__gap: 1px; +$paddings: 10px; + * { box-sizing: border-box; } @@ -12,23 +17,23 @@ body { .calendar { display: inline-flex; - max-width: 800px; + max-width: $calendar__width; flex-wrap: wrap; align-self: center; - gap: 1px; - padding-left: 10px; + gap: $days__gap; + padding-left: $paddings; } .calendar__day { - cursor: pointer; - width: 100px; + width: $day__width; height: 100px; background-color: #eee; border: 1px solid black; - transition: transform 500ms; + transition: transform 0.5s, background-color 0.5s; } .calendar__day:hover { + cursor: pointer; transform: translateY(-20px); background-color: #ffbfcb; } From a8515e86904b22e7302524e33cb1021d00f3fc91 Mon Sep 17 00:00:00 2001 From: diiyavol Date: Thu, 25 Jun 2026 19:21:17 +0300 Subject: [PATCH 3/9] add task solution3 --- src/styles/main.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/styles/main.scss b/src/styles/main.scss index 747aeac3f6..f6e43c53d4 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,5 +1,8 @@ $calendar__width: 800px; $day__width: 100px; +$body__height: 100vh; +$day__height: 100px; + $days__gap: 1px; $paddings: 10px; @@ -11,7 +14,7 @@ body { display: flex; justify-content: center; align-items: center; - height: 100vh; + height: $body__height; margin: 0; } @@ -26,7 +29,7 @@ body { .calendar__day { width: $day__width; - height: 100px; + height: $day__height; background-color: #eee; border: 1px solid black; transition: transform 0.5s, background-color 0.5s; @@ -66,7 +69,7 @@ $start-days: ( @each $day, $index in $start-days { .calendar--start--day--#{$day} { .calendar__day:first-child { - margin-left: calc((100px + 1px) * #{$index}); + margin-left: calc(($day__width + $days__gap) * #{$index}); } } } From 71dc4ab6575597f325fa2f6596de7484cdff28d0 Mon Sep 17 00:00:00 2001 From: diiyavol Date: Thu, 25 Jun 2026 19:25:25 +0300 Subject: [PATCH 4/9] add task solution4 --- src/styles/main.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/styles/main.scss b/src/styles/main.scss index f6e43c53d4..00c3fb360e 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,8 +1,7 @@ -$calendar__width: 800px; +$calendar__count: 7; $day__width: 100px; $body__height: 100vh; $day__height: 100px; - $days__gap: 1px; $paddings: 10px; @@ -20,7 +19,7 @@ body { .calendar { display: inline-flex; - max-width: $calendar__width; + max-width: $calendar__count * ($day__width + $paddings); flex-wrap: wrap; align-self: center; gap: $days__gap; From 7f66f2e4f47e7001ff1ca2675382205bd0c1f0d7 Mon Sep 17 00:00:00 2001 From: diiyavol Date: Thu, 25 Jun 2026 19:31:07 +0300 Subject: [PATCH 5/9] add task solution5 --- src/styles/main.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/styles/main.scss b/src/styles/main.scss index 00c3fb360e..e1c918def0 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,5 @@ -$calendar__count: 7; $day__width: 100px; $body__height: 100vh; -$day__height: 100px; $days__gap: 1px; $paddings: 10px; @@ -19,7 +17,7 @@ body { .calendar { display: inline-flex; - max-width: $calendar__count * ($day__width + $paddings); + max-width: 7 * $day__width + 6 * $days__gap + 2 * $paddings; flex-wrap: wrap; align-self: center; gap: $days__gap; @@ -28,7 +26,7 @@ body { .calendar__day { width: $day__width; - height: $day__height; + height: $day__width; background-color: #eee; border: 1px solid black; transition: transform 0.5s, background-color 0.5s; From ea4395a4546d7d027ac19c33a2787b3b1fd35bdc Mon Sep 17 00:00:00 2001 From: diiyavol Date: Thu, 25 Jun 2026 23:24:52 +0300 Subject: [PATCH 6/9] add solution6 --- 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 e1c918def0..fefe772285 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -29,7 +29,9 @@ body { height: $day__width; background-color: #eee; border: 1px solid black; - transition: transform 0.5s, background-color 0.5s; + transition: + transform 0.5s, + background-color 0.5s; } .calendar__day:hover { From 29e52f065d1102ba5e7cf7d039801886487a0286 Mon Sep 17 00:00:00 2001 From: diiyavol Date: Fri, 26 Jun 2026 20:26:47 +0300 Subject: [PATCH 7/9] add solution7 --- src/styles/main.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/main.scss b/src/styles/main.scss index fefe772285..e6e91e6c0d 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -22,6 +22,7 @@ body { align-self: center; gap: $days__gap; padding-left: $paddings; + padding-right: $paddings; } .calendar__day { From 82b13375603e4a4ff2340e838f6266f77e95ea2b Mon Sep 17 00:00:00 2001 From: diiyavol Date: Fri, 26 Jun 2026 20:30:20 +0300 Subject: [PATCH 8/9] add solution8 --- src/styles/main.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/main.scss b/src/styles/main.scss index e6e91e6c0d..5b8659b405 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -67,7 +67,7 @@ $start-days: ( ); @each $day, $index in $start-days { - .calendar--start--day--#{$day} { + .calendar--start-day--#{$day} { .calendar__day:first-child { margin-left: calc(($day__width + $days__gap) * #{$index}); } @@ -75,7 +75,7 @@ $start-days: ( } @for $days-count from 28 through 31 { - .calendar--month--length--#{$days-count} { + .calendar--month-length--#{$days-count} { .calendar__day:nth-child(n + #{$days-count + 1}) { display: none; } From c310d2aeddf52cd4a857b18bbeb6d19acd4f3523 Mon Sep 17 00:00:00 2001 From: diiyavol Date: Fri, 26 Jun 2026 20:36:41 +0300 Subject: [PATCH 9/9] add solution9 --- src/index.html | 2 +- src/styles/main.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/index.html b/src/index.html index 411d29186b..2119f42e60 100644 --- a/src/index.html +++ b/src/index.html @@ -13,7 +13,7 @@ /> -
+
diff --git a/src/styles/main.scss b/src/styles/main.scss index 5b8659b405..d4d12ac293 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -67,7 +67,7 @@ $start-days: ( ); @each $day, $index in $start-days { - .calendar--start-day--#{$day} { + .calendar--start-day-#{$day} { .calendar__day:first-child { margin-left: calc(($day__width + $days__gap) * #{$index}); } @@ -75,7 +75,7 @@ $start-days: ( } @for $days-count from 28 through 31 { - .calendar--month-length--#{$days-count} { + .calendar--month-length-#{$days-count} { .calendar__day:nth-child(n + #{$days-count + 1}) { display: none; }