Skip to content

add solution #4172

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Kiofd wants to merge 2 commits into
base: master
Choose a base branch
from
Open

add solution #4172

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e1b8d0e
add solution
Kiofd Jun 25, 2026
a8a413a
fix problems
Kiofd Jun 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@
/>
</head>
<body>
<h1>Stop watch</h1>
<div class="stopwatch stopwatch--speed-up">
<div class="stopwatch__center"></div>
<div class="stopwatch__minutes-hand"></div>
<div class="stopwatch__seconds-hand"></div>
</div>
</body>
</html>
67 changes: 67 additions & 0 deletions src/styles/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,70 @@
@import './variables';

@keyframes rotate-full {
from {
transform: rotate(0deg);
}

to {
transform: rotate(360deg);
}
}

body {
margin: 0;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}

.stopwatch {
display: flex;
justify-content: center;
align-items: center;
height: $watch-size;
width: $watch-size;
border-style: dotted;
border-width: $dot-size;
border-radius: 50%;

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 25, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The stopwatch border is missing an explicit border-color: #000;, which is required in the task description (“it should have a 1vmin dotted round border with #000 color”). Please add the color to satisfy this requirement.

border-color: $dot-color;
position: relative;

&--speed-up {
--minute-duration: 10s;
}

&__center {
position: absolute;
height: $center-diametr;
width: $center-diametr;
background-color: $center-color;
border-radius: 50%;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Comment on lines +38 to +48

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 25, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The center element has top: 50% and left: 50% but no position: absolute and no centering transform, so it won’t be visually centered in the stopwatch. This violates checklist item “Stopwatch is centered and has the correct arrows size” because the center dot is part of the stopwatch’s centered layout. Consider making it absolutely positioned and using transform: translate(-50%, -50%).


&__minutes-hand,
&__seconds-hand {
position: absolute;
bottom: 50%;
transform-origin: bottom;
}

&__minutes-hand {
height: $minutes-length;
width: $minutes-width;
background-color: $minutes-color;
animation: rotate-full calc(var(--minute-duration) * 60) steps(60) infinite;
}

&__seconds-hand {
height: $seconds-length;
width: $seconds-width;
background-color: $seconds-color;
animation: rotate-full var(--minute-duration) linear infinite;
}
}
15 changes: 15 additions & 0 deletions src/styles/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
$watch-size: 80vmin;
$dot-size: 1vmin;
$dot-color: #000;
$minutes-length: 20vmin;
$minutes-width: 3vmin;
$minutes-color: #0700ff;
$seconds-length: 38vmin;
$seconds-width: 1.5vmin;
$seconds-color: #2c8000;
$center-diametr: 5vmin;
$center-color: #f6a603;

:root {
--minute-duration: 60s;
Comment on lines +13 to +14

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 25, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To fully meet the speed-up modifier requirement, verify that calc(var(--minute-duration) * 60) yields 60min in normal mode and 10min when the modifier is applied. Currently --minute-duration is defined as 60s in :root, so the base minutes duration is 3600s (=60min) which is correct, but this coupling of minutes to --minute-duration (named for minutes) may be considered a typical BEM/semantics mistake where the modifier for the block affects a variable used by both minutes and seconds hands.

}
Loading