Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 10 months ago

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

Papi•280
@Papi84
A solution to the Tip calculator app challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

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.

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Dylan•290
    @dquinn089
    Posted 10 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

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub