Responsive age calculator website using vanilla html, css and js
Design comparison
Solution retrospective
How would you animate the numbers? Also, some input on how to make the responsiveness better would be much appreciated :)
Community feedback
- @liix5Posted 9 months ago
for the animation use setInterval define a new value and tell it to increase that value by one. set it to run every half a second (or choose the time that you see fitting) and inside the setInterval make this new value equal to the innerText that you want to animate. last clear the interval ( tell it to stop counting) if the number that has been adding up is equal to the result of the age math you did(the final result)
you can check my solution for it and explore the code to understand it better
0 - @kevinebenhezerPosted 9 months ago
Hello @SarthkK
Regarding your question about animate number, i dont really understand what you meant by that, but i think you should make your input type something like:
<label for="day">Day</label>
<input type="text" name="day" id="day" class="day" minlength="1" maxlength="2" placeholder="DD" autocomplete="off" />
and you can put an empty
<div></div>
below that to put on some errors message with Javascript if user not filling the field etc.As responsiveness, i'm not really great with it too btw. But, i supposed that you can start with
@media screen and (max-width: 375px) {}
I hope this would helps you with your problems. Other than that, your solution looks amazing
Keep up the good work, and good luck!
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord