Skip to content
Submitted about 1 year ago

Age Calculator App with ReactJS and Tailwind CSS

Khánh•160
@hnvkhanh
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

I've encountered a challenge in altering the input border while it's in focus. I tried focus:border-purple but it does not work. purple is my custom color in Tailwind. Also, which is the best way to make the animation in the calculated age (which is a bonus of this challenge)?. Thank you all for reviewing my solution :3.

Community feedback

  • Account deleted

    Looks great . try to remove outline -> outline: 0; and add :focus to input with border and color that you want

    Marked as helpful
    3
    Khánh•160
    @hnvkhanhPosted about 1 year ago

    @Abdullah-Alashhab thank you ❤️

    2
  • Nguyễn Đức Chính•310
    @chinh1402Posted about 1 year ago

    Just a suggestion, Did you try :focus and outline: none to alter input border while it's in focus?

    You can have a look here

    Marked as helpful
    2
    Khánh•160
    @hnvkhanhPosted about 1 year ago

    @chinh1402 thank you, it helps :3

    1

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