Submitted 4 months ago

Responsive and reactive Tip Calculator App in Vue.js

matbac85•600

@matbac85

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?

I am most proud of how I integrated Vue.js to create a dynamic and responsive user interface for the tip calculator. Using Vue.js allowed me to manage state and reactivity effectively, enabling real-time calculations based on user inputs. Additionally, achieving a clean and visually appealing design that enhances usability was a satisfying accomplishment.

Next time, I would focus more on accessibility considerations from the outset of the project. Ensuring the application is fully accessible to users with disabilities, including proper keyboard navigation, screen reader compatibility, and color contrast ratios, would improve its overall usability and inclusivity. Additionally, I would enhance error handling and validation messages to provide more intuitive feedback to users.

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

Challenges Encountered: One challenge was implementing robust input validation, particularly ensuring that users couldn't enter negative numbers or invalid characters in the custom tip field (customTip). Managing the validation logic dynamically alongside Vue's reactivity posed initial difficulties.

Overcoming Challenges: To address these challenges, I utilized Vue's computed properties and watchers effectively. I created dedicated validation functions that were triggered reactively whenever customTip or other relevant inputs changed. This approach ensured that input validation was seamless and user-friendly, enhancing the overall reliability of the application.

Community feedback

Kamran Kiani•1,170
@kaamiikPosted 4 months ago
Hello, congratulations on completing this challenge. I have also managed to finish it. It’s impressive that you were able to accomplish this using a framework. I am currently learning React, but I haven’t yet started a project using it.

Upon reviewing your project, I noticed a few issues when viewing it on Firefox. The grid layout seems to be off, which I suspect might be a browser-related issue. Additionally, in the error state, when I enter a zero or a negative number, the outline of the input field should turn red to indicate an error. Furthermore, when changing a positive number to zero or to an error state, the reset button remains enabled. I believe it would be more intuitive if it were disabled in these cases.

Overall, this is a challenging task, especially on the JavaScript side, and I think you’ve done an excellent job. I’m sure my solution has its fair share of bugs as well. Keep up the good work and continue learning and improving! 😊
Marked as helpful
0
matbac85•600
@matbac85Posted 4 months ago
@kaamiik

Hello,

Thank you for your feedback and congratulations on finishing the challenge as well! It's great to hear that you found my approach using a framework impressive. Personally, I find it easier than vanilla JS.

Regarding the issues you mentioned:

Grid Layout on Firefox: I appreciate you pointing this out. I’ve reviewed the grid layout but haven't been able to pinpoint the exact issue causing the discrepancy on Firefox. Could you clarify what exactly seems off?

Error State Indicators: I have implemented a red border around the input fields when they are in an error state (e.g., when entering zero or negative numbers). This should make the error states more visible.

Reset Button Behavior: The reset button will now be disabled if the form is in an invalid state, such as when entering zero or negative numbers.

Thanks again for your detailed feedback. It’s always helpful to have another pair of eyes on the project. Keep up the great work with your learning journey in React, and feel free to reach out if you have any questions or need further assistance. 😊 I did a bit of React too but I'm a little rusty.
0
Kamran Kiani•1,170
@kaamiikPosted 4 months ago
Please, it’s my pleasure. Honestly, reviewing others’ code helps me a lot, especially your code which is very well written. Regarding the Firefox issue, I was also surprised by this problem. I’m not sure if it’s because of the grid. Most likely, the problem is with the input with id=custom because it has caused that column to occupy more space and stretch.

I’m very happy that I could help and thank you for your kindness. @matbac85
0

Please log in to post a comment

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