Responsive tip calculator built using React

Community feedback

• 

  kunal90803•550

  @kunal90803

  Posted 3 months ago

  Great work, @KuvashneeNaidoo

  I really appreciate the structure and clarity of your code, especially the way you include comments to enhance readability. Your approach makes it easy to understand and maintain.

  I did notice a small detail—you've set the type attribute in the input tag as "text". It would be better to use "number" instead. Additionally, to remove the default up and down arrows in the input box, you can add the following CSS:

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
  }
  

  Other than that u done a great job and best of luck of future ahead.

  HAPPY CODING 😊.

  11

  Marked as helpful
• 

  P

  Miran Legin•740

  @miranlegin

  Posted 3 months ago

  Hi @KuvashneeNaidoo,

  First of all, congratulations on completing this challenge!

  There are still a couple of things that could be improved, so let's get started.

  The use of h[x] tags seems arbitrary, and I personally don't think anything other than <h1> fits this project. For instance, <h1>Splitter App</h1> or something similar would work well here. Other than that, no other h[x] tags are appropriate.

  Speaking of tags, you could use <label> elements linked with <input> instead of using <h6>. That would help with accessibility and also would create a link between labels and inputs.

  Applying border only of :focus makes input elements change it's size and the whole lest side area jumps because 4px is added on focus to the input element.

  .input input:focus {
      border: 2px solid #26c0ab;
      outline: none;
  }
  

  To prevent this from happening you could apply border to default input styling but leave it transparent like so

  .input input {
      border: 2px solid transparent;
      outline: none;
  }
  

  and only change color when in focused state, like

  .input input:focus { border-color: #26c0ab; }

  That would always create border but only change it's color when in focused state, preventing content jumps.

  You could also put some event listeners on "Bill" and "Number of people" as well because as much as you cannot calculate "Tip amount" you can definitely calculate "Total amount" without any Tip percentage selected. Meaning that you don't need to select tip to calculate Total/person amount.

  Last but not least you can use <input type="radio" name="tip" /> for all the Tip buttons instead of regular buttons which is more suitable for this kind of functionality. There is no need to keep track of which button is triggered because input with type="radio" can only have single element active at a time. The rule is they need to share the same "name" attribute for this functionality to work, for example

  <input type="radio" name="tip" id="5" />
  <input type="radio" name="tip" id="10" />
  <input type="radio" name="tip" id="15" />
  <input type="radio" name="tip" id="25" />
  

  etc...

  Hope this helps.

  Happy coding! Miran

  00