Skip to content
Submitted over 2 years ago

Tip Calculator App

Nicolas Aguirre•170
@NicoAguirre1105
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Tip calculator app
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hi everyone!

All feedback is welcome.

  • I think that some JS functions are overcomplexed (I think the worst one is inputError function). I feel that they could be done better. Let me know all changes that could be done.
  • In my JS code I used srcElement method in input's 'change' event function because the element that is returned isn't a HTML element, so I could get the element's 'id' nor its 'value'. I read that srcElement method is outdated. Could it be done with other method or how is a better option to get those attributes?

Community feedback

  • Elaine•11,400
    @elaineleungPosted over 2 years ago

    Hi Nicolas, well done completing this, as it's not an easy Junior one!

    About the JS, I agree that there's the tendency to make things more complex than they need to be, which was my case when I wrote my code. When I started looking at other people's solutions while I was refactoring it, I saw how a lot of things can be simplified. With the error message for instance, you may not need to style it in the JS, which can be quite cumbersome and can get verbose; in fact, you can try using CSS and also the button's attributes to help with styling, such as the :invalid pseudo class in the button which can be accessed in CSS.

    About the srcElement, I think you should be able to obtain the element's id or value if you access the event.target and not just event. If you only access the event, you'll most likely just find an Object and not the element.

    Lastly, I just tested out your app, and it looks like after I entered everything in, I needed to click on a tip button in order to activate the calculate function. You can see whether you can have a function that can be called either by entering an input or clicking a button, not just the click event.

    You can check out my newly refactored version and compare it with yours: https://www.frontendmentor.io/solutions/responsive-tip-calculator-app-with-plain-js-Nj1Gtzub_V

    Hope this helps!

    Marked as helpful
    1
    Nicolas Aguirre•170
    @NicoAguirre1105Posted over 2 years ago

    @elaineleung Thank you!!

    1

Please log in to post a comment

Log in with GitHub

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