-
Notifications
You must be signed in to change notification settings - Fork 3.5k
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
watch #3644
base: master
Are you sure you want to change the base?
watch #3644
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.
Great job! 🎉 Your code meets all the task requirements and constraints effectively. The HTML and SCSS files are well-structured, and the animations are implemented correctly. Keep up the excellent work! 😊
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
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.
src/styles/index.scss
Outdated
@keyframes second-rotation { | ||
0% { | ||
transform: translate(-50%, -100%) rotate(0deg); | ||
} | ||
100% { | ||
transform: translate(-50%, -100%) rotate(360deg); | ||
} | ||
} | ||
|
||
@keyframes minute-rotation { | ||
0% { | ||
transform: translate(-50%, -100%) rotate(0deg); | ||
} | ||
100% { | ||
transform: translate(-50%, -100%) rotate(360deg); | ||
} | ||
} |
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.
Don't need to duplicate key frames with the same scenario
@keyframes second-rotation { | |
0% { | |
transform: translate(-50%, -100%) rotate(0deg); | |
} | |
100% { | |
transform: translate(-50%, -100%) rotate(360deg); | |
} | |
} | |
@keyframes minute-rotation { | |
0% { | |
transform: translate(-50%, -100%) rotate(0deg); | |
} | |
100% { | |
transform: translate(-50%, -100%) rotate(360deg); | |
} | |
} | |
@keyframes rotation { | |
0% { | |
transform: translate(-50%, -100%) rotate(0deg); | |
} | |
100% { | |
transform: translate(-50%, -100%) rotate(360deg); | |
} | |
} |
src/index.html
Outdated
@@ -17,6 +17,10 @@ | |||
/> | |||
</head> | |||
<body> | |||
<h1>Stop watch</h1> | |||
<div class="stopwatch"> |
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.
Add the modifier class here .stopwatch--speed-up
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.
Well done
@keyframes second-rotation { | ||
from { | ||
transform: translate(-50%, -100%) rotate(0deg); | ||
} | ||
to { | ||
transform: translate(-50%, -100%) rotate(360deg); | ||
} | ||
} | ||
|
||
@keyframes minute-rotation { | ||
from { | ||
transform: translate(-50%, -100%) rotate(0deg); | ||
} | ||
to { | ||
transform: translate(-50%, -100%) rotate(360deg); | ||
} | ||
} |
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.
just use single keyframe for both hands
❗️ Replace <your_account> with your GitHub username and copy the links to the Pull Request description:
DEMO LINK
❗️ Copy this Checklist to the Pull Request description after links, and put - [x] before each point after you checked it.