Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

tip-calculator-app

leoenter 130

@leoenter

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Show me how would you do it with modern javascript...i didnt want to use a global variable, but that's the only way i found to use the tip percentaje variable all way.

Community feedback

Paola 320

@paolas771

Posted

For the tips you could give each tip button a different ID name and make them variables in js for example const tip1 = document.getElementById("tip5); from there you would want to do an event listener for each button to set that tip and have the style of the button change. From there you would create a function to calculate the tip and use the function with the tip as a parameter in an event listener for number of people input to get the total and tip amount. Here is my solution if you want to check it out how I did it https://www.frontendmentor.io/solutions/tip-calculator-app-with-javascript-G00OTLZW4 Let me know if you need any more explanation!

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord