From 7f0878a5ff70dbbf107a8a31274d91961c5b9a06 Mon Sep 17 00:00:00 2001 From: West-u Date: Mon, 2 Dec 2024 23:49:43 +0100 Subject: [PATCH 1/6] fix --- .github/workflows/test.yml-template | 29 +++++++++++++ package-lock.json | 9 ++-- package.json | 2 +- readme.md | 17 ++++---- src/index.html | 8 +++- src/styles/index.scss | 64 +++++++++++++++++++++++++++++ 6 files changed, 116 insertions(+), 13 deletions(-) create mode 100644 .github/workflows/test.yml-template diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 000000000..8b5743ecb --- /dev/null +++ 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/package-lock.json b/package-lock.json index 211b7ce4a..6d8d464c6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,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", @@ -1230,10 +1230,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "1.8.6", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.6.tgz", - "integrity": "sha512-b4om/whj4G9emyi84ORE3FRZzCRwRIesr8tJHXa8EvJdOaAPDpzcJ8A0sFfMsWH9NUOVmOwkBtOXDu5eZZ00Ig==", + "version": "1.9.12", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.9.12.tgz", + "integrity": "sha512-/OcmxMa34lYLFlGx7Ig926W1U1qjrnXbjFJ2TzUcDaLmED+A5se652NcWwGOidXRuMAOYLPU2jNYBEkKyXrFJA==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", diff --git a/package.json b/package.json index 5b13ea006..cc8982744 100644 --- 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/readme.md b/readme.md index b55608052..f767f85ac 100644 --- a/readme.md +++ b/readme.md @@ -1,9 +1,10 @@ # Stopwatch task Create a working stopwatch with minute and second hands using **only CSS animations**. + - Use the reference image below to create a stopwatch: - place it in the center of the page (vertically and horizontally) - - stopwatch must have a size of `80vmin` x `80vmin` + - stopwatch must have a size of `1` x `80vmin` - it should have a `1vmin` dotted round border with `#000` color - minutes hand should have a length of `20vmin` and `3vmin` width with blue (`#0700ff`) color - seconds hand should have a length of `38vmin` and `1.5vmin` width with green (`#2c8000`) color @@ -14,6 +15,7 @@ Create a working stopwatch with minute and second hands using **only CSS animati - For minutes hand use steps animation with 60 steps. It should take the `60min` for the minutes hand to make a full circle. In addition to the basic functionality create a BEM modifier called `speed-up` for your stopwatch block: + - it will take only `10s` for the seconds hand to make a full circle (change animation duration) - it will take only `10min` for the minutes hand to make a full circle (change animation duration) @@ -23,7 +25,7 @@ In addition to the basic functionality create a BEM modifier called `speed-up` f > Here are the [Layout Tasks Instructions](https://mate-academy.github.io/layout_task-guideline) -*Important note*: In this task, you are allowed to link `*.scss` files directly in HTML `` tags using `href` attribute. +_Important note_: In this task, you are allowed to link `*.scss` files directly in HTML `` tags using `href` attribute. This is possible because [we use the Parcel library](https://en.parceljs.org/scss.html) to bundle your solution's source code. ![reference image](reference.png) @@ -32,11 +34,12 @@ This is possible because [we use the Parcel library](https://en.parceljs.org/scs ## Checklist ❗️ Replace `` with your GitHub username and copy the links to the `Pull Request` description: -- [DEMO LINK](https://.github.io/layout_stop-watch/) + +- [DEMO LINK](https://.github.io/layout_stop-watch/) ❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it. -- [ ] Keyframes implemented using from/to + transform with rotate property -- [ ] Stopwatch is centered and has the correct arrows size -- [ ] All `Typical Mistakes` from the `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] Keyframes implemented using from/to + transform with rotate property +- [x] Stopwatch is centered and has the correct arrows size +- [x] All `Typical Mistakes` from the `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 index 272a19648..5813f9b34 100644 --- a/src/index.html +++ b/src/index.html @@ -17,6 +17,12 @@ /> -

Stop watch

+
+
+
+
+
+
+
diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f1..895bd9f91 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,67 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + body { margin: 0; } + +.container { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.stop-watch { + display: flex; + justify-content: center; + align-items: center; + position: relative; + border-radius: 50%; + height: 80vmin; + width: 80vmin; + border: 1vmin dotted #000; + + &__minutes-hand { + position: absolute; + top: 50%; + height: 20vmin; + left: 50%; + width: 3vmin; + transform-origin: center bottom; + animation: stop-watch--seconds 1s steps(60) infinite; + background-color: #0700ff; + } + &__seconds-hand { + position: absolute; + height: 38vmin; + width: 1.5vmin; + top: 50%; + left: 50%; + transform-origin: center bottom; + background-color: #2c8000; + animation: stop-watch--seconds 60s linear infinite; + } + &__stop-circle { + position: absolute; + background-color: #f6a603; + border-radius: 50%; + height: 5vmin; + width: 5vmin; + bottom: 50%; + left: 50%; + transform: translate(-50%, 50%); + } +} + +@keyframes stop-watch--seconds { + from { + transform: translate(-50%, -100%) rotate(0deg); + } + to { + transform: translate(-50%, -100%) rotate(360deg); + } +} From f34e4a2a1d44bb0096453ca652ac183880338198 Mon Sep 17 00:00:00 2001 From: West-u Date: Mon, 2 Dec 2024 23:49:54 +0100 Subject: [PATCH 2/6] . --- src/styles/index.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/styles/index.scss b/src/styles/index.scss index 895bd9f91..1ccd0afe0 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -32,7 +32,7 @@ body { left: 50%; width: 3vmin; transform-origin: center bottom; - animation: stop-watch--seconds 1s steps(60) infinite; + animation: rotate 3600s steps(60) infinite; background-color: #0700ff; } &__seconds-hand { @@ -43,7 +43,7 @@ body { left: 50%; transform-origin: center bottom; background-color: #2c8000; - animation: stop-watch--seconds 60s linear infinite; + animation: rotate 60s linear infinite; } &__stop-circle { position: absolute; @@ -57,7 +57,7 @@ body { } } -@keyframes stop-watch--seconds { +@keyframes rotate { from { transform: translate(-50%, -100%) rotate(0deg); } From d9659f9f8e1522ee6f21af41887c9e072b0197da Mon Sep 17 00:00:00 2001 From: West-u Date: Wed, 4 Dec 2024 21:57:48 +0100 Subject: [PATCH 3/6] upd --- src/styles/_mixins.scss | 11 ++++++++ src/styles/_variables.scss | 4 +++ src/styles/index.scss | 52 +++++++++++++++++++++----------------- 3 files changed, 44 insertions(+), 23 deletions(-) create mode 100644 src/styles/_mixins.scss create mode 100644 src/styles/_variables.scss diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss new file mode 100644 index 000000000..336cd1eee --- /dev/null +++ b/src/styles/_mixins.scss @@ -0,0 +1,11 @@ +@mixin flex-box($justify: center, $align: center, $direction: row) { + display: flex; + justify-content: $justify; + align-items: $align; + flex-direction: $direction; +} + +@mixin position-center($top: 0, $left: 50%) { + top: $top; + left: $left; +} diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss new file mode 100644 index 000000000..48aff1605 --- /dev/null +++ b/src/styles/_variables.scss @@ -0,0 +1,4 @@ +$border__color: #000; +$minutes__hand: #0700ff; +$seconds__hand: #2c8000; +$stop__circle: #f6a603; diff --git a/src/styles/index.scss b/src/styles/index.scss index 1ccd0afe0..33eb0cea7 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,6 @@ +@use '_mixins' as mix; +@use '_variables' as var; + * { margin: 0; padding: 0; @@ -6,62 +9,65 @@ body { margin: 0; + height: 100vh; } .container { - display: flex; - justify-content: center; - align-items: center; - height: 100vh; + @include mix.flex-box; + height: 100%; } .stop-watch { - display: flex; - justify-content: center; - align-items: center; + @include mix.flex-box; position: relative; border-radius: 50%; height: 80vmin; width: 80vmin; - border: 1vmin dotted #000; + border: 1vmin dotted var.$border__color; &__minutes-hand { position: absolute; - top: 50%; + @include mix.position-center; height: 20vmin; - left: 50%; width: 3vmin; - transform-origin: center bottom; - animation: rotate 3600s steps(60) infinite; - background-color: #0700ff; + transform-origin: 50% 100%; + animation: rotate-minutes 3600s steps(60) infinite; + background-color: var; } &__seconds-hand { position: absolute; + @include mix.position-center; height: 38vmin; width: 1.5vmin; - top: 50%; - left: 50%; - transform-origin: center bottom; + transform-origin: 50% 100%; background-color: #2c8000; - animation: rotate 60s linear infinite; + animation: rotate-seconds 60s linear infinite; } &__stop-circle { position: absolute; + @include mix.position-center; background-color: #f6a603; border-radius: 50%; height: 5vmin; width: 5vmin; - bottom: 50%; - left: 50%; - transform: translate(-50%, 50%); + transform: translate(-50%, -50%); + } +} + +@keyframes rotate-minutes { + from { + transform: translate(-50%, 0) rotate(0deg); + } + to { + transform: translate(-50%, 0) rotate(360deg); } } -@keyframes rotate { +@keyframes rotate-seconds { from { - transform: translate(-50%, -100%) rotate(0deg); + transform: translate(-50%, 0) rotate(0deg); } to { - transform: translate(-50%, -100%) rotate(360deg); + transform: translate(-50%, 0) rotate(360deg); } } From a84d39bd33d0dad52dc7780b029b1581cc9594e7 Mon Sep 17 00:00:00 2001 From: West-u Date: Wed, 4 Dec 2024 21:58:18 +0100 Subject: [PATCH 4/6] upd2.0 --- src/styles/index.scss | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/styles/index.scss b/src/styles/index.scss index 33eb0cea7..7d8d59006 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -14,11 +14,13 @@ body { .container { @include mix.flex-box; + height: 100%; } .stop-watch { @include mix.flex-box; + position: relative; border-radius: 50%; height: 80vmin; @@ -26,8 +28,9 @@ body { border: 1vmin dotted var.$border__color; &__minutes-hand { - position: absolute; @include mix.position-center; + + position: absolute; height: 20vmin; width: 3vmin; transform-origin: 50% 100%; @@ -35,18 +38,20 @@ body { background-color: var; } &__seconds-hand { - position: absolute; @include mix.position-center; + + position: absolute; height: 38vmin; width: 1.5vmin; transform-origin: 50% 100%; - background-color: #2c8000; + background-color: var.$seconds__hand; animation: rotate-seconds 60s linear infinite; } &__stop-circle { - position: absolute; @include mix.position-center; - background-color: #f6a603; + + position: absolute; + background-color: var.$stop__circle; border-radius: 50%; height: 5vmin; width: 5vmin; From de5c07574cd8463339e32d6e191683f62134e95e Mon Sep 17 00:00:00 2001 From: West-u Date: Fri, 6 Dec 2024 21:12:18 +0100 Subject: [PATCH 5/6] some change --- src/styles/_mixins.scss | 2 +- src/styles/index.scss | 18 +++++++----------- 2 files changed, 8 insertions(+), 12 deletions(-) diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index 336cd1eee..5bcf376a5 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -5,7 +5,7 @@ flex-direction: $direction; } -@mixin position-center($top: 0, $left: 50%) { +@mixin position-center($top: 50%, $left: 50%) { top: $top; left: $left; } diff --git a/src/styles/index.scss b/src/styles/index.scss index 7d8d59006..f595e10d2 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -19,8 +19,6 @@ body { } .stop-watch { - @include mix.flex-box; - position: relative; border-radius: 50%; height: 80vmin; @@ -28,14 +26,12 @@ body { border: 1vmin dotted var.$border__color; &__minutes-hand { - @include mix.position-center; - position: absolute; height: 20vmin; width: 3vmin; - transform-origin: 50% 100%; + transform-origin: bottom; animation: rotate-minutes 3600s steps(60) infinite; - background-color: var; + background-color: var.$minutes__hand; } &__seconds-hand { @include mix.position-center; @@ -43,7 +39,7 @@ body { position: absolute; height: 38vmin; width: 1.5vmin; - transform-origin: 50% 100%; + transform-origin: bottom; background-color: var.$seconds__hand; animation: rotate-seconds 60s linear infinite; } @@ -61,18 +57,18 @@ body { @keyframes rotate-minutes { from { - transform: translate(-50%, 0) rotate(0deg); + transform: rotate(0deg); } to { - transform: translate(-50%, 0) rotate(360deg); + transform: rotate(360deg); } } @keyframes rotate-seconds { from { - transform: translate(-50%, 0) rotate(0deg); + transform: rotate(0deg); } to { - transform: translate(-50%, 0) rotate(360deg); + transform: rotate(360deg); } } From 19bd1e76ea2bc6707102c6c33f380ef64c9e70e2 Mon Sep 17 00:00:00 2001 From: West-u Date: Fri, 6 Dec 2024 22:24:06 +0100 Subject: [PATCH 6/6] finish --- src/index.html | 8 ++++---- src/styles/_mixins.scss | 5 ----- src/styles/index.scss | 30 ++++++++++++++++-------------- 3 files changed, 20 insertions(+), 23 deletions(-) diff --git a/src/index.html b/src/index.html index 5813f9b34..0fd612cd8 100644 --- a/src/index.html +++ b/src/index.html @@ -18,10 +18,10 @@
-
-
-
-
+
+
+
+
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index 5bcf376a5..76462178f 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -4,8 +4,3 @@ align-items: $align; flex-direction: $direction; } - -@mixin position-center($top: 50%, $left: 50%) { - top: $top; - left: $left; -} diff --git a/src/styles/index.scss b/src/styles/index.scss index f595e10d2..4807ccd34 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,12 +1,6 @@ @use '_mixins' as mix; @use '_variables' as var; -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - body { margin: 0; height: 100vh; @@ -18,7 +12,9 @@ body { height: 100%; } -.stop-watch { +.stopwatch { + @include mix.flex-box; + position: relative; border-radius: 50%; height: 80vmin; @@ -27,31 +23,37 @@ body { &__minutes-hand { position: absolute; + top: calc(40vmin - 20vmin); + transform-origin: 50% 100%; height: 20vmin; width: 3vmin; - transform-origin: bottom; animation: rotate-minutes 3600s steps(60) infinite; background-color: var.$minutes__hand; } &__seconds-hand { - @include mix.position-center; - position: absolute; + top: calc(40vmin - 38vmin); + transform-origin: 50% 100%; height: 38vmin; width: 1.5vmin; - transform-origin: bottom; background-color: var.$seconds__hand; animation: rotate-seconds 60s linear infinite; } &__stop-circle { - @include mix.position-center; - position: absolute; background-color: var.$stop__circle; border-radius: 50%; height: 5vmin; width: 5vmin; - transform: translate(-50%, -50%); + z-index: 10; + } + &--speed-up { + .stopwatch__minutes-hand { + animation-duration: 600s; + } + .stopwatch__seconds-hand { + animation-duration: 10s; + } } }