Skip to content
Submitted 4 months ago

TIP CALCLATOR APP

#accessibility
1deadjoe•370
@1deadjoe
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

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

I am proud I was finally able to grasp JavaScript syntaxes that were giving me a rpoblem earlier. Such as the correct use of forEach(). I was able to come up withe the design in a much shorter period of time, and without having to go research in order to figure out how to style different components.

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

My challenge was handling the user inputs, but after going through a few Javascript documentations, I got the hang of it.

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

I would highly appreciate assistance it finding better ways to write my JS code, checking how semantic my HTML is. Anyone whose approach was different to mine could give feedback so I could check theirs out.

Community feedback

  • Martin Liesche•570
    @marliedevPosted about 2 months ago

    Hey deadjoe! Overall your solutions looks fine, but could be improved in some ways. Maybe my feedback helps:

    Calculation

    • is not correct! The total amount should be let totalTip = billValue / peopleValue + tipValue;

    Validation:

    • you could have also added validations / feedback for the bill amount and custom tip value. When i leave those blank the result is NaN

    Semantic Markup:

    • dont put <header> inside the main element. The <header> should only be used above the main (for e. g. a navbar with logo) or inside an <article> element
    • you could have used a form and radio-group for the inputs. This way the form-handling and also accessibility could be improved.

    JavaScript:

    • More comments! Thats crucial!
    • Naming could be improved and more clearly/readable. "handleClick()" is not clear enough for the tip-buttons. Better: handleTipButtonClick()
    • You could have added the base values directly inside the <input value="">
    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