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

Tomiwa Orimoloyeโ€ข 1,000

@tomiwaorimoloye

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


Any feedback is welcomed. Especially on how to refactor my javascript code to make it more maintainable & reusable.

Community feedback

Dmitryโ€ข 375

@dmitrymitenkoff

Posted

Hi Tomiwa,

This is an awesome project - great job! I'm not a JS expert, but your code looks maintainable, you avoid repetition, provide good (and useful) comments and separate the concerns. I've just recently completed the same challenge, and I was really interested in the way you implemented the Tip selection section. I used (and struggled quite a bit with) radio inputs. I notice you opted into using the real button element with data value attributes. This is such a cool way of doing the 'select' section. I wonder if there are any accessibility issues with this approach?

Once again, well done!! Cheers

Marked as helpful

0

Tomiwa Orimoloyeโ€ข 1,000

@tomiwaorimoloye

Posted

@dmitrymitenkoff thanks a lot bro! Yeah, I also noticed I kept repeating some statements but I just wanted to get the project done with๐Ÿ˜‚ I don't think there are any major accessibility issues with my approach because, buttons can still be accessed with the keyboard while using the tab key. And the accessibility report didn't see anything wrong with my approach either. So I think it's okay. Thanks again for the feedback man!

1
Dmitryโ€ข 375

@dmitrymitenkoff

Posted

@tomiwaorimoloye Totally, good point about the tab key! I will definitely use the button approach in a similar context next time! cheers!

0
SivaKotariโ€ข 135

@sivakotari

Posted

@Tomiwa Orimoloye, UI and code look so clean and satisfying. Great work!! I've also worked on this project.

One observation - input fields are accepting any text, why don't you use input type number! And what does caret.js do here?

0

Tomiwa Orimoloyeโ€ข 1,000

@tomiwaorimoloye

Posted

@sivakotari yeah thanks! I would try and update the input fields. By the way, caret.js is there to make sure the caret always appends the current value. If you notice, even when you have put in a value in an input field, if you try to type additional numbers, no matter where you click on the text field, your input will always be added at the end of the current value in the input field which gives it more of a calculator vibe rather than just a form. I'm not sure if I explained that well enough.

0
SivaKotariโ€ข 135

@sivakotari

Posted

@tomiwaorimoloye yeah, make sense. Thankyou

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