Accessible Tip Calcutor App (SASS + SEO)

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. 😊👍