add solution

mate-academy · Dec 18, 2024 · c599917 · c599917
1 parent f12c803
commit c599917
Show file tree

Hide file tree

Showing 8 changed files with 139 additions and 9 deletions.
diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template
@@ -0,0 +1,29 @@
+name: Test
+
+on:
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm install
+    - run: npm test
+    - name: Upload HTML report(backstop data)
+      if: ${{ always() }}
+      uses: actions/upload-artifact@v2
+      with:
+        name: report
+        path: backstop_data
diff --git a/README.md b/README.md
@@ -36,8 +36,8 @@ 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://Roksolana14>.github.io/layout_calendar/)
+- [TEST REPORT LINK](https://Roksolana14.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.
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "@mate-academy/backstop-config": "latest",
     "@mate-academy/bemlint": "latest",
     "@mate-academy/linthtml-config": "latest",
-    "@mate-academy/scripts": "^1.8.6",
+    "@mate-academy/scripts": "^1.9.12",
     "@mate-academy/stylelint-config": "latest",
     "@parcel/transformer-sass": "^2.12.0",
     "backstopjs": "6.3.23",

diff --git a/src/index.html b/src/index.html
@@ -9,10 +9,42 @@
     <title>Calendar</title>
     <link
       rel="stylesheet"
-      href="styles/index.scss"
+      href="styles/main.scss"
     />
   </head>
   <body>
-    <h1>Calendar</h1>
+    <ul class="calendar calendar--start-day-sun calendar--month-length-31">
+      <li class="calendar__day"></li>
+      <li class="calendar__day"></li>
+      <li class="calendar__day"></li>
+      <li class="calendar__day"></li>
+      <li class="calendar__day"></li>
+      <li class="calendar__day"></li>
+      <li class="calendar__day"></li>
+      <li class="calendar__day"></li>
+      <li class="calendar__day"></li>
+      <li class="calendar__day"></li>
+      <li class="calendar__day"></li>
+      <li class="calendar__day"></li>
+      <li class="calendar__day"></li>
+      <li class="calendar__day"></li>
+      <li class="calendar__day"></li>
+      <li class="calendar__day"></li>
+      <li class="calendar__day"></li>
+      <li class="calendar__day"></li>
+      <li class="calendar__day"></li>
+      <li class="calendar__day"></li>
+      <li class="calendar__day"></li>
+      <li class="calendar__day"></li>
+      <li class="calendar__day"></li>
+      <li class="calendar__day"></li>
+      <li class="calendar__day"></li>
+      <li class="calendar__day"></li>
+      <li class="calendar__day"></li>
+      <li class="calendar__day"></li>
+      <li class="calendar__day"></li>
+      <li class="calendar__day"></li>
+      <li class="calendar__day"></li>
+    </ul>
   </body>
 </html>
diff --git a/src/styles/includes/variables.scss b/src/styles/includes/variables.scss
@@ -0,0 +1,15 @@
+$size: 700px;
+$columns: 7;
+$calendar-day: ($size / $columns);
+$col-gap: 1px;
+$calendar-width: $size + ($col-gap * ($columns - 1));
+$days:
+  'mon' 0,
+  'tue' 1,
+  'wed' 2,
+  'thu' 3,
+  'fri' 4,
+  'sat' 5,
+  'sun' 6;
+$start-day: 'sun';
+$month-length: 31;
diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -1,3 +1,55 @@
 body {
   margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.calendar {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  gap: $col-gap;
+  width: $calendar-width;
+  padding: 10px;
+
+  &__day {
+    width: $calendar-day;
+    height: $calendar-day;
+    background-color: #eee;
+    box-sizing: border-box;
+    border: 1px solid black;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: transform 0.5s;
+
+    &:hover {
+      cursor: pointer;
+      background-color: #ffbfcb;
+      transform: translateY(-20px);
+    }
+
+    @for $row from 1 through $month-length {
+      &:nth-child(#{$row})::before {
+        content: '#{$row}';
+        font-family: Arial, Helvetica, sans-serif;
+        font-size: 30px;
+        color: black;
+      }
+    }
+  }
+}
+
+@each $day, $i in $days {
+  .calendar--start-day-#{$day} :first-child {
+    margin-left: $calendar-day * $i + $i;
+  }
+}
+
+@for $i from 28 through $month-length {
+  .calendar--month-length-#{$i} :nth-child(n + #{$i + 1}) {
+    display: none;
+  }
 }
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -0,0 +1,2 @@
+@import './includes/variables';
+@import './index';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@import './includes/variables';
		@import './index';