Tip Calculator

👾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!

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}