Tip Calculator app using HTML, CSS and Vanilla JS.

Community feedback

• 

  Ahmed El_Bald•1,020

  @Ahmed-ElbaldPosted over 2 years ago

  Hey Renan,

  So concerning your questions, I don't really know the logic you used but here's my suggestion:

  • Basically you should have your variables like totalAmount, tipPercent (or however you name them) as global variables and set them to null.
  • You have three inputs in the page (the bill, number of people and custom tip). You can add an eventListener to all of them (onkeyup OR oninput both will work).
  • So when the user types any thing, you can detect what input is being used and then set new values to your global variables
  • Then, you can trigger a function to display the final values but this function shouldn't work unless your global values actually have values other than null

  I don't know if I managed to convey my point but the whole thing is... You don't have to click anything to display the final values. The function that will display them should get triggered every time the user types anything

  If you still don't get it, you can see my solution here

  You have some issues with accessibility. I don't mind helping you solve them. I hope my feedback was beneficial. Thank You

  Marked as helpful

  1

  ---

  

  Renan Tiscoski•1,240

  @DonUggioniPosted over 2 years ago

  @Ahmed-Elbald Hey,

  Thank you for your feedback. Your explanation makes sense, I should have thought about declaring global variables for the values.

  How could I go about solving the accessibility issues?

  0

  

  Ahmed El_Bald•1,020

  @Ahmed-ElbaldPosted over 2 years ago

  @DonUggioni Well, you have few issues:

  • One of them is not adding an alt for the images. If u think the image is decorative and u don't have to give it an alt, just leave it empty like this alt="" but do not get rid if it
  • The page must have at least an h1. So you can replace any of ur headers (Or all of them) with an h1

  Marked as helpful

  1

  

  Renan Tiscoski•1,240

  @DonUggioniPosted over 2 years ago

  @Ahmed-Elbald Oh ok! Got it! Thank you! I'm refactoring the code now so I will check those issues.

  1

  

  Ahmed El_Bald•1,020

  @Ahmed-ElbaldPosted over 2 years ago

  @DonUggioni You're welcome. I hope my feedback was helpful

  0

  

  Renan Tiscoski•1,240

  @DonUggioniPosted over 2 years ago

  @Ahmed-Elbald Thanks for the tips, I refactored all the JS code, now the App is working as I wanted.

  Feel free to have a look and let me know what you think!

  0

  

  Ahmed El_Bald•1,020

  @Ahmed-ElbaldPosted over 2 years ago

  @DonUggioni Yeah it's working fine concerning the functionality of JS so good work But u still have the same issues with accessibility

  0

  

  Renan Tiscoski•1,240

  @DonUggioniPosted over 2 years ago

  @Ahmed-Elbald That is strange, because I've changed it in the code. Maybe FEM hasn't updated that.

  0

  

  Ahmed El_Bald•1,020

  @Ahmed-ElbaldPosted over 2 years ago

  @DonUggioni Did u generate a new report after making your changes ?

  0

  

  Renan Tiscoski•1,240

  @DonUggioniPosted over 2 years ago

  @Ahmed-Elbald Didn't know I have to do that lol.. It's all good now! Thanks man!

  0