Learn Form Validation by Building a Calorie Counter - Step 85

JavaScript
1

Tell us what’s happening:

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.

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()}">${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);
}

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

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 85

2

Pay close attention to the last sentence in the directions to fix the issue

Use the .remove() method of the output variable’s classList property to remove the hide class. Don’t forget to place the word hide inside quotes.

3 Likes
3

Man, this particular step is kinda the equivalent of lawful evil, in the world of communication. It doesn’t break any rules, it does in fact explain very literally what you are supposed to do, but it does so in a very confusing, overly verbose way by introducing several jargon terms in a row without providing more context. When I first read this step, I was like “What the…?!?” but after reading it again (and again…and again) and thinking about it, I realized it was actually very direct and literal, I was just overwhelmed by the information overload.

So the code you are modifying is for the output element. Because of the instructions, you know that output has properties, one of which is classList, and that the .remove() method is part of that classList. When you are using a method, there is a specific syntax, which is something sort of like nameOfThingYouAreSelecting dot nameOfThingYouAreSelectingFrom dot nameOfMethodYouWantToUse(opening_quote nameOfThingYouWantToModify closing_quote)

so in this specific example, it would be


 output.classList.remove('hide');

because output is the name of the thing you are selecting, classList is the name of the thing you are selecting from it, .remove() is the name of the method you are using, and hide is the name of what you want to remove from it. The opening and closing parantheses and quotes are the appropriate syntax that tells the computer where those values begin and end, so that it understands how and what to find and do.

cheers,
jer

ps. if you don’t know where you’re supposed to put that, it should be it’s own line of code, and I would put it right above the line where you wrote the output.innerHTML line

4

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