Skip to content
Submitted over 3 years ago

Responsive Tip Calculator

Alvaro•70
@BrazilianMemeMaster
A solution to the Tip calculator app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This is my third challenge and by far the most difficult for me, specially because it involves deeper javascript logic. The CSS part was ok, but not easy like the other challenges I did, the most difficult part of this challenge was definitely the JS part. I tried to use Classes, but it didn't go well, so I just used a bunch of function, and it worked!

I would like to know if there's a quicker/more effective way of getting the same result, maybe using class? I don't know, my solution looked like I did too much of unnecessary work at some points, but I don't know where.

Anyway, I had a lot of fun doing this, even tho' I took like 2 days to finish it :^)

Code

Please log in to post a comment

Log in

Community feedback

  • Ayush Nath•360
    @Beats-Ayush

    Definitely agree that the Javascript was the most difficult part. Some points -

    • Vanilla JS will definitely require a lot of functions.
    • I used React as a means to counter that.
    • Other than that the window is reloading each time you reset. Instead use state to do that for you.
    • Instead of setting <input type='number' />, maybe use <input type='text' /> or simply remove the spinner arrows to improve the UI.
    Marked as helpful
  • Shashree Samuel•8,860
    @shashreesamuel

    Hey good job completing this challenge.

    Keep up the good work

    Your solution looks great however I think that the color of the text custom is supposed to be a little darker. I recommend referring back to the style-guide.md file just to make sure.

    I hope this helps

    Cheers Happy coding 👍

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