Learn Form Validation by Building a Calorie Counter - Step 87

JavaScript
1

Tell us what’s happening:

it’s telling me i need to add a second p element to my template literal but i already have all three that the step requires?

Your code so far

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


/* file: styles.css */


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

  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>${excerciseCalories} Calories Burned</p>
  `;
}

// User Editable Region

Your browser information:

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

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 87

2

Welcome to the forum @niliblox35

The blue dots indicate a typo in the variable name.

image

Happy coding

3

To add more info, when you have a syntax error, the tests don’t work and you get the first one as default. You can see in the console if you have errors.