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

Shonuff 280

@TheShonuff

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


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

@elaineleung

Posted

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