Learn Form Validation by Building a Calorie Counter - Step 79

JavaScript
1

Tell us what’s happening: Following the instructions verbatim. Error Code: Your span should have the class attribute set to surplusOrDeficit.toLowerCase(), yet my code DOES have this!

Instructions say create a span without any text = check, yet this code continues to fail.

Here’s my code:

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>`;
  
}

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 79

2

you have not used the ${} to say that is code that needs to be evaluated and not literal string

3

Where does it say to do that in the instructions? Nowhere. The instructions are talking about SPAN element commonly used in HTML/CSS coding.

4

All the steps spent building HTMLString, that’s where it says you need to use ${} to concatenate variables or code inside a template literal

5

Thank you for the assistance, problem solved! I recommend rewriting the instructions because absolute beginners like myself will never remember this.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.