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 solution

Maxmillianโ€ข 180

@MaxKolbe

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


Thankfully I have finished this project, any and all feedback is appreciated especialy feedback on best practices.

Community feedback

Amosโ€ข 470

@fistty

Posted

Hi Maxmillian, I noticed that inputting a floating number shows an error like 142.55. I see that you are using a regex on the value but it seems unnecessary. You can simply make the input type="number"

<input type="number" onkeyup="validateInputMoney()" id="bill">

Marked as helpful

1

Maxmillianโ€ข 180

@MaxKolbe

Posted

@fistty Thank you for bringing this to my notice. I'll get to work on fixing that as soon as possible. I appreciate the feedback

0
Hyronโ€ข 5,850

@hyrongennike

Posted

Hi @MaxKolbe,

Congrats on completing the challenge

if you want to position the card in the middle of the page. You can replace your main rule with the following.

main {
    background-color: var(--Light-grayish-cyan);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
}

also set a max width to prevent it from growing to wide.

.cal-body {
    max-width: 750px;
}

I can't select a tip but I can enter one.

Click on the view report button above and fix those issue, other than that you did good. hope this is helpful.

Marked as helpful

1

Maxmillianโ€ข 180

@MaxKolbe

Posted

@hyrongennike Wow! Thanks a lot for showing me this, it looks like a better implementation. I'll implement that as soon as I can. :)

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