Learn Form Validation by Building a Calorie Counter - Step 79

JavaScript
1

Tell us what’s happening:

I got back “Your calculateCalories function should have a surplusOrDeficit variable.” Everything is correct I don’t know why its not running.

Your code so far

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


/* file: styles.css */


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

function calculateCalories(e) {
  e.preventDefault();
  isError = false;
let surplusOrDeficit;
  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;


if (remainingCalories < 0){
  return surplusOrDeficit = "Surplus";
}else {
  return surplusOrDeficit = "Deficit";
}

// 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 Safari/605.1.15

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 79

2

I solve it by declaring the variable and making it equal the ternary operator. The mistake I did was use a if statement and declared the variable separately.

basically I did

const variable = a :? b :c;

3

It seems like the issue might be with the placement and initialization of the surplusOrDeficit variable in your calculateCalories function. Make sure to declare and initialize surplusOrDeficit properly at the beginning of your function. Here’s a revised version of your function:

function calculateCalories(e) {
e.preventDefault();
let isError = false; // Ensure isError is declared and initialized
let surplusOrDeficit; // Declare surplusOrDeficit here

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 budgetNumberInput = document.querySelector(‘#budget input[type=number]’); // Ensure you have this defined

const breakfastCalories = getCalories

1 Like