Skip to content
Submitted about 1 year ago

Responsive Tip Calculator using HTML, CSS and JavaScript

accessibility, semantic-ui
KrishnaPoddar1•400
@KrishnaPoddar1
A solution to the Tip calculator app challenge
Preview (opens in new tab)Code (opens in new tab)

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!

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Natalie Smyth•340
    @nataliesmyth

    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!

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