Tip Calculator Using Javascript

Community feedback

• 

  wannacode•720

  @kwngptrlPosted about 1 year ago

  Wow, this behaves like an ATM machine in my country. I don't know if all ATM machines work this way, you know, the digits get added on from the right.

  I probably can't help you with the copy and paste thing, but I just had a quick look-see of your JS and noticed that perhaps you can condense lines 169 through 174 by combining peopleInput.value === "0" || peopleInput.value ==="".

  Also, I noticed that punching the values provided in the design by Frontend Mentor, namely, 142.55 for bill, 15% for tip, and 5 for number of people, it shows the expected result of $4.28 and $32.79. However, if I punch 15.00 in the custom field, I get $3.00 and $31.51 respectively. Now, if I use 100 for bill and 1 for number of people and punch the 5, 10, 15, 25, 50 buttons and punch in the same values in the custom field it WORKS PROPERLY, but not when bill is 200 or 300.

  I also noticed a slight shifting of the content when the input fields for bill, custom and number of people are focused, but since there is no proper CSS reset included, I could not find the cause in the little time I looked at your solution. Cheers.

  Marked as helpful

  0

  ---

  

  Jeeho Lee•150

  @jeeheezyPosted about 1 year ago

  @kwngptrl Thanks for the feedback! I agree that my code can probably be condensed in various places. For the specific lines of 169 through 174, in addition to clearing the error messages and styling, I also wanted to make sure the field got reset when the user focused out so the 0 would not remain in the input. Do you have any suggestions on how I could shorten my code with that in consideration?

  As for the value entry, it may not have been clear but I intended on the custom field to be dollar values and not percentage (probably would be helpful if I added the dollar icon from the bill input and added that to the custom input too to clarify). Taking the specific example, $15.00 custom tip divided 5 people would be $3.00. and the bill of $142.55 and dividing it among 5 people, that'd be $28.51. Adding $3 per person for the tip to the split bill would be $31.51, which seems to be right for me. Did you consider the the custom field as a percentage or dollar value?

  Lastly, about CSS resets, is the general consensus to use them or not? I've gotten suggestions from developer friends that I shouldn't use CSS reset, but it seems like a common suggestion in Front End Mentor, so would like to hear more insight on why one might or might not utilize CSS reset.

  Truly appreciate your detailed and thoughtful feedback; I'll look to apply some of them in my next project!

  0

  

  wannacode•720

  @kwngptrlPosted about 1 year ago

  @jeeheezy I do think a dollar amount would be useful addition. It would be helpful if a dollar sign was there as my assumption was that it's also in percent, since it was in a group of buttons that were in percent and there was nothing in the design that said otherwise. The challenges doesn't really list a very exacting specification, I sometimes have to add a slightly different shade of color which was not in the specs, for example. Feel free to experiment, learn, and refactor.

  There are a lot of articles about using a CSS reset. Why use it? This article is a recent one about resets, normalize, and a hybrid approach:

  -Making the case for CSS normalize and reset stylesheets in 2023

  -My Custom CSS Reset - Josh Comeau

  0