Tip calculator made using CSS Flexbox/Grid and Javascript

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Meobot, your solution looks great! Regarding functionality, it looks like if I click on the button before inputting the number of people, the total area shows "infinity". What I did was, I added a line in my code that checks whether all the 3 values are there before calculating, and that way it won't show other unwanted results. Also, it would be good to have the button "stick" as a pressed state after clicking because right now it just goes back to looking like other buttons after being pressed.

  Regarding refactoring, I see that you got an event listener written for each individual button. I would just use one. What I'd do is, I'd add a value directly onto each button, like this:

  <button class="btn" id="five" value="5">5%</button>
  

  And then I'd grab all the buttons and put an event listener on each one, something like this:

  document.querySelectorAll(".btn").forEach( btn => {
    btn.addEventListener("click", () => {
      tip = btn.value;
      calculateFinal(tip);
    })
  })
  

  I think this can save you a few lines of code! Hope this is helpful 🙂

  Marked as helpful

  1

  ---

  

  Nathan Rhodes•140

  @MeobotPosted over 2 years ago

  @elaineleung I had no idea you could put a value on a button like that, that's awesome! Thank you for the advice, I'll definitely implement all of this in the project, and others going forward.

  1