add task solution #4228
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| name: Test | ||
|
|
||
| on: | ||
| pull_request: | ||
| branches: [ master ] | ||
|
|
||
| jobs: | ||
| build: | ||
|
|
||
| runs-on: ubuntu-latest | ||
|
|
||
| strategy: | ||
| matrix: | ||
| node-version: [20.x] | ||
|
|
||
| steps: | ||
| - uses: actions/checkout@v2 | ||
| - name: Use Node.js ${{ matrix.node-version }} | ||
| uses: actions/setup-node@v1 | ||
| with: | ||
| node-version: ${{ matrix.node-version }} | ||
| - run: npm install | ||
| - run: npm test | ||
| - name: Upload HTML report(backstop data) | ||
| if: ${{ always() }} | ||
| uses: actions/upload-artifact@v2 | ||
| with: | ||
| name: report | ||
| path: backstop_data |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| @keyframes rotate { | ||
|
There was a problem hiding this comment. The animation keyframes file is present but there is only a single generic @Keyframes rotate. You need two animation usages: one for seconds using linear timing and 60s (and 10s in speed-up), and one for minutes using steps(60) and 60min (and 10min in speed-up). Ensure you apply the same keyframes (rotate from 0 to 360) but different animation properties on .stopwatch__hand--seconds and .stopwatch__hand--minutes. Right now only the keyframes are declared; the elements don't have animation declarations anywhere. There was a problem hiding this comment. The project is missing the variables file import content (variables.scss) in the listed files — index.scss imports './variables' but that file's content wasn't provided. Ensure variables are defined and verify there's no typo like $secondsHAndColor vs $secondsHandColor (previous review noted such typo). If that typo exists in variables.scss it will break color usage. Double-check variable names and correct any capitalization mistakes. |
||
| from { | ||
| transform: rotate(0deg); | ||
|
Comment on lines
+1
to
+3
There was a problem hiding this comment. The keyframes use the required from/to with transform rotate (this satisfies the checklist item about keyframes structure), but starting rotation of 0deg points to the right (3 o'clock). The task requires the hands to start at the top (12 o'clock). You should offset the initial orientation so rotate(0deg) corresponds to top — for example by rotating the hand elements by -90deg (apply transform: rotate(-90deg) to .stopwatch__hand or set keyframes/from accordingly). |
||
| } | ||
|
|
||
| to { | ||
| transform: rotate(360deg); | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| @import './variables'; | ||
| @import './animation'; | ||
| @import './page'; | ||
|
Comment on lines
+1
to
+3
There was a problem hiding this comment. The keyframes currently animate from rotate(0deg) to rotate(360deg). Because rotate(0deg) points the hands to the right (3 o'clock), this violates the requirement: "The starting position of the hands should be at the top." Adjust the initial transform (for example by offsetting hand elements with transform: rotate(-90deg) or change keyframes to start from rotate(-90deg)). |
||
| @import './stopwatch'; | ||
|
Comment on lines
+1
to
+4
There was a problem hiding this comment. The project is missing the SCSS that defines the stopwatch block and its elements (size 80vmin, centered on the page, 1vmin dotted border #000, hands lengths/widths/colors, center circle 5vmin orange, infinite animations with appropriate durations and step() for minutes). Implement these rules in src/styles/stopwatch.scss (or whichever file is imported) so all Core Functional Requirements are met.
Comment on lines
+1
to
+4
There was a problem hiding this comment. The animation for the seconds hand must run with an even (linear) speed and take 60s per full circle; the minutes hand must use steps(60) and take 60min per full circle. Also create the BEM modifier .stopwatch--speed-up to change durations to 10s and 10min respectively. These animation rules are not present in the provided styles; please add them. |
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| .page__body { | ||
| margin: 0; | ||
| height: 100vh; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| .stopwatch { | ||
| display: flex; | ||
| position: relative; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: $stopwatchDiameter; | ||
| width: $stopwatchDiameter; | ||
| border: 1vmin dotted $borderColor; | ||
| border-radius: 50%; | ||
|
|
||
| &__center-circle { | ||
| position: absolute; | ||
| height: 5vmin; | ||
| width: 5vmin; | ||
| background-color: $centerColor; | ||
| border-radius: 100%; | ||
| } | ||
|
|
||
| &__hand { | ||
| position: absolute; | ||
| transform-origin: bottom center; | ||
| bottom: 50%; | ||
| transform: rotate(-90deg); | ||
|
|
||
| &--minutes { | ||
| height: 20vmin; | ||
| width: 3vmin; | ||
| background-color: $minutesHandColor; | ||
| animation: rotate 3600s steps(60) infinite; | ||
| } | ||
|
|
||
| &--seconds { | ||
| height: 38vmin; | ||
| width: 1.5vmin; | ||
| background-color: $secondsHandColor; | ||
| animation: rotate 60s linear infinite; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .stopwatch--speed-up .stopwatch__hand--minutes { | ||
| animation: rotate 600s steps(60) infinite; | ||
| } | ||
|
|
||
| .stopwatch--speed-up .stopwatch__hand--seconds { | ||
| animation: rotate 10s linear infinite; | ||
| animation-delay: 0s; | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| $stopwatchDiameter: 80vmin; | ||
| $borderColor: #000; | ||
| $minutesHandColor: #0700ff; | ||
| $secondsHandColor: #2c8000; | ||
| $centerColor: #f6a603; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The task requires keyframes implemented using from/to + transform with rotate property (checklist item). You do have a
@keyframes rotateusing from/to and rotate, but alone it's not enough — the stylesheet must apply separate animations to seconds and minutes hands with the required timing functions and durations. Currently there is no CSS targeting.stopwatch,.stopwatch__hand--seconds,.stopwatch__hand--minutes, or.stopwatch__center-circle, so the animations and styles are missing.