Skip to content
Submitted 7 months ago

Responsive Tip Calculator using HTML, CSS and JavaScript

KrishnaPoddar1•400
@KrishnaPoddar1
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?

Working with forms in conjunction with JavaScript for the first time.

Slowly but surely improving my front end skills

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

Had a doubt with the structure of the element and took a lot of time deciding the structure.

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

I would like someone to go through the code and let me know whether the solution is correct or not as I am not sure about it.

Any Ideas or suggestion would be welcomed!

Community feedback

  • Natalie Smyth•340
    @nataliesmythPosted 6 months ago

    Congrats on your submission!

    The inputs work great and your layout looks similar to the given design, here are a few suggestions

    1. Form elements don't inherit font family from parent elements, so you have to specify that you want the font family inherited for those elements ex: input { font-family: inherit; }
    2. There is also text that is black, I'd just add styling to that text so it's the correct color
    3. The calculator results aren't showing up in the UI. I would use innerText instead of textContent because the innerText property returns content as rendered on screen, while textContent returns content as it is in the HTML markup, ignoring formatting.

    Good job again!

    0
    KrishnaPoddar1•400
    @KrishnaPoddar1Posted 5 months ago

    Thank you @nataliesmyth!! Noted these changes. Will improve on them.

    Thank you for taking time to go through the solution and sharing some valuable insights.

    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