From bdbd70b0530bfa52eef80dac8192d64043ed54e5 Mon Sep 17 00:00:00 2001 From: Karina Turchyna Date: Wed, 5 Feb 2025 17:27:37 +0200 Subject: [PATCH 1/2] implement tasks --- readme.md | 2 +- src/index.html | 21 +++++++++++++--- src/styles/body.scss | 7 ++++++ src/styles/index.scss | 3 --- src/styles/main.scss | 4 +++ src/styles/watch.scss | 54 ++++++++++++++++++++++++++++++++++++++++ src/utils/keyframes.scss | 7 ++++++ src/utils/mixins.scss | 3 +++ 8 files changed, 93 insertions(+), 8 deletions(-) create mode 100644 src/styles/body.scss delete mode 100644 src/styles/index.scss create mode 100644 src/styles/main.scss create mode 100644 src/styles/watch.scss create mode 100644 src/utils/keyframes.scss create mode 100644 src/utils/mixins.scss diff --git a/readme.md b/readme.md index b55608052..29efc7804 100644 --- a/readme.md +++ b/readme.md @@ -32,7 +32,7 @@ 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://Karabesk.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. diff --git a/src/index.html b/src/index.html index 272a19648..d3b48e950 100644 --- a/src/index.html +++ b/src/index.html @@ -1,5 +1,9 @@ - + + Stop watch - -

Stop watch

+ + +
+
+
+
+
+
+
+
+
diff --git a/src/styles/body.scss b/src/styles/body.scss new file mode 100644 index 000000000..2f3e4335c --- /dev/null +++ b/src/styles/body.scss @@ -0,0 +1,7 @@ +.body { + display: flex; + width: 100vw; + height: 100vh; + justify-content: center; + align-items: center; +} diff --git a/src/styles/index.scss b/src/styles/index.scss deleted file mode 100644 index 293d3b1f1..000000000 --- a/src/styles/index.scss +++ /dev/null @@ -1,3 +0,0 @@ -body { - margin: 0; -} diff --git a/src/styles/main.scss b/src/styles/main.scss new file mode 100644 index 000000000..7e45778ea --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,4 @@ +@import '/src/utils/mixins'; +@import '/src/styles/watch'; +@import '/src/styles/body'; +@import '/src/utils/keyframes'; diff --git a/src/styles/watch.scss b/src/styles/watch.scss new file mode 100644 index 000000000..3e54b7622 --- /dev/null +++ b/src/styles/watch.scss @@ -0,0 +1,54 @@ +.stopwatch { + width: 80vmin; + height: 80vmin; + border: 1vmin dotted #000; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + + &__minutes-wrap { + transform: translate(140%, -50%); + } + + &__minutes-hand { + height: 20vmin; + width: 3vmin; + background-color: #0700ff; + + transform-origin: 50% 100%; + + @include animation-hands(3600s); + } + + &__seconds-wrap { + transform: translate(-211%, -50%); + } + + &__seconds-hand { + width: 1.5vmin; + height: 38vmin; + background-color: #2c8000; + + transform-origin: 50% 100%; + + @include animation-hands(60s); + } + + &__center-dot { + width: 5vmin; + height: 5vmin; + border-radius: 50%; + background-color: #f6a603; + + z-index: 1; + } + + &--speed-up &__seconds-hand { + @include animation-hands(10s); + } + + &--speed-up &__minutes-hand { + @include animation-hands(600s); + } +} diff --git a/src/utils/keyframes.scss b/src/utils/keyframes.scss new file mode 100644 index 000000000..95c1ba945 --- /dev/null +++ b/src/utils/keyframes.scss @@ -0,0 +1,7 @@ +@keyframes round { + @for $sec from 0 through 60 { + #{($sec * 100 / 60)}% { + transform: rotate(#{$sec * 6}deg); + } + } +} diff --git a/src/utils/mixins.scss b/src/utils/mixins.scss new file mode 100644 index 000000000..39f1fcb20 --- /dev/null +++ b/src/utils/mixins.scss @@ -0,0 +1,3 @@ +@mixin animation-hands($handTime) { + animation: round $handTime infinite linear; +} From c9ea22737ea06785ed1c27c50e897b82f77012a2 Mon Sep 17 00:00:00 2001 From: Karina Turchyna Date: Wed, 5 Feb 2025 17:55:49 +0200 Subject: [PATCH 2/2] reviewed tasks --- src/styles/main.scss | 3 +-- src/styles/watch.scss | 18 ++++++++++-------- src/utils/keyframes.scss | 9 +++++---- src/utils/mixins.scss | 3 --- 4 files changed, 16 insertions(+), 17 deletions(-) delete mode 100644 src/utils/mixins.scss diff --git a/src/styles/main.scss b/src/styles/main.scss index 7e45778ea..5399966e8 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,4 +1,3 @@ -@import '/src/utils/mixins'; +@import '/src/utils/keyframes'; @import '/src/styles/watch'; @import '/src/styles/body'; -@import '/src/utils/keyframes'; diff --git a/src/styles/watch.scss b/src/styles/watch.scss index 3e54b7622..bdec0ab6d 100644 --- a/src/styles/watch.scss +++ b/src/styles/watch.scss @@ -18,7 +18,7 @@ transform-origin: 50% 100%; - @include animation-hands(3600s); + animation: round 3600s steps(60) infinite; } &__seconds-wrap { @@ -32,7 +32,7 @@ transform-origin: 50% 100%; - @include animation-hands(60s); + animation: round 60s infinite linear; } &__center-dot { @@ -43,12 +43,14 @@ z-index: 1; } +} - &--speed-up &__seconds-hand { - @include animation-hands(10s); - } +.stopwatch--speed-up .stopwatch__seconds-hand { + animation: round 10s infinite linear; + transform-origin: 50% 100%; +} - &--speed-up &__minutes-hand { - @include animation-hands(600s); - } +.stopwatch--speed-up .stopwatch__minutes-hand { + animation: round 600s infinite linear; + transform-origin: 50% 100%; } diff --git a/src/utils/keyframes.scss b/src/utils/keyframes.scss index 95c1ba945..647f9eb74 100644 --- a/src/utils/keyframes.scss +++ b/src/utils/keyframes.scss @@ -1,7 +1,8 @@ @keyframes round { - @for $sec from 0 through 60 { - #{($sec * 100 / 60)}% { - transform: rotate(#{$sec * 6}deg); - } + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); } } diff --git a/src/utils/mixins.scss b/src/utils/mixins.scss deleted file mode 100644 index 39f1fcb20..000000000 --- a/src/utils/mixins.scss +++ /dev/null @@ -1,3 +0,0 @@ -@mixin animation-hands($handTime) { - animation: round $handTime infinite linear; -}