Skip to content
Submitted over 2 years ago

Tip Calculator

Shonuff•280
@TheShonuff
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Tip calculator app
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Feeling pretty good about this challenge completed with React. It's a bit overkill for something like this but I'm enjoying learning React. This only thing I couldn't get right was the red out-line on the number of people input to show when an input of zero was detected.

Community feedback

  • Elaine•11,400
    @elaineleungPosted over 2 years ago

    Hey Shonuff, not sure if you're still looking for an answer about the red outline, but in case you haven't find one yet, what you can do is to try using input type="number" instead of input type="text" since the number type input has some inherit number validation rules already, and then in your CSS, try a rule like this for the input:

    .NumberOfPeopleInput input:invalid {
   border: 0.2rem solid red;
}
    Marked as helpful
    2

Please log in to post a comment

Log in with GitHub

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