Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Age calculator app solution

#react#vite#accessibility
Cosmo 590

@cosmoart

Desktop design screenshot for the Age calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello world!, This is my solution to this challenge, Any feedback is welcome :D

Community feedback

Shalom2935 420

@Shalom2935

Posted

/* remove spin buttons */

/* Chrome, Edge, Opera*/

input[type=number]::-webkit-inner-spin-button {
    
    display: none;

}

/* Firefox,  Safari */

input[type=number] {
   
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
  
}

This will help you remove the spin buttons while hovering or focusing on the input. This solution is the prettiest one I have seen that far and I'm literally fan of the animations. I just figured out a situation I have yet to take into account and it seems you also missed it: What will happen if not the year but globally the input date is higher than today? maybe 5 april 2023. That must be fixed.

Marked as helpful

1

Cosmo 590

@cosmoart

Posted

@Shalom2935 Thanks for the feedback, regarding the spin buttons at first I thought they looked pretty but you reminded me that they can look different in every browser so I hid them like you said.

Thanks for making me notice that date problem, it's already fixed, I also added an animation when changing the date, I hope you like it :D

1

Please log in to post a comment

Log in with GitHub
Discord logo

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