Tip calculator app using HTML, CSS, and JavaScript

Community feedback

• 

  Goran•500

  @GoranK89Posted about 2 years ago

  Hello HaYeong,

  the calculator works, well done. Now for the JS part, I would recommend you try the forEach loop on all buttons except the custom one. What I mean is a setup something like this:

  First the HTML setup for the buttons

              <input
                type="button"
                value="5%"
                class="btn-tip"
              />
              <input
                type="button"
                value="10%"
                class="btn-tip"
              />
  

  Now we can gather all the buttons in JS and run a loop over them:

  const tipButtons = document.querySelectorAll('.btn-tip');  // all the buttons
  
  tipButtons.forEach(btn =>
    btn.addEventListener('click', function (e) {
  
      // on every clicked button remove the % symbol, only the value remains, store it in a variable
      const clicked = e.target.value.slice(0, -1); 
  
        // some sample calculations you can do with the "clicked" variable
        const billPerPerson = billAmmount.value / peopleNum.value;
        const tipPerPerson = (billPerPerson / 100) * clicked;
        const totalToPay = billPerPerson + tipPerPerson;
      
        // finally displaying the desired calculations example
        tipAmntPerPerson.textContent = '$' + tipPerPerson.toFixed(2);
      }
    })
  );
  

  You can also add some if/else statements inside the loop so for example calculations for "people < 1" are not done. This will probably shorten your code by 90% and clean it up a lot. Hope this was helpful and keep at it!

  Marked as helpful

  0