Skip to content
Submitted 4 months ago

Tip calculator app

bem
P
Anamay•470
@anamaydev
A solution to the Tip calculator app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I'm proud of my ability to quickly create clean, functional layouts

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

I faced a challenge where the design didn't include a submit button, and with three input fields and five buttons, pressing Enter automatically triggered the first button, as the browser defaulted to type="submit" for buttons without a type attribute. To resolve this, I added type="button" to the buttons. Additionally, managing input from multiple fields was tricky, but I enjoyed the process and found a smooth solution.

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

I would appreciate feedback on my JavaScript code, particularly regarding clarity, efficiency, and best practices.

Code

Please log in to post a comment

Log in

Community feedback

  • Mohamed Ahmed•700
    @MohamedSharqawi

    Hello there,

    Your design looks great! However, I have a few suggestions that could enhance your code:

    1. Effective Use of HTML: Utilizing HTML can significantly reduce the amount of JavaScript code required. For instance, you can use <input type='radio'> for tip buttons to handle button clicks automatically and <button type='reset'> for the reset button to reset form inputs automatically.

    2. Validation of Input Values:

      • The bill and custom values can be fractional, but the custom value must be between 0 and 100, ensuring it is not negative.
      • The number of people cannot be negative.
      • To remove the default browser validation, add the novalidate attribute to the <form> element and implement custom validation using JavaScript.

    3. Calculation of Tip Amount: Ensure that the result for "tip amount per person" is divided by the number of people.

    4. Bonus Tip: You can use the .toggle() method to switch between class names more efficiently. Replace the following code:

      if(data.totalPeople === ''){
  totalPeopleErrorMsg.classList.remove('hidden');
  totalPeople.classList.add('form__input--error');
} else {
  totalPeopleErrorMsg.classList.add('hidden');
  totalPeople.classList.remove('form__input--error');
}

      with:

      totalPeopleErrorMsg.classList.toggle('hidden', !data.totalPeople);
totalPeople.classList.toggle('form__input--error', !data.totalPeople);

      The second attribute of the .toggle() method acts as a condition; if true, the class name is added, and if false, it is removed.

    By adopting these suggestions, you can reduce the amount of JavaScript code and improve the clarity and efficiency of your design.

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