add task solution

mate-academy · Oct 28, 2024 · 57d3bfb · 57d3bfb
1 parent 7f98364
commit 57d3bfb
Show file tree

Hide file tree

Showing 7 changed files with 378 additions and 2 deletions.
diff --git a/src/index.html b/src/index.html
@@ -13,6 +13,40 @@
     />
   </head>
   <body>
-    <h1>Calendar</h1>
+    <main class="calendar">
+      <div
+        class="day calendar__day1 day--mon day--tue day--wed day--thu day--fri day--sat day--sun"
+      ></div>
+      <div class="day calendar__day2"></div>
+      <div class="day calendar__day3"></div>
+      <div class="day calendar__day4"></div>
+      <div class="day calendar__day5"></div>
+      <div class="day calendar__day6"></div>
+      <div class="day calendar__day7"></div>
+      <div class="day calendar__day8"></div>
+      <div class="day calendar__day9"></div>
+      <div class="day calendar__day10"></div>
+      <div class="day calendar__day11"></div>
+      <div class="day calendar__day12"></div>
+      <div class="day calendar__day13"></div>
+      <div class="day calendar__day14"></div>
+      <div class="day calendar__day15"></div>
+      <div class="day calendar__day16"></div>
+      <div class="day calendar__day17"></div>
+      <div class="day calendar__day18"></div>
+      <div class="day calendar__day19"></div>
+      <div class="day calendar__day20"></div>
+      <div class="day calendar__day21"></div>
+      <div class="day calendar__day22"></div>
+      <div class="day calendar__day23"></div>
+      <div class="day calendar__day24"></div>
+      <div class="day calendar__day25"></div>
+      <div class="day calendar__day26"></div>
+      <div class="day calendar__day27"></div>
+      <div class="day calendar__day28 day__month--length"></div>
+      <div class="day calendar__day29 day__month--length"></div>
+      <div class="day calendar__day30 day__month--length"></div>
+      <div class="day calendar__day31 day__month--length"></div>
+    </main>
   </body>
 </html>
diff --git a/src/style.css b/src/style.css
diff --git a/src/style.css.map b/src/style.css.map
diff --git a/src/styles/blocks/calendar.scss b/src/styles/blocks/calendar.scss
@@ -0,0 +1,10 @@
+.calendar {
+  box-sizing: border-box;
+  padding: 10px;
+  width: 732px;
+  min-height: 500px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1px;
+}
diff --git a/src/styles/blocks/days.scss b/src/styles/blocks/days.scss
@@ -0,0 +1,27 @@
+.day {
+  width: 100px;
+  height: 100px;
+  box-sizing: border-box;
+  background-color: #eee;
+  border: 1px solid black;
+  margin: 0;
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.5s;
+}
+
+.day:hover {
+  cursor: pointer;
+  background-color: #ffbfcb;
+  transform: translateY(-20px);
+}
+
+@for $i from 1 through 31 {
+  .calendar__day#{$i}::before {
+    content: '#{$i}';
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 30px;
+  }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -1,3 +1,13 @@
+@use './blocks/calendar.scss';
+@use './blocks/days.scss';
+@use './utils/variables.scss';
+
 body {
-  margin: 0;
+  margin: 0 auto;
+  padding: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  width: 1000px;
 }
diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss
@@ -0,0 +1,22 @@
+$start-day: // a
+  'mon' 0,
+  'tue' 105px,
+  'wed' 205px,
+  'thu' 305px,
+  'fri' 405px,
+  'sat' 505px,
+  'sun' 606px;
+
+@each $day, $margin in $start-day {
+  .day--#{$day} {
+    margin-left: $margin;
+  }
+}
+
+$month-length: 28, 29, 30, 31;
+
+@for $i from 28 through 31 {
+  .calendar .day__month--length:nth-child(#{$i}) {
+    opacity: 1;
+  }
+}