Responsive Tip calculator app made with pure HTML, CSS and vanilla js

Community feedback

• 

  Gesiere•780

  @Gesiere

  Posted about 2 years ago

  Hi Tiago, nice one. You did well but like the comment above I faced the same issues.

  1. When I add 0 on the number of people text field, and the error appears. I expect that the error disappears if I correct it, by adding a number greater than 0. But the error still persist. That needs to be corrected.

  2. To change your input border on focus, you need to select that particular input element and add the focus pseudo element eg Input: focus{ border: 2px solid #whatever color you want } For your first you did well but I suggest trying newbie projects first before coming to Junior. Happy coding.

  11

  Marked as helpful
• 

  Michael•240

  @mksoofian

  Posted about 2 years ago

  Hi Tiago,

   I really appreciate your submission because your code helped me overcome the challenges I left unsolved with my code. I also only used vanilla JS and CSS!
  

  1. I could not get the border color to change on focus because by default, the browser was highlighting the input a different color. My solution from your code was setting "outline:none".

  2. I wasn't able to get my results to calculate as I input numbers in the text field. It would only update after clicking away from the input. My solution based on your code was to run my updateAll() function in every input event listener.

     This actually revealed to me bugs in your code. Your app will only work if the bill, tip and number of people are provided in the vertical order of the layout. However, app crashed if number of people is entered first, it also will not let me change the tip% after my initial input/button selection. I would suggest to update the code to update results after every input as I learned in my second point above as we can probably expect users to manipulate and edit fields for any number of reasons.

  I hope this feedback helps!

  -Mike -Mike

  11

  Marked as helpful