Tip Calculator Using HTML, CSS, Javascript and SASS

Community feedback

• 

  Mi Vu•380

  @gerichilli

  Posted almost 3 years ago

  Hi Michael, Nice to meet you 😊,

  I hope my following answers can help you

  Q1. Yes, you can completely implement tip select with radios, and it is a best practice, much better than using div. Getting form data from a div tag will be more complicated and inefficient than getting it from a form element.

  • Step 1: We create a series of input labels (input comes first, followed by its label). All inputs must have the same name attribute. To ensure accessibility, you should wrap them in a fieldset tag. (References: fieldset) 

  <fieldset>
     <legend>Select Tip %</legend>
     <div>
        <input name="tips" type="radio" value="5" />
        <label for="tip-5"> 5% </label> 
        <input name="tips" type="radio" value="10" />
        <label for="tip-10"> 10% </label>
        <input checked="checked" name="tips" type="radio" value="15" />
        <label for="tip-15"> 15% </label> 
        <input name="tips" type="radio" value="25" /> 
        <label for="tip-25"> 25% </label> 
        <input name="tips" type="radio" value="50" /> 
        <label for="tip-50"> 50% </label> 
        <input name="tips" type="number" value="" placeholder="Custom" />
    </div>
  </fieldset>
  

  • Step 2: One thing you should avoid doing is hiding inputs with display: none.  You can hide them like this to ensure web accessibility (I copied from Tailwind CSS)

  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
  

  • Step 3: Create styles for the labels. Their styles are what you wrote for the div tag (your tip select button).

  • Step 4: Since the input and the label (with the for attribute being the id of the input) are connected, when you click on a label, you will also select the radio button corresponding to that label. So when a radio is selected, its corresponding label will be added with the class selected . This can be achieved through CSS using CSS Combinators. Here I use +

  input:checked + label {
       color: hsl(183deg, 100%, 15%);
       background-color: hsl(172deg, 67%, 45%);
  }
  

  We're done with it.  Here is my solution:  Github link Live

  Q2. In response to the second question, I see that your form can be reset using the reset button, but the input fields must still be filled out. 

  I would be very grateful if you star my github repo (Since I'm in the process of looking for a new job 😉)

  01

  Marked as helpful
• 

  Elaine•11,360

  @elaineleung

  Posted almost 3 years ago

  Hi Michael, just wanted to quickly answer your first question: Yes, it can be done! That's what I did in my solution, and I also made the custom input function like a radio button option so that the entire group of buttons can be seen as one group when used with the tab key. Anyway, instead of explaining how, I'll just share my solution link with you: https://www.frontendmentor.io/solutions/responsive-tip-calculator-app-with-plain-js-Nj1Gtzub_V

  It might help you with the reset button question as well. Good luck!

  03

  Marked as helpful