Submitted 8 months ago

Accessible Tip Calcutor App (SASS + SEO)

#accessibility#lighthouse#sass/scss#animation

Alberto José•630

@alberto-rj

Preview site View code

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?

The main feature of this project is the ability to automatically calculate the tip and total bill based on user inputs. The calculation logic is implemented in JavaScript, ensuring precise results and real-time updates as users interact with the input fields.

Next time, I plan to build this challenge completely from scratch using React.js.

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

♿️ 1. Accessible Validation

Problem: The app must remain accessible during user input validation.
Solution:
- ✅ Implementation of accessible validations.
- ✅ Clear and informative error messages.
- ✅ Tested on different devices to ensure an inclusive experience.

💡 2. Interactive Visual Feedback

Problem: Need to implement hover and focus states for all interactive elements on the page.
Solution:
- ✅ Use of CSS pseudo-classes :hover and :focus-visible.
- ✅ Ensured consistent visual feedback on buttons and fields.
- ✅ Improved usability and accessibility of the app.

💻📱 3. Responsive Layout

Problem: The layout must be optimized for different screen sizes.
Solution:
- ✅ Implemented media queries to adjust the layout.
- ✅ Used relative units (such as %, and rem) to ensure scalability.
- ✅ Applied Flexbox and CSS Grid to create a flexible and adaptable layout.
- ✅ Tested on various devices to ensure proper viewing.

💰 4. Precise Tip Calculation

Problem: The app must accurately calculate the tip and total cost per person.
Solution:
- ✅ Implemented precise calculation functions in JavaScript.
- ✅ Ensured that results are displayed clearly and understandably.

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

I would like to receive feedback on the:

Accessibility approach I have adopted.
README.md as seen by recruiters or employers.
Or any other feedback you may have. 😊👍

Please log in to post a comment

Community feedback

Grace•32,130
@grace-snow
Posted 7 months ago
It's really important you don't change aria labels like this! Input labels must match the visible label otherwise you get a label in name failure (the field won't work for voice control users any more). Look up the wcag criterion understanding docs to make sure you understand why this is so important.

The logo must also say "splitter". The aria-label on that home link (which is unnecessary to have at all as this is a single page web app) should say "Splitter - Home" nothing else.

I think listbox is a strange choice for the tip amounts honestly. I'd need to test that to understand how it works. If expect this to be a fieldset of radios with the last one triggering an input for the custom amount. Even if you do use a different approach though the aria labels must match exactly what is there visibly (which means aria-labels aren't needed at all as they already have text in there).

On the output panel those text elements shouldn't all be headings. Headings only make sense if they are acting as titles for the content that comes after them. So you could have a visually hidden heading for the "results" section, but headings dont make sense for the values.
Marked as helpful
1deadjoe•370
@1deadjoe
Posted 8 months ago
This is impressive. I would like to learn from you. The use of transitions for the totals is a very nice addition. Kudos. I will get here someday.

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