Skip to content
Submitted about 2 months ago

Responsive Tip Calculator with Auto-Update

#accessibility#bem
Martin Liesche•570
@marliedev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Tip calculator app
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Finished the project with vanilla javascript and css and without a reactive framework like vue.js

What challenges did you encounter, and how did you overcome them?

Making the Form "accessible" was a bit of work and although the general navigation via keyboard works i did not solve the problem that the radio options could be selected via space bar. Maybe someone knows why?!

What specific areas of your project would you like help with?

Accessiblity! Although i used semantic markup the radio selection via space bar doesn't work! Could it only be solved via JS-Keyup-Listeners? What is the best approach here? Non-Semantic Radio-Groups with aria-attributes? Would appreciate some help here :)

Community feedback

  • Sergio Eduardo Castro Ceballos•320
    @SergioCasCebPosted about 1 month ago

    Hey there. Really good attempt at the challenge.

    I do have a few note that I hope will help in your future projects:

    1. Between the screen sizes of >375px and 960px, your component is always touching the sides of the screen adding some type of padding will help make it look much better. Also once your component is not filling the whole screen rounding all the corner will also make it look better.
    2. Although this is a personal preference, for future reference trying to follow the design guidelines is a really good practice. Such as bigger text in the desktop view, a disabled button when no input are given, having two rows of 3 tip buttons in the desktop view, etc.
    3. Also I noticed your input icons and error messages are not showing correctly, I tried to do a quick fix from the developer mode, but there was too much going on with all your component to find a quick fix. I would recommend to go over it again and try to always do it in the simplest way possible.

    Finally in regards to your accessibility question, your radio button are definitively accessible with the keyboard, since the navigation works well with the tab key which is the most common key used to navigate with the keyboard.

    If you want to see a different way to solve this issues you are having, you can go check my solution. It is by no means perfect, but at least it could give you a different perspective.

    If you want to see a different way of approaching this tho, I inv

    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