Tip Calculator App Attempt Pure Vanilla JS, HTML, CSS

Community feedback

• 

  Katie•405

  @kem522Posted over 3 years ago

  This was pretty clean! Hard to find any suggestions for improvements, nice one 👍

  In the JS the code you run inside each case of the switch statement is almost identical so you could probably abstract that into a function, something like this:

  const tipBtnClick = (arr) => {
         arr.forEach(num => {
           selectBtns[num].classList.remove('active');
          });
  };
  
  selectBtns.forEach((selBtn) => {
      selBtn.addEventListener('click', (e) => {
          // you can move these out of the switch statement since they happen in every case
          selBtn.classList.add('active');
          customBtn.blur();
          switch (selBtn.className) {
              case 'tip-5':
                  tipPercent = 1.05;
                  tipBtnClick([1,2,3,4]);
                  break;
              case 'tip-10':
                  tipPercent = 1.10;
                   tipBtnClick([0,2,3,4]);
                  break;
              case 'tip-15':
                  tipPercent = 1.15;
                   tipBtnClick([01,3,4]);
                  break;
              case 'tip-25':
                   tipPercent = 1.25;
                   tipBtnClick([0,1,2,4]);
                  break;
              case 'tip-50':
                  tipPercent = 1.50;
                  tipBtnClick([0,1,2,3]);
                  break;
              default:
                  break;
          }
      });
  });
  

  In fact, by using the button html attributes you could probably reduce duplication even more! If you give your button a value that is equal to what you'd like the tip percentage to be and leverage the e.target from the event listener you could get it down to something like this:

  // html
  <button value="1.05" >5%</button>
  
  // javascript
  selectBtns.forEach((selBtn) => {
      selBtn.addEventListener('click', (e) => {
          // the value attribute will be a string so you need to make sure to convert it to a number to be able to use it in calculations, in this case parseFloat instead of parseInt since you need the decimal places 
           tipPercent = parseFloat(e.target.value, 10);
          e.target.classList.add('active');
          customBtn.blur();
         selectBtns.forEach(btn => {
            if (btn.value !== e.target.value) {
                  btn.classList.remove('active');
            }
         });
      });
  });
  

  I really hope that makes sense! Hard to write code in markdown. Here is a codesandbox I used to make sure my ramblings actually worked: https://codesandbox.io/s/eloquent-bhaskara-02pbo?file=/src/index.js

  1

  ---

  

  Jessa Mae Alcantara•30

  @EpikSkeptikPosted over 3 years ago

  @kem522 Thank you very much will definitely update with this feedback in mind!

  0
• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 3 years ago

  • so i enter the number of people as 1 and i didn't enter the bill amount but the result came as Tip amount / person : $15.00 and the total as 115.
  • the percentage buttons are not working to my expectation.

  1

  ---

  

  Jessa Mae Alcantara•30

  @EpikSkeptikPosted over 3 years ago

  @ChamuMutezva Hi Chamunorwa Im guessing I should call the calculate button upon each update of all values. Thanks for the feedback!

  0
• 

  Ahmed Faisal•5,095

  @afrusselPosted over 3 years ago

  Hi, functionality is not work. It showing $NaN

  0

  ---

  

  Jessa Mae Alcantara•30

  @EpikSkeptikPosted over 3 years ago

  @afrussel Hi Ahmed can you let me know what the test case was to get NaN? Still havent figured a way to check for NaN values when inputs are invalid.

  0