added changes in clock #3592
added changes in clock #3592
Conversation
There was a problem hiding this comment.
Thank you for your hard work on this task! 😊 There are a few critical issues that need to be addressed before we can approve the pull request. The animation duration for the minute hand is not set correctly, which affects the functionality of the stopwatch. Additionally, the keyframes should use from/to instead of 0%/100% to meet the task requirements. Please make these changes, and you'll be all set! Keep up the great work! 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
🔄 Fix the issues, commit the changes, and then re-request my review using the Re-request review button in the Reviewers tab.
src/styles/index.scss
Outdated
|
|
||
| &__hand--minutes { | ||
| transform-origin: bottom; | ||
| animation: hand-rotate calc($minute-duration * 60) steps(60) infinite; |
There was a problem hiding this comment.
The animation duration for the minute hand is calculated as calc($minute-duration * 60), which seems to be intended to represent one hour. However, $minute-duration is already defined as 60s for normal speed, making this calculation incorrect for a minute hand. Consider using $minute-duration directly for the seconds hand and a different variable for the minute hand to represent one hour.
There was a problem hiding this comment.
Great job on addressing the previous issues with your code! 🎉 The HTML file is well-structured, and the SCSS file is linked correctly, which is essential for the task. You've successfully used from/to in your keyframes, aligning with the task requirements. However, please review the animation duration for the minute hand, as it is currently set to 3600s, which might not align with the intended functionality of the stopwatch. It's crucial to ensure that this duration matches the task's requirements for the stopwatch to function correctly.
Remember, addressing these critical issues will help you avoid similar problems in the future. Keep up the good work, and continue learning from these experiences to improve your coding skills! 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
|
|
||
| &__hand--minutes { | ||
| transform-origin: bottom; | ||
| animation: hand-rotate 3600s linear infinite; |
There was a problem hiding this comment.
The animation duration for the minute hand is set to 3600s, which seems incorrect given the task requirements. Ensure that the duration aligns with the intended functionality of the stopwatch.
| @keyframes hand-rotate { | ||
| from { | ||
| transform: rotate(0deg); | ||
| } | ||
|
|
||
| to { | ||
| transform: rotate(360deg); | ||
| } |
There was a problem hiding this comment.
The keyframes are correctly using from/to as per the task requirements. Ensure that this is intentional and aligns with the desired animation behavior.
No description provided.