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

Vue - Tips Calculator

Bakhtiar 380

@b4khtiar

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

..

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

..

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

..?

Community feedback

matbac85 600

@matbac85

Posted

Hello,

I noticed a few things that could enhance the user experience of the Tip Calculator App:

Display Bug When Selecting Tip Percentage: There seems to be a display issue when selecting a tip percentage. It's not updating as expected visually.

Error Messages Showing Unnecessarily: Error messages are appearing on the "Number of People" input even when it's not interacted with yet.

Legibility Issue with Disabled Button: The text on the disabled button is currently hard to read due to its color against the background.

Design Alignment with the Model: The current design doesn't align perfectly with the provided design model. Some elements might need adjustment.

App Functionality: It seems like there might be an issue with the overall functionality of the app. It's not functioning as intended.

To improve the app:

  • Check the logic for updating the display when selecting tip percentages.
  • Ensure error messages only appear when the respective inputs have been interacted with.
  • Adjust the button's text color for better readability when disabled.
  • Review the design elements to match the provided model more closely.
  • Double-check the functionality to ensure calculations and resets work seamlessly.
  • Validation in setTip Function: Update the setTip function to properly handle validation and calculation when selecting tip percentages or entering a custom tip.
  • Error Handling: Ensure error messages are shown correctly based on user input and interactions, particularly focusing on the "Bill" and "Number of People" fields.
  • Button Styling: Adjust the disabled button's text color to ensure it's readable against its background.

Marked as helpful

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