From e2bd3e4e102e85e3109d2dabc2268d3425a3236e Mon Sep 17 00:00:00 2001 From: Oleksandr Date: Thu, 9 Jul 2026 20:41:30 +0300 Subject: [PATCH 1/2] add task solution --- readme.md | 7 ++-- src/index.html | 6 +++- src/styles/index.scss | 77 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 87 insertions(+), 3 deletions(-) diff --git a/readme.md b/readme.md index b55608052f..a5731193cc 100644 --- a/readme.md +++ b/readme.md @@ -1,6 +1,7 @@ # 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` @@ -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,7 +34,8 @@ 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://AlexFromUkraine.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 272a196488..d7c0cabdeb 100644 --- a/src/index.html +++ b/src/index.html @@ -17,6 +17,10 @@ /> -

Stop watch

+
+
+
+
+
diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..bc1513de3c 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,80 @@ +$seconds-time: 60s; +$minutes-time: 3600s; +$time-multiplier: 10; + body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; margin: 0; } + +.stopwatch { + position: relative; + width: 80vmin; + height: 80vmin; + border: 1vmin dotted #000; + border-radius: 50%; + + &__minutes-hand { + position: absolute; + top: 50%; + left: 50%; + width: 3vmin; + height: 20vmin; + background-color: #0700ff; + transform: translate(-50%, -100%) rotate(0deg); + transform-origin: bottom center; + animation: tick-minutes $minutes-time steps(60) infinite; + } + + &__seconds-hand { + position: absolute; + top: 50%; + left: 50%; + width: 1.5vmin; + height: 38vmin; + background-color: #2c8000; + transform: translate(-50%, -100%) rotate(0deg); + transform-origin: bottom center; + animation: spi n-seconds $seconds-time linear infinite; + } + + &__center { + position: absolute; + top: 50%; + left: 50%; + width: 5vmin; + height: 5vmin; + background-color: #f6a603; + border-radius: 50%; + transform: translate(-50%, -50%); + } + + &--speed-up &__minutes-hand { + animation-duration: 60s * $time-multiplier; + } + + &--speed-up &__seconds-hand { + animation-duration: 1s * $time-multiplier; + } +} + +@keyframes spin-seconds { + from { + transform: translate(-50%, -100%) rotate(0deg); + } + to { + transform: translate(-50%, -100%) rotate(360deg); + } +} + +@keyframes tick-minutes { + from { + transform: translate(-50%, -100%) rotate(0deg); + } + to { + transform: translate(-50%, -100%) rotate(360deg); + } +} From 6777f6a618377b7a2d544bcdabc8530dc5a712eb Mon Sep 17 00:00:00 2001 From: Oleksandr Date: Thu, 9 Jul 2026 20:54:02 +0300 Subject: [PATCH 2/2] fix: resolve mentor review comments --- src/styles/index.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/styles/index.scss b/src/styles/index.scss index bc1513de3c..93f7728912 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,6 +1,6 @@ $seconds-time: 60s; $minutes-time: 3600s; -$time-multiplier: 10; +$speed-up-ratio: 6; body { display: flex; @@ -26,7 +26,7 @@ body { background-color: #0700ff; transform: translate(-50%, -100%) rotate(0deg); transform-origin: bottom center; - animation: tick-minutes $minutes-time steps(60) infinite; + animation: change-minutes $minutes-time steps(60) infinite; } &__seconds-hand { @@ -38,7 +38,7 @@ body { background-color: #2c8000; transform: translate(-50%, -100%) rotate(0deg); transform-origin: bottom center; - animation: spi n-seconds $seconds-time linear infinite; + animation: change-seconds $seconds-time linear infinite; // Виправлено назву анімації на change-seconds } &__center { @@ -53,15 +53,15 @@ body { } &--speed-up &__minutes-hand { - animation-duration: 60s * $time-multiplier; + animation-duration: $minutes-time / $speed-up-ratio; } &--speed-up &__seconds-hand { - animation-duration: 1s * $time-multiplier; + animation-duration: $seconds-time / $speed-up-ratio; } } -@keyframes spin-seconds { +@keyframes change-seconds { from { transform: translate(-50%, -100%) rotate(0deg); } @@ -70,7 +70,7 @@ body { } } -@keyframes tick-minutes { +@keyframes change-minutes { from { transform: translate(-50%, -100%) rotate(0deg); }