Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 2 years ago

Responsive Mob\Desk Design using HTML,CSS(flexbox),JS

GHNetCode•170
@GHNetCode
A solution to the Age calculator app challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Firstly a big thank you to FrontEndMentor for this challenge! I found it quite fun to put together using vanilla html,css(flexbox) and js. The most difficult part of this particular design i found was the logic on hiding various elements like when to hide the label etc when using the mobile touch events where the click events were allot more straight forward. I added "console.log("....") at various stages to track the progress and looks like i have managed ok though.. I would greatly appreciate any feedback you might have.

Not sure if i have gone a little overboard here adding a sliding bar for mobile users to easily select the date but thought it logical considering it is much easier than manually entering in the digits. To top it off i also added have add animations where i found the UI to be quite simple, so making it as engaging as possible.

I hope you enjoy this little app, and have a good day!

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on GHNetCode's solution.

Join 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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License