Learn Form Validation by Building a Calorie Counter - Step 82

JavaScript
1

Tell us what’s happening:

Hi there

I do not know why it’s not passing me? can someone help please?

Iskren

Your code so far

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


/* file: styles.css */


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

function calculateCalories(e) {
  e.preventDefault();
  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()"></span>`;

}

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4.1 Safari/605.1.15

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 82

2

You need to interpolate surplusOrDeficit.toLowerCase(). Otherwise, it’s taken as a literal string, instead of getting the actual value of surplusOrDeficit, changing it to lowercase, and then passing that string as the class of your span element.

What you have:

output.innerHTML = `<span class="surplusOrDeficit.toLowerCase()"></span>`;

What you need:

Mod Edit SOLUTION REMOVED

Note the ${ and } on either side of surplusOrDeficit.toLowerCase().

Let me know if that works.

2 Likes
3

great, thanks alot, I knew it was something easy

1 Like
4

Anytime, glad to help :v:

Be sure to mark the answer as the solution so others know it’s been solved when browsing the forum. Thanks!

5

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

1 Like
6

Also, no need to tell people to give you the checkmark

1 Like
7

Well noted. Thanks for the feedback!

1 Like