Submitted 8 months ago

Age-Calculator-App built with HTML, CSS and JavaScript😃🔥

Marley Semende• 570

@Marley-Semende

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Age calculator app

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello Frontend Mentor community👋🏾. This is my solution for the age-calculator-app 📱. Working with the JavaScript date object was a bit challenging but I also learnt so much through this challenge. I built the project using:

🚀HTML Semantic
🚀CSS flexbox
🚀Position Property
🚀Animations
🚀and JavaScript

I enjoyed the process of combining these technologies to create a functional age calculator app. I have learnt and practised working with animation: and the @keyframe as well as the js addEventListner() and the dateObject.

beyond the challenge I've added:

logic to calculate if it's user's birthday and dynamically display a happy birthday message🥳
animated age counter 👨🏾‍💻
and an animated birthday text(I just wanted to practise working with animations). For smaller screen sizes 📲, I've added @media query to handle the layout and styling. Feel free to leave me feedback.

Community feedback

Marcos Travaglini• 4,920

@Blackpachamame

Posted 8 months ago

Greetings! you have done a great job 😎

📌 Some accessibility and semantics recommendations for your HTML

The attribution should go outside the main

📌 Some suggestions

Don't use vh or vw to give a width or height to your elements. This will only cause problems when the screen is reduced or enlarged, an example is what happens with the 'button' that stops looking round when the width of the screen is reduced and enlarged. Better use rem, em or px

Marked as helpful

Marley Semende• 570

@Marley-Semende

Posted 8 months ago

@Blackpachamame thank you for the feedback :)

Theunis• 210

@theYuun

Posted 7 months ago

Gosh, what a cool project! Absolutely love the animated upward count of the numbers.

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