Submitted about 2 years ago

Responsive Mob\Desk Design using HTML,CSS(flexbox),JS

@GHNetCode

A solution to the Age calculator app challenge

Solution retrospective

Firstly a big thank you to FrontEndMentor for this challenge! I found it quite fun to put together using vanilla html,css(flexbox) and js. The most difficult part of this particular design i found was the logic on hiding various elements like when to hide the label etc when using the mobile touch events where the click events were allot more straight forward. I added "console.log("....") at various stages to track the progress and looks like i have managed ok though.. I would greatly appreciate any feedback you might have.

Not sure if i have gone a little overboard here adding a sliding bar for mobile users to easily select the date but thought it logical considering it is much easier than manually entering in the digits. To top it off i also added have add animations where i found the UI to be quite simple, so making it as engaging as possible.

I hope you enjoy this little app, and have a good day!

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

Daniel•330
@daniel-web-developer
Posted about 2 years ago
That's a really nice project with cool animations!

There's a bug with the sliding bar, though. I tried inputting the numbers using only the slider and it said the fields were empty.

I have one suggestion regarding the <input> fields. I don't know if you prefer this way, but you can remove the arrows from the <input> boxes. You could do it by adding this to your CSS file:
```
input{
                appearance: textfield;
}
```
I'm not sure this will work in every browser. MDN Web Docs says it works on the main browsers (Firefox, Chrome, Safari, and Edge).

Last but not least, nice work!
Marked as helpful
GHNetCode•170
@GHNetCode
Posted about 2 years ago
After realising that the hover effect for the button the mobile device was sticking my work around which has worked so far is to pin point exactly when the hover effect should take place by using the media query in CSS. At least the "active" state works on both ok and is not a problem when the button is actually pushed.. For example-: /for devices that support hover effect with a mouse../ @media (hover: hover) and (pointer: fine){ #Btn:hover{ ..... } } /Only for devices that do Not support hover effect like touchscreens.../ @media (hover: none) and (pointer: coarse) { #Btn{ ..... } /* For all Devices when the button is pressed... */ #Btn:active { .... }

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