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

Tip-Calculator using HTML, CSS and Javascript

Satyam Jha 400

@satyammjha

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


How to disable the active state for the button except for the target button? Feedback is welcomed.

Community feedback

Elaine 11,400

@elaineleung

Posted

Hi Satyam Jha, first off, good job working on this! 🙂

I just had a look at your code, and I think what you can first try is to turn the span tags into buttons; the advantage of doing this is that with a button, you can add a value attribute:

<button class="btn" id="five" value="5">5%</button>

Then you can access the value using event.target.value in a click event or just element.value (where element is the variable name of the elemnent). Even though you are using innerHTML to access the value, there are other elements that are more suitable for the task, and most importantly, this is not considered good practice for accessibility. Also, the use of span tags is giving you issues in your report, so be sure to fix those items in your report too!

The other suggestion I'll give is to use classes to do styling instead of doing it directly via JS. I have an example on CodePen for another challenge that also uses buttons; you can see how the active button can be styled using classes instead. CodePen here: https://codepen.io/elaineleung/pen/xxWzZPv

Good luck and keep going! 😊

Marked as helpful

0

Satyam Jha 400

@satyammjha

Posted

@elaineleung Thanks for the feedback. I will work on this.

1

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