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 using CSS Grid, Flex and JS

P

@Antonvasilache

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


What are you most proud of, and what would you do differently next time?

  • JavaScript part was pretty easy, despite handling multiple inputs of different types
  • Managed to implement a bit of reusability in the code
  • Would probably think more about form validation to make sure it's properly covered

What challenges did you encounter, and how did you overcome them?

  • Some of the input styles were challenging, but nothing a few more divs can't fix
  • Naming the CSS classes due to how deep the HTML tree became - I used some element selectors to cover for that

What specific areas of your project would you like help with?

There is probably a better way of storing the state, I tried to use an object, but didn't do much with it in the end.

Community feedback

P
CHBNDJ 390

@CHBNDJ

Posted

nice work overall just check the width and the height of your elements and the position of them also + the splitter

1

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