-
Notifications
You must be signed in to change notification settings - Fork 3.4k
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.
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
make stopwatch #3576
base: master
Are you sure you want to change the base?
make stopwatch #3576
Conversation
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.
It looks like there are a couple of critical issues that need to be addressed before we can approve the pull request. The typo in the variable name $watch-heigh
should be corrected to $watch-height
to ensure consistency and prevent potential errors. Additionally, the animation-timing-function
property is duplicated for .stopwatch__minutes
; please remove the redundant one to maintain clean and functional code. Once these changes are made, your solution will be in great shape! Keep up the good 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/block/watch.scss
Outdated
@@ -0,0 +1,60 @@ | |||
.stopwatch { | |||
position: relative; | |||
width: $watch-heigh; |
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.
There is a typo in the variable name $watch-heigh
. It should likely be $watch-height
to match the intended variable name for height and width.
src/styles/block/watch.scss
Outdated
animation-timing-function: linear; | ||
animation-timing-function: steps(60); |
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 animation-timing-function
property is defined twice for .stopwatch__minutes
. Remove one of them to avoid redundancy. If steps(60)
is intended, ensure it's the one kept.
src/styles/utils/variables.scss
Outdated
@@ -0,0 +1,9 @@ | |||
$watch-heigh: 80vmin; |
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.
There is a typo in the variable name $watch-heigh
. It should be $watch-height
to ensure consistency and correct usage in the SCSS files.
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.
Great job on addressing the issues in your code! 🎉 The typo in the variable name $watch-heigh
has been corrected to $watch-height
, and the duplicate animation-timing-function
property for .stopwatch__minutes
has been resolved. Your code now meets the task requirements and is well-structured.
While the decision is to APPROVE your Pull Request to help you move forward with your learning, please make sure to review the comments and improve your code accordingly. Addressing these issues will help you avoid similar problems in the future and enhance your coding skills. Keep up the good work and continue learning from your experiences! 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
@@ -0,0 +1,59 @@ | |||
.stopwatch { | |||
position: relative; | |||
width: $watch-height; |
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.
Ensure that the variable $watch-height
is correctly defined and used consistently. Previously, there was a typo $watch-heigh
, so make sure it is corrected here.
|
||
animation-name: rotate; | ||
animation-duration: 3600s; | ||
animation-timing-function: steps(60); |
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 animation-timing-function
property is duplicated for .stopwatch__minutes
. Please remove the redundant one to maintain clean and functional code.
DEMO LINK
Keyframes implemented using from/to + transform with rotate property
Stopwatch is centered and has the correct arrows size
All
Typical Mistakes
from theBEM
lesson theory are checked.Code follows all the Code Style Rules ❗️