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 Tip Calculator App made with HTML, CSS and Vanilla JS

@anmolkapil

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


Hello Everyone 👋🏻

I made this Tip Calculator app using HTML, CSS and JS only. I also added a simple landing animation. I used flexbox to make it responsive.

I checked other's solutions, but they did not consider the overflow of output. I used "word-break" property to properly fit the calculated result. It breaks the overflowing numbers into next line. See it in action by entering a large amount in bill.

Please give your feedbacks on design and code 😊

Community feedback

@SahilDabhi

Posted

Looks great.

Marked as helpful

1

@pras1907

Posted

It looks great : )

Marked as helpful

1

@nitinrajput1521

Posted

Great work

Marked as helpful

1
Kandarp 30

@hoaxxter

Posted

❤️

Marked as helpful

1

@pranjal-codes

Posted

<3

Marked as helpful

1

@nandini2201

Posted

Great work😄

Marked as helpful

1

@anmolkapil

Posted

@nandini2201 Thanks! ❤️

0

@Kartavya9881

Posted

Nice Work Bhai. Keep Doing.

Marked as helpful

0

@markovukotic1411

Posted

This is very nice, good job

1

@anmolkapil

Posted

@markovukotic1411 Thanks 😊

0
Azka 480

@Azkanorouzi

Posted

good job

1

@anmolkapil

Posted

@Azkanorouzi Thank you ❤️

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