add task solution

mate-academy · Dec 23, 2024 · 7d7dfb8 · 7d7dfb8
1 parent f12c803
commit 7d7dfb8
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 1 deletion.
diff --git a/src/index.html b/src/index.html
@@ -1,3 +1,4 @@
+<!-- #region head -->
 <!doctype html>
 <html lang="en">
   <head>
@@ -12,7 +13,40 @@
       href="styles/index.scss"
     />
   </head>
+  <!-- #endregion -->
   <body>
-    <h1>Calendar</h1>
+    <div class="calendar calendar--month-length-31 calendar--start-day-sun">
+      <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>
   </body>
 </html>
diff --git 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
@@ -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);