Skip to content
Submitted about 2 months ago

https://github.com/Papi84/tip-calculator-app-main/blob/main/style.css

Papi•260
@Papi84
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?

What are you most proud of? I'm most proud of completing the entire project and seeing my solution work smoothly. This project gave me a deeper understanding of building functional and interactive web pages. Specifically, I’m proud of implementing the calculations accurately and designing a clean, user-friendly interface. It was a great opportunity to apply my HTML, CSS, and JavaScript skills, especially integrating them for a seamless experience.

What would you do differently next time? Next time, I would focus more on the structure and organization of my code, particularly using more semantic HTML tags to enhance accessibility and SEO. I also realize there are some areas in the JavaScript logic where I could optimize the code for better readability and performance. I’d also like to implement additional features, such as customizing tip percentages or adding validation to improve user experience. Finally, I’d pay more attention to responsive design to ensure a consistent experience across all devices.

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

One of the main challenges I encountered was managing state updates in JavaScript, especially when calculating the tip and total amounts dynamically based on user input. Initially, the calculations didn’t always update correctly when switching between custom tip percentages, which led to inconsistent results. I overcame this by carefully reviewing the logic and ensuring that all the necessary inputs were being captured and recalculated on every change. Breaking down the problem and using console.log() to debug step by step helped me identify where the code wasn’t behaving as expected.

Another challenge was making the layout responsive. It took some trial and error to make sure that the app looked good on different screen sizes. I overcame this by refining my CSS, using relative units like percentages and rem for better flexibility, and leveraging media queries to adjust the layout for smaller devices.

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

JavaScript Optimization: While the current functionality works, I feel like there might be ways to streamline the JavaScript code, particularly how state is managed and how inputs are handled. I'd love feedback on how I can make the code more efficient or readable, especially for larger projects.

Responsive Design: I’m still learning how to ensure consistent design across all devices. While the app is functional on different screen sizes, I’d appreciate suggestions on improving the responsiveness, especially in terms of layout adjustments and ensuring the UI scales nicely on smaller screens.

Accessibility Enhancements: I’ve started learning about making web apps more accessible, but I’m not entirely confident that my current solution meets accessibility best practices. Any advice on how to improve this (e.g., using ARIA attributes, semantic HTML, etc.) would be really helpful.

Community feedback

  • Dylan•290
    @dquinn089Posted about 2 months ago

    I have a few suggestions for improvements, as well as a small note about the repository link.

    1. The input fields for the bill and number of people are currently set to default placeholder text. Typically, these fields should have a default placeholder of "0" to better match the design and help guide the user:

    <input type="number" id="bill-input" placeholder="0">

    2. There's no basic validation for missing or invalid inputs. When the user doesn't enter values or inputs invalid data (like a 0 or empty field), the result spans display NaN or Infinity. Implementing basic validation for the input fields will improve user experience and prevent these issues.

    if (isNaN(billValue) || billValue <= 0) {
    alert("Please enter a valid bill amount.");
    return;
}

if (isNaN(peopleValue) || peopleValue <= 0) {
    alert("Number of people must be greater than 0.");
    return;
}

    3. It seems like the repository linked in your submission is for an entirely different project, but the live link is correct. You might want to double-check the repository link and update it so that it's pointing to the correct codebase for this Tip Calculator project.

    I hope this feedback helps guide you on improving this project! Happy Coding!

    Marked as helpful
    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