JavaScript Algorithms and Data Structures Learn Form Validation building a Calories Counter Step 68

JavaScript
1

I was asked to declare an empty calculateCalories function, which takes a parameter named e . This function will be another event listener, so the first argument passed will be the browser event – e is a common name for this parameter. and i did this

function calculateCalories(e ){
}
however i am not being passed and this message keeps popping up
Sorry, your code does not pass. Keep trying.

You should declare a calculateCalories variable.
i have tried declaring the function as a variable and its still not passing please i need idea and help on how to do this

2

Declare a variable calculateCalories and assigned it an anonymous function with a parameter e.
You created a function using regular function keyword.

3

i have done this
const calculateCalories= caloriesCalculator( e) says wrong
const calculateCalories=(e)=>{ } says wrong
const calculateCalories= function calculateCalories(e){ } says wrong

4

Post a link to the challenge step and also your full JavaScript code from the challenge editor. Remember, use Three back ticks (```) on a separate line before and after your code block here in your reply to correctly preform it.

5 
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);

 const calculateCalories = function calculateCalories(e) {}


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);[https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/learn-form-validation-by-building-a-calorie-counter/step-68](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/learn-form-validation-by-building-a-calorie-counter/step-68)
6

Welcome to the forum @mizjeni
on line 37 check your code and make sure you have no spaces with the function like

function name(v){

}

Happy coding!

7

The above function is missing it’s closing bracket. Post a link to the challenge step for more assistance.

8

I didn’t even see the syntax error, when looking through the code, you’ve got a great eye.

1 Like
9

thanks so much the problem was the brace bracket , you’ve got a great sight

1 Like
10

Anonymous function assigned to variable didn’t need the function keyword. Also you are using the calculateCalories twice.
find out how to create an arrow function.

11

thank you for your support