Learn Form Validation by Building a Calorie Counter - Step 88

JavaScript
1 
### Tell us what's happening:

// running tests
1. You should access the classList property of the output element.
2. You should call the .remove() method of the classList property.
3. You should pass hide as the argument to the .remove() method.
// tests completed
// console output
[ReferenceError: calculateCalories is not defined]
[ReferenceError: calculateCalories is not defined]
[ReferenceError: calculateCalories is not defined]

### Your code so far

<!-- file: index.html -->


/* file: script.js */
// User Editable Region

function calculateCalories(e) {
  e.preventDefault() = ${budgetCalories} Calories Budgeted
  isError = false;

  const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']");
  const lunchNumberInputs = document.querySelectorAll("#lunch input[type='number']");
  const dinnerNumberInputs = document.querySelectorAll("#dinner input[type='number']");
  const snacksNumberInputs = document.querySelectorAll("#snacks input[type='number']");
  const exerciseNumberInputs = document.querySelectorAll("#exercise input[type='number']");

  const breakfastCalories = getCaloriesFromInputs(breakfastNumberInputs);
  const lunchCalories = getCaloriesFromInputs(lunchNumberInputs);
  const dinnerCalories = getCaloriesFromInputs(dinnerNumberInputs);
  const snacksCalories = getCaloriesFromInputs(snacksNumberInputs);
  const exerciseCalories = getCaloriesFromInputs(exerciseNumberInputs);
  const budgetCalories = getCaloriesFromInputs([budgetNumberInput]);

  if (isError) {
    return;
  }

  const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories;
  const remainingCalories = budgetCalories - consumedCalories + exerciseCalories;
  const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit';
  output.innerHTML = `
  <span class="${surplusOrDeficit.toLowerCase()}">${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}</span>
  <hr>
  <p>${budgetCalories} Calories Budgeted</p>
  <p>${consumedCalories} Calories Consumed</p>
  <p>${exerciseCalories} Calories Burned</p>
  `;

  output.classList.remove("hide");

}

// User Editable Region

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 Edg/131.0.0.0

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 88

2

don’t you get an error in the console?

SyntaxError: unknown: Invalid left-hand side in assignment expression. (39:2)

  37 |
  38 | function calculateCalories(e) {
> 39 |   e.preventDefault() = ${budgetCalories} Calories Budgeted
     |   ^
  40 |   isError = false;
  41 |
  42 |   const breakfastNumberInputs = document.querySelectorAll("#breakfast input[type='number']");