App Calculate Tip with JS Vanilla

Community feedback

• 

  Isabela Oliveira•310

  @oliveridsPosted about 3 years ago

  Hey, i think your question can be solved with an EventListener!

  Add a listener for the "input" event on the bill input. The "input" event catches any and all changes made on the value of said input. After you've done this, you can make all functions work when the browser notices any changes.

  Your code would look a bit like this:

  let billinput = document.getElementById('bill');

  billinput.addEventListener('input', () => { ** all the calculation functions ** )

  Marked as helpful

  0

  ---

  

  HualDev•850

  @HualDevPosted about 3 years ago

  @oliverids Thanks!!! I´ll use an EventListener.

  0
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Desktop layout seems good, but it is not responsive at the moment, try to change the width until you hit the mobile breakpoint, the layout has been completely hidden. Mobile layout's breakpoint could be adjusted, because you only use like 375px as the breakpoint where lots of mobile phones have a wider screen compared to that. Starting from mobile first approach will help you solve some of this.

  Some other suggestions would be:

  • Never absolute a large container especially when it contains your main content. Try inspecting the layout, hover on the either html or body tag, there is no height since the content is out of the flow.
  • Since you are using only the position to center the content, it would be better this way. First remove all these on the .general:

  position
  top
  left
  transform
  

  Then on the body tag add these:

  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  

  This way, you avoided using position props. But as I do this, I noticed you are using absolute on the input icons, position: relative is not being used in here.

  • Always have a main element to wrap the main content of your page. On this one, the .container should be using the main instead of div.
  • Website-logo img should be using the website's name as the alt like alt="splitter". Remember that a website's logo is meaningful so always make sure it uses the proper alt value.
  • Those input-icons could have just been used as background-image of the input to avoid using unwanted img tag, also, you are using it wrong. Since you use img, you should have position that relative to the input-container so that it won't be scattered on the site like it is doing now. Avoid as much position: absolute usage.
  • Add a min on the input type="number".
  • You don't use font, I haven't seen that though, p tag would be nice replacement.
  • The select tip should either be heading tag or a legend text-content if fieldset is took as an approach on the selections.
  • Use button instead of input type="button" why alter an element if there is already an element present.
  • Just button groups is not enough. Instead, use a list of button on this one. If you were to use button you would need to have an aria-live element that will announce the certain button has been pressed or selected, because button alone is not informative. I haven't tackled this challenge yet so I can't give a reference of mine for this one.
  • The custom-input lacks a label to it , it would be a screen-reader only label though, another workaround is to use aria-label for it.
  • Your number of people label is associated to the wrong-input, it should be linked on the input below it and not on the custom-input.
  • tip amount and total could use a heading tag since they give information on what the section would contain.
  • When wrapping a text-content do not just use div to wrap it, use meaningful element like a p tag if it just a regular text or heading tag if it is an heading.
  • Use button on the reset, using div makes the component not accessible. Remember, interactive components uses interactive elements. By using div you are making it not-accessible.

  But still, aside from those, great job on this one.

  Marked as helpful

  0
• 

  HualDev•850

  @HualDevPosted about 3 years ago

  thanks!!! I will consider your comments and try to change.Your feedback help me to get better.

  1