Responsive Tip Calculator using Flexbox, grid, SCSS

Community feedback

• 

  Paradox•350

  @Taresta

  Posted 5 months ago

  Hello, it is a great work that you have done. I learned a lot from your project. As I was testing your webpage, I noticed some logic errors that I can share with you.

  1. When we arrive at the website, and enter 0 for the bill or just select a tip button, the error "Can't be zero" shows up for the people field, which logically does not look right. For bill, the error should be above the bill field, and it should not show up when we have just selected the tip and have done nothing else.
  2. When I have performed the calculations once and hit reset. If I press any of the tip buttons, without entering the bill or number of people, I still get a summary of the total, which should not show up just yet because no bill or people number has been added.

  I guess it would be much better if we refactor the code a bit and the bigger functions into smaller units so that each does just one job.

  const calculateTip = () => {
    if (people === 0) {
      errMsg.classList.add("active");
      return;
    }
    errMsg.classList.remove("active");
  
    const tip = (billAmt * tipPercent) / 100;
    const tipPerPerson = tip / people;
    const totalPerPerson = billAmt / people + tipPerPerson;
    //   console.log(tipPerPerson, totalPerPerson);
  
    tipAmount.textContent = `$${tipPerPerson.toFixed(2)}`;
    totalAmount.textContent = `$${totalPerPerson.toFixed(2)}`;
  };
   
  function manageError() {}
  function calculateTip() {}
  function displayResult() {}
  

  A separate function could be created to deal with just the error message. And, the calculateTip function as its name suggests just deals with the calculation of the tip and a third function could be created to deal with the UI that sets the tipAmount and the totalAmount. This makes testing easier and we can deal better with errors as they are limited to the scope of their function.

  In the reset logic, you can add the logic to make billAmt, people and tipPercent = 0 so that problem number 2 that I mentioned above does not appear.

  const reset = () => {
    removeActiveButton();
    bill.value = "";
    peopleCount.value = "";
    customTip.value = "";
    billAmt = 0;
    people = 0;
    tipPercent = 0;
    tipAmount.textContent = "$0.00";
    totalAmount.textContent = "$0.00";
  };
  

  I apologise if I missed something here. I would be more than happy to clarify any part that might have confused you. It was a great effort on your part and I wish you all the best for your future projects. Happy Coding!

  01

  Marked as helpful
• 

  Mirna Andrišić•540

  @mandrisic

  Posted 5 months ago

  it looks good, keep up the good work

  01