Skip to content

add a solution #4219

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
Maksyttaaa wants to merge 3 commits into
base: master
Choose a base branch
from
Open

add a solution #4219

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5ff2e25
add a solution
Maksyttaaa Aug 16, 2026
22eb46a
corrections requested by the AI ​​mentor
Maksyttaaa Aug 16, 2026
ee283e4
Modification of the mixin for -90/270-degree rotation
Maksyttaaa Aug 16, 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
16 changes: 15 additions & 1 deletion src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,26 @@
content="ie=edge"
/>
<title>Stop watch</title>
<link
rel="stylesheet"
href="./styles/utills.scss"

@mateacademy-ai-mentor mateacademy-ai-mentor Aug 16, 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 HTML links two SCSS files which is allowed in this task, but check the filename spelling: you linked ./styles/utills.scss on line 16. The more common spelling is utils.scss. If your actual file is named utills.scss then keep it, otherwise rename or correct the href to match your stylesheet filename. A mismatched filename will prevent styles/animations from loading and fail the task.

/>
<link
rel="stylesheet"
href="./styles/index.scss"
/>
</head>
<body>
<h1>Stop watch</h1>
<main class="main">
<div class="stopwatch">

@mateacademy-ai-mentor mateacademy-ai-mentor Aug 16, 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 task requires an element with the class stopwatch (present on line 25) — good. However the tests expect the BEM modifier to be applied to the stopwatch block itself (the description says: “Add the modifier to the stopwatch for tests”). Your code applies --speed-up modifiers to individual arrow elements instead of adding a modifier class like stopwatch--speed-up to the .stopwatch block. Please add a modifier class to the stopwatch element, for example class="stopwatch stopwatch--speed-up", so mentors/tests can toggle it as described.

<div class="stopwatch__center"></div>
<div
class="stopwatch__arrow-of-sec stopwatch__arrow-of-sec--speed-up"
></div>
<div
class="stopwatch__arrow-of-min stopwatch__arrow-of-min--speed-up"

@mateacademy-ai-mentor mateacademy-ai-mentor Aug 16, 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 markup currently places modifier classes on the arrow elements: stopwatch__arrow-of-sec--speed-up and stopwatch__arrow-of-min--speed-up (lines 28 and 31). The checklist and description require a BEM modifier called speed-up for the stopwatch block itself. Please ensure you implement the block modifier stopwatch--speed-up on the main .stopwatch element rather than (or in addition to) modifiers on the elements, and implement CSS rules that change animation durations when that modifier is present.

></div>
</div>
</main>
</body>
</html>
61 changes: 61 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,64 @@
@import './utills';

body {
margin: 0;
}

.main {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.stopwatch {
display: flex;
width: 80vmin;
height: 80vmin;
border: 1vmin dotted #000;
border-radius: 50%;

justify-content: center;
align-items: center;

&__center {
position: absolute;
z-index: 3;
width: 5vmin;
height: 5vmin;
border-radius: 50%;
background-color: #f6a603;
}

&__arrow-of-sec {
position: absolute;
bottom: 50%;
z-index: 2;

width: 1.5vmin;
height: 38vmin;
background-color: #2c8000;

@include arrows-anim(rotate-arrows, 60s, linear);

&--speed-up {
@include arrows-anim(rotate-arrows, 10s, linear);
}
}

&__arrow-of-min {
position: absolute;
bottom: 50%;
z-index: 1;

width: 3vmin;
height: 20vmin;
background-color: #0700ff;

@include arrows-anim(rotate-arrows, 3600s, steps(60));

&--speed-up {
@include arrows-anim(rotate-arrows, 600s, steps(60));
}
}
}
17 changes: 17 additions & 0 deletions src/styles/utills.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
@keyframes rotate-arrows {
from {
transform: rotate(0deg);
}

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

@mixin arrows-anim($name, $duration, $timing-function) {
animation-name: $name;
animation-duration: $duration;
transform-origin: bottom;
animation-timing-function: $timing-function;
animation-iteration-count: infinite;
}
Loading