Submitted about 1 year ago

Age Calculator App [BEM + Animation + VanillaJS]

xyzeez•670

@xyzeez

Preview site View code

This is a solution for...Age calculator app

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

Hello There! 👋🏽

Here is my solution for this challenge!

Built Using⚒️ :

Semantic HTML5 markup
CSS custom properties
CSS Flexbox
Mobile-first workflow
BEM
Animation

Question🙋 : Any Idea on how to animate the input to the age position upon submission(as required by the challenge)?

Updates 🚀 :

Refactored code to use the OOP
Replaced fonts with woff2 formats
Saved user data using Local Storage

... Feedback on how I can improve my code would be highly appreciated! 🙏🏽

Thank You, and Keep coding! 👨🏽‍💻

Community feedback

Lukáš Říha•225
@lukasrihaPosted about 1 year ago
Hi Xyzeez!

Very nice attempt, I love the animations, the fact that you used BEM and the usage of :is and :has in css is also very nice!

Couple of small hints:

You do not have to use translate3d for your animations if you're animating in one direction only. You can use this:

transform: translateX(4px);

When loading fonts, I recommend loading them in the <head> element in your html like this:

<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,700;1,400;1,800&display=swap" rel="stylesheet">

Overall there are three ways to import fonts:

Static (like you did)

@import() in css

Using links (my suggested approach)

Using the <link> approach has some benefits such as caching etc.

If you insist on using the @font-face approach, I recommend using a format other than ttf - ideally woff2. It stands for web open font format 2. This format is optimized for web browsers, will look best and load the fastest on web sites :)

Other than that, very well done! Keep hacking :)
Marked as helpful
1
xyzeez•670
@xyzeezPosted about 1 year ago
@lukasriha thank you for your feedback and for taking the time to review my submission, I really appreciate you.

I've immediately corrected the shake animation on the inputs. As regards the fonts, I'd ensure to have them fixed as soon as I get the recommended format, I went ahead with the given resource and I want to practice more on using static fonts.
1
Lukáš Říha•225
@lukasrihaPosted about 1 year ago
Happy to help :)

@xyzeez
0

Please log in to post a comment

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