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, html, scss, and vanilla javascript

Sophia Koulenā€¢ 150

@sophiakoulen

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


Hi! I used requestAnimationFrame to update the output.

I was wondering what other ways you can use to give a smooth effect.

Thanks in advance!

Community feedback

Paolaā€¢ 320

@paolas771

Posted

Hi you do a great job! Another way you can have a smooth effect is by having an event listener on the number of people input so when user enters a number it automatically updates. Here is my solution if you want to see what I mean https://www.frontendmentor.io/challenges/tip-calculator-app-ugJNGbJUX/hub/tip-calculator-app-with-javascript-G00OTLZW4

0
Shashree Samuelā€¢ 9,260

@shashreesamuel

Posted

Hey sophiakoulen, good job completing this challenge. Keep up the good work

Your solution looks good however I think the card needs some margin from the top. You can achieve this using margin-top

In terms of your validation errors

  • Element field not allowed as child of element div in this context.

  • The type attribute is unnecessary for JavaScript resources

In terms of your accessibility issues

  • form elements must have labels, you can achieve this using the label attribute in the input tag

  • wrap all your content between <main> tags to get rid of all accessibility issues

I hope this helps

Cheers Happy coding šŸ‘

0
Oussama Zouaineā€¢ 250

@OussamaZouaine

Posted

Great job @sophiakoulen.

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