Skip to content
Submitted 10 months ago

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

Marley Semende•570
@Marley-Semende
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Age calculator app
  • HTML
  • CSS
  • JS
2junior

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,840
    @BlackpachamamePosted 10 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
    0
    Marley Semende•570
    @Marley-SemendePosted 10 months ago

    @Blackpachamame thank you for the feedback :)

    1
  • Theunis•210
    @theYuunPosted 10 months ago

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

    0

Please log in to post a comment

Log in with GitHub

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