Learn Form Validation by Building a Calorie Counter - Step 80

JavaScript
1

Tell us what’s happening:

I am not sure why this step is not working. I have been stuck on it since yesterday.

Your code so far

`

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

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;

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>
  <input
    type="number"
    min="0"
    id="${entryDropdown.value}-${entryNumber}-calories"
    placeholder="Calories"
  />`;
  targetInputContainer.insertAdjacentHTML('beforeend', HTMLString);
}

function calculateCalories(e) {
  e.preventDefault();
  isError = false;



 output.innerHTML = ``;



 
  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';
  

}

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;
}

addEntryButton.addEventListener("click", addEntry);
calorieCounter.addEventListener("submit", calculateCalories);
clearButton.addEventListener("click", () => {
  document.querySelectorAll('.input-container').forEach(container => container.innerHTML = '');
  output.innerHTML = '';
});

Your browser information:

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

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 80

2

hi there,
it looks like you’ve made multiple modifications to the code.

Can you click reset to restore the code to the original one given and then add just one line of code as requested? (you only need to add 1 new line of code)

If you are unable to understand something in the step, let us know what you need further clarification on.

3

You need to construct the HTML string that will be displayed in the output element. Start by assigning an empty template literal to the innerHTML property of the output element on a new line at the end of the function. I am confused on this bit.
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;

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> <input type="number" min="0" id="${entryDropdown.value}-${entryNumber}-calories" placeholder="Calories" />;
targetInputContainer.insertAdjacentHTML(‘beforeend’, HTMLString);
}

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’;

}

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;
}

addEntryButton.addEventListener(“click”, addEntry);

4

I assume you meant you are confused by this part and not the first part (let me know if that was the wrong guess).

So they need you to create an empty template literal. I assume you know this one. (again correct me if not)
And they want you to assign this new literal to the innerHTML property of the output variable. (hopefully you’re good with this too)

Finally they mention where this new line of code should go. It should go: on a new line at the end of the function.

So the question you may have is: which function do they mean.
Since they didn’t specify the name you must assume they meant the function that is already in your editor display.
When you click reset, the function that is in the editor display is this one:
function calculateCalories(e) { (plus a bunch of code in its body)

So just go to the end of the calculateCalories function and just before the closing parenthesis, add the new line of code they asked for.