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

Responsive page using Flexbox and CSS Grid

Kosiso Igbokweβ€’ 190

@igbokwe-kosi

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


Can someone help me out with fixing the bug that selects the 10% button when I press enter

Community feedback

optimusprime202β€’ 1,220

@optimusprime202

Posted

Hey @igbokwe-kosi, This is the way to do it.

Marked as helpful

0
Maqsud Tolipovβ€’ 4,210

@maqsudtolipov

Posted

Hi there πŸ‘‹

Congratulate on finishing your project πŸŽ‰. You did a great job πŸ’‘

I give some suggestions to help you take your project design to the next level πŸ“ˆπŸ˜‰

  • Add cursor: pointer to all buttons
  • Let's add some box-shadow to the card as well

Happy coding β˜•

Maqsud

Marked as helpful

0

Kosiso Igbokweβ€’ 190

@igbokwe-kosi

Posted

@maqsudtolipov Thanks! I’ve made the addition

1
Nakoya Wilsonβ€’ 1,530

@nakoyawilson

Posted

I experimented with your code in dev tools and adding type="button" to all five <button class="form__tip-button form__tip--value" value="___"> elements fixed the bug. I think the bug was occurring because the default behaviour of a button inside a form is submit but I'm not certain. Maybe someone with more experience would be able to give a better explanation.

Marked as helpful

0

Kosiso Igbokweβ€’ 190

@igbokwe-kosi

Posted

@nakoyawilson Thank you so much! It fixed the bug.

0
Nakoya Wilsonβ€’ 1,530

@nakoyawilson

Posted

@igbokwe-kosi You're welcome!

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