From 94e9e6e3eb22b8d8e8f80a42ab934bb58df35ea1 Mon Sep 17 00:00:00 2001 From: Vikike123 Date: Mon, 16 Feb 2026 21:28:37 +0100 Subject: [PATCH 1/3] add task solution --- src/index.html | 38 ++++++++++++++- src/styles/index.scss | 3 -- src/styles/main.scss | 107 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 143 insertions(+), 5 deletions(-) delete mode 100644 src/styles/index.scss create mode 100644 src/styles/main.scss diff --git a/src/index.html b/src/index.html index c10199d38b..286c42ed22 100644 --- a/src/index.html +++ b/src/index.html @@ -9,10 +9,44 @@ Calendar -

Calendar

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 new file mode 100644 index 0000000000..f6efa9b1a3 --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,107 @@ +// --- Variables --- +$cell-size: 100px; +$gap: 1px; +$padding: 10px; +$day-bg: #eee; +$day-hover-bg: #ffbfcb; +$text-color: #000; +$border-color: #000; + +// --- Global Layout (Centering) --- +body { + height: 100vh; + margin: 0; + display: flex; + justify-content: center; + align-items: center; + font-family: Arial, sans-serif; +} + +// --- BEM Block: Calendar --- +.calendar { + display: flex; + flex-wrap: wrap; + gap: $gap; + padding: $padding; + + // Logic: 7 columns * size + 6 gaps + width: calc((#{$cell-size} * 7) + (#{$gap} * 6)); + + // Optional: Add a border to the calendar container itself if desired + // border: 1px solid #ccc; + + &__day { + box-sizing: border-box; + width: $cell-size; + height: $cell-size; + background-color: $day-bg; + border: 1px solid $border-color; + + // Centering the number + display: flex; + justify-content: center; + align-items: center; + + // Typography + font-size: 30px; + font-weight: normal; + + // Optional, looks better with Arial 30px + + // Animation + transition: all 0.5s ease; + + // Hover Effects + &:hover { + background-color: $day-hover-bg; + cursor: pointer; + transform: translateY(-20px); + + // Ensure it stays on top of neighbors when moved + position: relative; + z-index: 1; + } + } + + // --- Automatic Numbering --- + // Loop from 1 to 31 to add numbers via CSS + @for $i from 1 through 31 { + &__day:nth-child(#{$i})::before { + content: '#{$i}'; + } + } + + // --- Modifier: Month Length --- + // Hides extra days based on the month length (28, 29, 30, 31) + @for $length from 28 through 31 { + &--month-length-#{$length} { + // If length is 30, we hide from child 31 onwards + .calendar__day:nth-child(n + #{$length + 1}) { + display: none; + } + } + } + + // --- Modifier: Start Day --- + // Shifts the first day to the correct column + // We define the list of days and their index (Mon=0 shift, Sun=6 shifts) + $days: ( + mon: 0, + tue: 1, + wed: 2, + thu: 3, + fri: 4, + sat: 5, + sun: 6, + ); + + @each $day, $index in $days { + // OLD: &--start-#{$day} -> creates .calendar--start-sun + // NEW: &--start-day-#{$day} -> creates .calendar--start-day-sun + &--start-day-#{$day} { + .calendar__day:first-child { + margin-left: calc((#{$cell-size} + #{$gap}) * #{$index}); + } + } + } +} From 1588a88ec05edc0051bee91e9b87f29836171e11 Mon Sep 17 00:00:00 2001 From: Vikike123 Date: Tue, 17 Feb 2026 20:52:54 +0100 Subject: [PATCH 2/3] add task solution --- src/index.html | 4 +- src/styles/main.scss | 131 +++++++++++++++++++------------------------ 2 files changed, 58 insertions(+), 77 deletions(-) diff --git a/src/index.html b/src/index.html index 286c42ed22..6245b0a7a0 100644 --- a/src/index.html +++ b/src/index.html @@ -13,9 +13,7 @@ /> -
+
diff --git a/src/styles/main.scss b/src/styles/main.scss index f6efa9b1a3..0ede45202e 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,107 +1,90 @@ -// --- Variables --- $cell-size: 100px; +$border-size: 1px; $gap: 1px; +$columns: 7; $padding: 10px; +$cell-step: $cell-size + $gap; $day-bg: #eee; -$day-hover-bg: #ffbfcb; -$text-color: #000; $border-color: #000; -// --- Global Layout (Centering) --- body { - height: 100vh; margin: 0; + min-height: 100vh; display: flex; justify-content: center; align-items: center; - font-family: Arial, sans-serif; } -// --- BEM Block: Calendar --- .calendar { + padding: $padding; + display: flex; flex-wrap: wrap; gap: $gap; - padding: $padding; - - // Logic: 7 columns * size + 6 gaps - width: calc((#{$cell-size} * 7) + (#{$gap} * 6)); - - // Optional: Add a border to the calendar container itself if desired - // border: 1px solid #ccc; - &__day { - box-sizing: border-box; - width: $cell-size; - height: $cell-size; - background-color: $day-bg; - border: 1px solid $border-color; + width: calc( + #{$columns} * #{$cell-size} + (#{$columns} - 1) * #{$gap} + 2 * #{$padding} + ); - // Centering the number - display: flex; - justify-content: center; - align-items: center; + box-sizing: border-box; +} - // Typography - font-size: 30px; - font-weight: normal; +.calendar__day { + width: $cell-size; + height: $cell-size; + box-sizing: border-box; - // Optional, looks better with Arial 30px + background-color: $day-bg; + border: $border-size solid $border-color; - // Animation - transition: all 0.5s ease; + display: flex; + justify-content: center; + align-items: center; + transition: + background-color 0.5s, + transform 0.5s; +} - // Hover Effects - &:hover { - background-color: $day-hover-bg; - cursor: pointer; - transform: translateY(-20px); +.calendar__day::before { + font-family: Arial, sans-serif; + font-size: 30px; + content: ''; +} - // Ensure it stays on top of neighbors when moved - position: relative; - z-index: 1; - } +@for $i from 1 through 31 { + .calendar__day:nth-child(#{$i})::before { + content: '#{$i}'; } +} - // --- Automatic Numbering --- - // Loop from 1 to 31 to add numbers via CSS - @for $i from 1 through 31 { - &__day:nth-child(#{$i})::before { - content: '#{$i}'; - } - } +.calendar__day:hover { + cursor: pointer; + background-color: #ffbfcb; + transform: translateY(-20px); +} + +$start-days: ( + mon: 1, + tue: 2, + wed: 3, + thu: 4, + fri: 5, + sat: 6, + sun: 7, +); - // --- Modifier: Month Length --- - // Hides extra days based on the month length (28, 29, 30, 31) - @for $length from 28 through 31 { - &--month-length-#{$length} { - // If length is 30, we hide from child 31 onwards - .calendar__day:nth-child(n + #{$length + 1}) { - display: none; - } +@each $day, $col in $start-days { + .calendar--start-day-#{$day} { + .calendar__day:first-child { + margin-left: ($col - 1) * $cell-step; } } +} - // --- Modifier: Start Day --- - // Shifts the first day to the correct column - // We define the list of days and their index (Mon=0 shift, Sun=6 shifts) - $days: ( - mon: 0, - tue: 1, - wed: 2, - thu: 3, - fri: 4, - sat: 5, - sun: 6, - ); - - @each $day, $index in $days { - // OLD: &--start-#{$day} -> creates .calendar--start-sun - // NEW: &--start-day-#{$day} -> creates .calendar--start-day-sun - &--start-day-#{$day} { - .calendar__day:first-child { - margin-left: calc((#{$cell-size} + #{$gap}) * #{$index}); - } +@for $len from 28 through 31 { + .calendar--month-length-#{$len} { + .calendar__day:nth-child(n + #{$len + 1}) { + display: none; } } } From f23e6e8f2dfd7c815fa199895ec3a0f2b85bee67 Mon Sep 17 00:00:00 2001 From: Vikike123 Date: Tue, 17 Feb 2026 21:42:16 +0100 Subject: [PATCH 3/3] add task solution --- src/styles/main.scss | 112 +++++++++++++++++++++---------------------- 1 file changed, 54 insertions(+), 58 deletions(-) diff --git a/src/styles/main.scss b/src/styles/main.scss index 0ede45202e..6f7149e5f4 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,90 +1,86 @@ -$cell-size: 100px; -$border-size: 1px; +$day-size: 100px; +$border: 1px; $gap: 1px; -$columns: 7; $padding: 10px; -$cell-step: $cell-size + $gap; -$day-bg: #eee; -$border-color: #000; +$font-size: 30px; +$bg: #eee; +$hover: #ffbfcb; +$col-width: $day-size; +$container-width: 7 * $col-width + 6 * $gap + 2 * $padding; +$week-days: ( + mon: 1, + tue: 2, + wed: 3, + thu: 4, + fri: 5, + sat: 6, + sun: 7, +); body { margin: 0; - min-height: 100vh; display: flex; - justify-content: center; align-items: center; + justify-content: center; + min-height: 100vh; } .calendar { - padding: $padding; - display: flex; flex-wrap: wrap; gap: $gap; - - width: calc( - #{$columns} * #{$cell-size} + (#{$columns} - 1) * #{$gap} + 2 * #{$padding} - ); - - box-sizing: border-box; -} - -.calendar__day { - width: $cell-size; - height: $cell-size; + padding: $padding; + width: $container-width; box-sizing: border-box; - background-color: $day-bg; - border: $border-size solid $border-color; + &__day { + width: $day-size; + height: $day-size; + background: $bg; + border: $border solid #000; + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + transition: + transform 0.5s, + background-color 0.5s; - display: flex; - justify-content: center; - align-items: center; - transition: - background-color 0.5s, - transform 0.5s; -} + &:hover { + cursor: pointer; + background: $hover; + transform: translateY(-20px); + z-index: 1; + } -.calendar__day::before { - font-family: Arial, sans-serif; - font-size: 30px; - content: ''; + &::before { + display: block; + pointer-events: none; + text-align: center; + box-sizing: border-box; + user-select: none; + } + } } @for $i from 1 through 31 { .calendar__day:nth-child(#{$i})::before { content: '#{$i}'; + font-family: Arial, sans-serif; + font-size: $font-size; } } -.calendar__day:hover { - cursor: pointer; - background-color: #ffbfcb; - transform: translateY(-20px); -} - -$start-days: ( - mon: 1, - tue: 2, - wed: 3, - thu: 4, - fri: 5, - sat: 6, - sun: 7, -); - -@each $day, $col in $start-days { - .calendar--start-day-#{$day} { - .calendar__day:first-child { - margin-left: ($col - 1) * $cell-step; +@each $name, $pos in $week-days { + .calendar--start-day-#{$name} { + .calendar__day:nth-child(1) { + margin-left: ($pos - 1) * ($day-size + $gap); } } } @for $len from 28 through 31 { - .calendar--month-length-#{$len} { - .calendar__day:nth-child(n + #{$len + 1}) { - display: none; - } + .calendar--month-length-#{$len} .calendar__day:nth-child(n + #{$len + 1}) { + display: none; } }