Step84 temperal literal code not passingBuild a Calorie Counter - Step 84

HTML-CSS
1

hi, doing the calorie counter project, up to step 84. i use a screen reader jaws for windows, and totally blind, the step will not pass. i have typed up the code manually in vs code, but it does not pass, and tried a few times, did do a hard refresh and reset the lesson, deleted the code, then pasted from vs code, will show you my script from vs code the link to the step and the error message, no steps testing in firefox and still a problem. and just tells me via jaws the browser preview window. so is there any hidden characters in the fcc editor or i am missing. need your help. keeps giving an error message should wrap my text inside the span which i am doing. so just frustrated. can any one help. Before you start moaning saying this code is different from what the fcc expects, well cannot see and so cannot see what the fcc code editor and the code it expects. so no sniping, just be curtious and help me out, totally blind and first time doing this sort of thing. so pasting below.

// ------------------------------
// Calorie Counter Script - up to Step 84
// ------------------------------

const calorieCounter = document.getElementById('calorie-counter');
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;

// Clean input string: remove +, -, spaces
function cleanInputString(str) {
  const regex = /[+\-\s]/g;
  return str.replace(regex, '');
}

// Check for invalid input (example check)
function isInvalidInput(str) {
  const regex = /\de/; // Keep original for step requirement
  return str.match(regex);
}

// Add a new entry input set
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" placeholder="Name" id="${entryDropdown.value}-${entryNumber}-name" />

    <label for="${entryDropdown.value}-${entryNumber}-calories">Entry ${entryNumber} Calories</label>
    <input type="number" placeholder="Calories" id="${entryDropdown.value}-${entryNumber}-calories" min="0" />
  `;

  targetInputContainer.insertAdjacentHTML('beforeend', HTMLString);
}

// Sum calories from a list of inputs
function getCaloriesFromInputs(list) {
  let calories = 0;

  for (const item of list) {
    const currVal = cleanInputString(item.value);
    const invalidInputMatch = isInvalidInput(currVal);

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

    calories += Number(currVal);
  }

  return calories;
}

const calculateCalories = function(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";

  // ✅ This is what FCC is looking for:
output.innerHTML = `<span>${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}</span>`;
};

  

// Calculate remaining calories and display


// Event listeners
addEntryButton.addEventListener("click", addEntry);
calorieCounter.addEventListener('submit', calculateCalories);


https://www.freecodecamp.org/learn/full-stack-developer/workshop-calorie-counter/step-84
You should wrap the remainingCalories variable in Math.abs().
2
  • this innerHTML is missing other related stuff in it<, such as “span” classname
  • your use of Math.abs() method is correct!

it probably is due to other reasons, try again resetting and simply make use of Math.abs method on “remainingCalories”, happy coding :slight_smile: