From 7d7dfb82c0236c46996f28800a56f690474af98a Mon Sep 17 00:00:00 2001
From: Amir Al-Mohamad <131036084+amir-al-mohamad@users.noreply.github.com>
Date: Mon, 23 Dec 2024 15:50:54 +0200
Subject: [PATCH] add task solution
---
src/index.html | 36 +++++++++++++++++++-
src/styles/index.scss | 72 +++++++++++++++++++++++++++++++++++++++
src/styles/variables.scss | 6 ++++
3 files changed, 113 insertions(+), 1 deletion(-)
create mode 100644 src/styles/variables.scss
diff --git a/src/index.html b/src/index.html
index c10199d38..0cf74c08b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,3 +1,4 @@
+
@@ -12,7 +13,40 @@
href="styles/index.scss"
/>
+
- Calendar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 293d3b1f1..87e106212 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,3 +1,75 @@
+@import 'variables';
+
+* {
+ box-sizing: border-box;
+}
+
body {
margin: 0;
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.calendar {
+ margin: auto;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 30px;
+ width: $container-size;
+ padding: $container-padding;
+
+ display: flex;
+ gap: $space-between-box;
+ flex-wrap: wrap;
+}
+
+@for $i from 1 through 31 {
+ .calendar__day:nth-child(#{$i})::before {
+ content: '#{$i}';
+ }
+}
+
+@for $i from 28 through 31 {
+ .calendar--month-length-#{$i} {
+ @for $j from ($i + 1) through 32 {
+ .calendar__day:nth-child(#{$j}) {
+ display: none;
+ }
+ }
+ }
+}
+
+$week-days: (
+ 'mon': 1,
+ 'tue': 2,
+ 'wed': 3,
+ 'thu': 4,
+ 'fri': 5,
+ 'sat': 6,
+ 'sun': 7,
+);
+
+@each $name, $week-day in $week-days {
+ .calendar--start-day-#{$name} > div:nth-child(1) {
+ margin-left: ($week-day - 1) * ($day-box-size + $space-between-box);
+ }
+}
+
+.calendar__day {
+ width: $day-box-size;
+ height: $day-box-size;
+ background-color: #eee;
+ border: 1px solid black;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.calendar__day:hover {
+ cursor: pointer;
+ background-color: #ffbfcb;
+ transform: translateY(-20px);
+ transition-duration: 500ms;
}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
new file mode 100644
index 000000000..ee766d40b
--- /dev/null
+++ b/src/styles/variables.scss
@@ -0,0 +1,6 @@
+$day-box-size: 100px;
+$space-between-box: 1px;
+$container-padding: 10px;
+$all-box-sizes: $day-box-size * 7;
+$all-space-between: $space-between-box * 6;
+$container-size: $all-box-sizes + $all-space-between + ($container-padding * 2);