Tip Calculator built with Vanilla JS :)

Community feedback

• 

  Aman Singh Bhogal•1,010

  @asbhogalPosted over 1 year ago

  Hi Navjot,

  Great work! The app functions well as far as I can tell and the designs match the mockup fairly well. I've taken a look through your code and noticed some things worth considering:

  • Your app isn't responsive. There is overflow in the content from viewport widths <= 395px because you've set explicit height and width values on the parent container. (If you view your app in the responsive viewer in dev tools, you'll also notice this.) These should be unset to allow the child elements to occupy the space naturally. Set a max-width value, then a width: 100% and use either grid or flex to adjust the flow of the container from horizontal to vertical at this viewport width and lower (personally I'd recommend using grid here as it retains the intrinsic values and prevents condensing of the content.) Here's a good link explaining the difference and when to choose which Link.
  • You have some typos in your variable names and inconsistencies in the camel casing - addBoder, totalAmountPerperson. Also, I'd recommend making some of these clearer for maintenance purposes (these make it easier for developers to identify their purpose and therefore debug.) e.g. selectFromEl, tipprozentV and pplEl are condensed/unclear and therefore confusing.
  • Also, I haven't seen the active state mockups but the template literal string for the dataValue conditional check seems incomplete/incorrect to me. It returns "Cannot be a Empty"
  • Locally host your Google Fonts for privacy and performance reasons. Here's a good link explaining why and how to achieve this Link

  Hope this helps!

  0