Tip Calculator

Community feedback

• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👾Fala Anderson, tudo bem? Parabéns pelo desafio!

  Acabei de ver seu desafio e está funcionando perfeitamente. Uma coisa que eu vi e me chamou a atenção foi a sombra que está um pouco forte, você pode melhorar isso colocando menos opacity e mais blur, aqui um valor bom pra essa sombra: box-shadow: 5px 5px 15px 5px rgb(0 0 0 / 5%);

  Um jeito rápido de fazer o design das sombras e depois so copiar e colocar o código é usando alguns sites pra fazer a sombra sem tocar no código, eu gosto mto desse e pode ser util pra vc: https://www.cssmatic.com/box-shadow

  👋 Espero ter ajudado e continue no foco!

  01

  Marked as helpful
• 

  Eray•1,410

  @ErayBarslan

  Posted almost 3 years ago

  Hey there and nice work! To achieve what you want you can use addEventListener to fire on input change with keyup (applies after pressing a key) and call your calculation function inside the listener like:

  document.querySelector("#custom").addEventListener("keyup", function(e) {
    let percentage = (billValue * Number(e.target.value))
    // rest of function ...
  }
  

  You can name e whatever you want and it basically selects the element #custom and target.value gets us the input value.

  Additional Suggestions:

  • You can write one function with parameter instead several functions for each button like fivePercent() , tenPercent(), ... :

  calculateTip(percent) {
    let percentage = (billValue * percent)
    ... rest of function
  }
  

  As only percent value changes for each button, you can call the same function for different buttons and just change the parameter percent.

  • It would be better to use .toFixed() method on amount. On certain outputs value overflows out of calculator on screen.
  • You can use focus selector with CSS to apply when clicked the button, so user can visually see which calculation was done like: button:focus {style}

  01

  Marked as helpful