Age Calculator with some transition animations (JS/HTML/CSS)
Design comparison
Solution retrospective
First attempt at a Level 2 challenge, wasn't too hard but certainly a lot more work going into it! Just Vanilla JS, HTML/CSS.
My big question is how much time should a challenge/project like this be completed in? I didn't keep a good track of everything I did, but it took me roughly 3-4 days in my free time to implement everything, from the styling, creating and testing the calculation/logic, transition animations, final touches and documentation/commenting. It feels like it took longer than it should, mostly because I was trying to be a little bit extra, but what's a reasonable time estimate for something like this? Both from a junior to senior level would be helpful.
Also jumping back into JS after a break for awhile, used setTimeout()
and setInterval()
for a lot of the animations. Feels like it might have been more overhead with timing the delays and durations, as opposed to using async
/await
with promises, but maybe fine in this case?
Anyways, thanks in advance for checking out my submission and any comments! Let me know if there's anything else that seems to stick out!
Quick thanks to:
ApplePieGiraffe - Providing resources on using em/rem.
Vanza Setia - Some tips on container styling and when to use ID attributes.
Community feedback
- @daniel-web-developerPosted over 1 year ago
It took me an afternoon and a morning to complete this challenge, but I implemented no animations and I used a library to calculate the time more efficiently and correctly. "Speedwise", I think I'm decent at HTML and Sass (CSS) but terrible at JavaScript. I had to research for the JS. It's true that part of the time I used to research a decent algorithm to calculate time span between two dates and trying to find a library that would do the maths instead, then I had to decide which library to use (I eventually went with Datejs https://github.com/datejs/Datejs).
1
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