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

using TailwindCSS and JavaScript

Krishna 195

@krishna-nayak

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


if there is any bugs plz respond.

Community feedback

Eray 1,410

@ErayBarslan

Posted

Design looks good and calculator works as intended nice work! Though I noticed some bugs.

Firstly, since you used "keyup" to read input values, changing numbers by scroll does no effect on calculator. To get rid of that you can simply change input type to "text" from html. If you want to convert your input into numbers you can do so from js : x = Number(x)

Also number of people input is set to 2 on load and doesn't reset with button. Seting input value to empty string in reset function should do the job. I guess you just forgot to add since rest of page resets.

In addition to these you can add hover states to buttons and add warning message when typed 0. Adding warning actually took me longer time than the rest of js when I done the project but It's a great practice to change css through js. Small tip: focusing on input adds outline, not border.

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