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 with CSS and Javascript

Gabi 280

@Gabocz

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


Hi! I struggled a lot with the CSS of this project. A couple times I felt like giving up. The custom button was definitely a challenge in terms of styling and functionality. Also, initially github couldn't compile the site, so that's why the different commits. I am not sure what went wrong with that... Anyway, I'm proud that I have finished this project.

Any suggestions for improvement are appreciated!

Community feedback

Ayush Nath 360

@Beats-Ayush

Posted

Nice job completing this challenge. There are some places where you could improve -

  • The hover state isn't persisting on the normal buttons.
  • Also upon selecting the bill and tip percentage, the error for the number of people is automatically coming up even though I haven't touched the input yet.

You can have a look at my attempt to see what I meant.

Marked as helpful

0

@besttlookk

Posted

Hi, Below are some issue i like to point out:

  1. Consider your design for higher input and result. Your design breaks on getting large digits output. Limit to 2 decimel place only.
  2. On entering large number number overlap with icons.Add left padding to input field to avoid overlapping.
  3. For custom tip use input of type number with maximum percent limit of 100 or something.
  4. If you want you can remove arrow button on input using below code:
  /* Chrome, Safari, Edge, Opera */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Firefox */
  input[type="number"] {
    -moz-appearance: textfield;
  }

Tho arrow wont appear you can still increase or decrease the number using keyboad's arrow.

Good Luck #happyCoding

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