Submitted 7 months ago

Tip Calculator using HTML, CSS, & Javascript

Benhemin• 180

@Benhemin

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Tip calculator app

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

I want my screen size changes to be smoother and for the proportions to remain the same. What is the best practice for handling different screen sizes and for dynamic resizing of elements?

When using the figma files for project designs, I can see the exact pixel dimensions for different screen sizes (mobile, desktop), how can I use those values and handle screen size changes easily?

Community feedback

Kristina• 260

@frontend-en

Posted 5 months ago

Hello, I hope my tips help you.

No processing errors if 0 people
If there are 0 people, then in tip NaN
When you hover the mouse over the input, the layout moves. Try setting transparent borders by default
It's good to write JS in a separate file
var - considered an obsolete way to declare a variable. Use let and const
Adding inline style is considered not a very good practice

Please log in to post a comment

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