Wrong Logic? - Learn Form Validation by Building a Calorie Counter - Step 77

Tell us what’s happening:

Im stumbling over this specific line of code:
const surplusOrDeficit = remainingCalories >= 0 ? 'Surplus' : 'Deficit';

So correct me if im wrong, but shouldn’t the logic of surplus and deficit be switched?

Explanation: FCC want to set the ternary operator to ‘Surplus’ if the remaining calories >= 0, but if i have e.g 400 remaining calories today, then i am in a so called “calorie deficit”, not a surplus.

(If this is meant to say that my Remaining Calories are in a “surplus”, i get where the logic it rootet, but as far as i know you only talk about calorie surplus or deficit in relation to a person, not their remaining Calories (because this would be inherently confusing).

So the correct line should be:
const surplusOrDeficit = remainingCalories >= 0 ? 'Deficit' : 'Surplus';

(I know i kind of care too much about something so trivial, but im a personal trainer, though i’m not a native english speaker, so i could be wrong here…)

Your code so far

const surplusOrDeficit = remainingCalories >= 0 ? ‘Deficit’ : ‘Surplus’;


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.

const budgetNumberInput = document.getElementById('budget');
const entryDropdown = document.getElementById('entry-dropdown');
const addEntryButton = document.getElementById('add-entry');
const clearButton = document.getElementById('clear');
const output = document.getElementById('output');
let isError = false;

function cleanInputString(str) {
  const regex = /[+-\s]/g;
  return str.replace(regex, '');

function isInvalidInput(str) {
  const regex = /\d+e\d+/i;
  return str.match(regex);

function addEntry() {
  const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
  const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
  const HTMLString = `
  <label for="${entryDropdown.value}-${entryNumber}-name">Entry ${entryNumber} Name</label>
  <input type="text" id="${entryDropdown.value}-${entryNumber}-name" placeholder="Name" />
  <label for="${entryDropdown.value}-${entryNumber}-calories">Entry ${entryNumber} Calories</label>
  targetInputContainer.insertAdjacentHTML('beforeend', HTMLString);

function calculateCalories(e) {
  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) {

  const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories;
  const remainingCalories = budgetCalories - consumedCalories + exerciseCalories;
  const surplusOrDeficit = remainingCalories >= 0 ? 'Deficit' : 'Surplus'; 


function getCaloriesFromInputs(list) {
  let calories = 0;

  for (let i = 0; i < list.length; i++) {
    const currVal = cleanInputString(list[i].value);
    const invalidInputMatch = isInvalidInput(currVal);

    if (invalidInputMatch) {
      alert(`Invalid Input: ${invalidInputMatch[0]}`);
      isError = true;
      return null;
    calories += Number(currVal);
  return calories;

addEntryButton.addEventListener("click", addEntry);

Your browser information:

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

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 77

Hey @salimo, does this github issue address your concerns?

Sorry for the late response, didnt visit the forum for a few days, but yes it indeed does! Thanks :smile: