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-app with tailwind

mofada 310

@mofada

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


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

I have a question, when I click, I can't check radio. So I use js to slove this question, what else method to slove this question?


    
    

Community feedback

JaceLee 240

@jaceleedev

Posted

Hey. nice work! The other radio buttons have an input element and a span for the label text inside a single label element. When you click on the label, it automatically checks the radio button, even without needing a 'for' attribute, because the input is directly associated with the label.

However, for the "Custom" option, there are two input elements inside the same label:

  1. The radio button (input type="radio").
  2. The number input field (input type="number").

In this case, when you click the label, the browser isn’t sure which input to associate the click with, so the radio button doesn’t get checked by default.

This is just my opinion. I haven't actually tested it. So, enjoy coding!

0

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