add solution

mate-academy · Dec 15, 2024 · b96dc63 · b96dc63
1 parent f12c803
commit b96dc63
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -36,13 +36,13 @@ This is possible because [we use the Parcel library](https://en.parceljs.org/scs
 
 ❗️ Replace `<your_account>` with your Github username and copy the links to `Pull Request` description:
 
-- [DEMO LINK](https://<your_account>.github.io/layout_calendar/)
-- [TEST REPORT LINK](https://<your_account>.github.io/layout_calendar/report/html_report/)
+- [DEMO LINK](https://YuliaSabitova.github.io/layout_calendar/)
+- [TEST REPORT LINK](https://YuliaSabitova.github.io/layout_calendar/report/html_report/)
 
 ❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it.
 
-- [ ] Changing 'month-lengh' and 'start-day' modifier in the code element
+- [x] Changing 'month-lengh' and 'start-day' modifier in the code element
 reflects in changing calendar layout
-- [ ] Each day has no modifiers, only class (eg. calendar__day)
-- [ ] All `Typical Mistakes` from `BEM` lesson theory are checked.
-- [ ] Code follows all the [Code Style Rules ❗️](https://mate-academy.github.io/layout_task-guideline/html-css-code-style-rules)
+- [x] Each day has no modifiers, only class (eg. calendar__day)
+- [x] All `Typical Mistakes` from `BEM` lesson theory are checked.
+- [x] Code follows all the [Code Style Rules ❗️](https://mate-academy.github.io/layout_task-guideline/html-css-code-style-rules)
diff --git a/src/index.html b/src/index.html
@@ -14,5 +14,38 @@
   </head>
   <body>
     <h1>Calendar</h1>
+    <div class="calendar calendar--start-day-sun calendar--month-length-31">
+      <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,76 @@
+$day-size: 100px;
+$day-gap: 1px;
+$day-border: 1px solid #000;
+$hover-color: #ffbfcb;
+$day-size-gap: $day-size + $day-gap;
+$calendar-width: calc(10px + $day-size + (#{$day-size-gap} * 6) + 10px);
+
+* {
+  box-sizing: border-box;
+}
+
 body {
   margin: 0;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  display: flex;
+}
+
+.calendar {
+  display: flex;
+  flex-wrap: wrap;
+  width: $calendar-width;
+  gap: $day-gap;
+  padding: 10px;
+  counter-reset: day;
+}
+
+@each $day,
+  $margin
+    in (
+      mon: 0,
+      tue: $day-size-gap * 1,
+      wed: $day-size-gap * 2,
+      thu: $day-size-gap * 3,
+      fri: $day-size-gap * 4,
+      sat: $day-size-gap * 5,
+      sun: $day-size-gap * 6
+    )
+{
+  .calendar--start-day-#{$day} .calendar__day:first-child {
+    margin-left: $margin;
+  }
+}
+
+@for $days from 28 through 31 {
+  .calendar--month-length-#{$days} .calendar__day:nth-child(n + #{$days + 1}) {
+    display: none;
+  }
+}
+
+.calendar__day {
+  width: $day-size;
+  height: $day-size;
+  border: $day-border;
+  background-color: #eee;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition-duration: 0.5s;
+  counter-increment: day;
+  font-family: Arial, sans-serif;
+  font-size: 30px;
+
+  &::before {
+    content: counter(day);
+  }
+
+  &:hover {
+    cursor: pointer;
+    background-color: $hover-color;
+    transform: translateY(-20px);
+    transition-duration: 0.5s;
+  }
 }