Submitted over 2 years ago

Responsive Tip Calculator

Alvaro• 70

@BrazilianMemeMaster

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

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 :^)

Community feedback

Ayush Nath• 360

@Beats-Ayush

Posted over 2 years ago

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

Alvaro• 70

@BrazilianMemeMaster

Posted over 2 years ago

@Beats-Ayush thanks for the feedback, i did remove the spinner arrows, and state is React related? I don't know a thing about React T_T

Shashree Samuel• 9,260

@shashreesamuel

Posted over 2 years ago

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 👍

Alvaro• 70

@BrazilianMemeMaster

Posted over 2 years ago

@TheCoderGuru thanks for the feedback!! 😃

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