Tip calculator app

Community feedback

• 

  Ouattara•200

  @Kaji17Posted about 2 years ago

  Hi @ahmed-Faroolle good djob 👍, let me give you some tips that can help you👨‍💻.

  • You can use regex to format text in your field input instead type= 'number' to avoid to have a default vertical row in your input. Code:

  <input type="text" ... oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');">
  
  

  • In your <div class="checkboxes__grid"> replace input and label to avoid to use label for write percentage 5% instead button . Code:

  HTML

  <div class="checkboxes__grid">
                <button class="check__box" id="fivepercent" value="5">5%</button>
                <button class="check__box" id="tenpercent" value="10">10%</button>
                 ...
                <input type="text" placeholder="Custom" class="check__box custom" id="inputcustom"
                oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');">
  </div>
  

  JS

  var selectTipTab = document.querySelectorAll('.check__box');
  
  // add logic when we click on a button
  selectTipTab.forEach(element => {
      element.addEventListener('click', () => {
        ...
      })
  });
  
  

  I hope it will be useful for you good code 🤞 (⌐■_■)

  Marked as helpful

  0