diff --git a/readme.md b/readme.md index b55608052f..66bb894f90 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://AdrJeeN.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..218effee99 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..9df0bc3273 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,82 @@ +$stop-watch-size: 80vmin; +$border-weight: 1vmin; +$border-color: #000; +$minute-hand-length: 20vmin; +$minute-hand-width: 3vmin; +$minute-hand-bgc: #0700ff; +$second-hand-length: 38vmin; +$sedond-hand-width: 1.5vmin; +$second-hand-bgc: #2c8000; +$center-size: 5vmin; +$center-bgc: #f6a603; + +@mixin hand { + position: absolute; + bottom: 50%; + left: 50%; + transform: translateX(-50%); +} + body { + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; margin: 0; } + +.stopwatch { + height: $stop-watch-size; + width: $stop-watch-size; + border: $border-weight dotted $border-color; + border-radius: 50%; + position: relative; + + &__minutes-hand { + @include hand; + + width: $minute-hand-width; + height: $minute-hand-length; + background-color: $minute-hand-bgc; + transform-origin: center bottom; + animation: rotate-clock 3600s steps(60, end) infinite; + } + + &__seconds-hand { + @include hand; + + width: $sedond-hand-width; + height: $second-hand-length; + background-color: $second-hand-bgc; + transform-origin: center bottom; + animation: rotate-clock 60s linear infinite; + } + + &__center { + width: $center-size; + height: $center-size; + background-color: $center-bgc; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + &--speed-up .stopwatch__minutes-hand { + animation-duration: 600s; + } + + &--speed-up .stopwatch__seconds-hand { + animation-duration: 10s; + } +} + +@keyframes rotate-clock { + from { + transform: translateX(-50%) rotate(0deg); + } + to { + transform: translateX(-50%) rotate(360deg); + } +}