Tip Calculator Using HTML, CSS, Javascript and SASS

Community feedback

• 

  Mi Vu•380

  @gerichilliPosted about 2 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 😉)

  Marked as helpful

  0

  ---

  

  P

  Michael Tze•480

  @Biggboss7Posted about 2 years ago

  Hello @gerichilli, Thankyou so much on your solutions. I find it really helpful and informative. I really appreciate your step-by-step explanation.

  0
• 

  Elaine•11,400

  @elaineleungPosted about 2 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!

  Marked as helpful

  0

  ---

  

  P

  Michael Tze•480

  @Biggboss7Posted about 2 years ago

  Helllo ms @elaineleung, Thankyou so much on your solution. Really Appreciate it. May I know, miss, why you choose to target the input attributes rather than make a new class for them ?

  1

  

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  @Biggboss7 Great question, Michael! Using the attribute for querying in the JS is something I learned from Kyle at Web Dev Simplified. I find that is makes the HTML easier to read when I don't need to add an extra class for the input, and it also makes the JS clearer when I can see right away that it's an input, whereas if I'm using a class for querying, I sometimes might need to look in the HTML to double check what the element is since classes can be used on anything. It's also good for separation of concerns, which I believe is the main reason Kyle uses attributes (and data attributes) in the JS.

  1

  

  P

  Michael Tze•480

  @Biggboss7Posted about 2 years ago

  @elaineleung okay, well noted, thankyou miss

  0