Learn Form Validation by Building a Calorie Counter - Step 61

Tell us what’s happening:

i am stuck at step 61 getting this error msg Sorry, your code does not pass. Hang in there.

You should use a template literal to pass the Invalid Input: message to the alert() function.
do not know how to go about this

Your code so far

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 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] }`);
}

}
}

addEntryButton.addEventListener(“click”, addEntry);

WARNING

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.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 61

Hi @zeedankhalid

The correct syntax for template literals uses $ not &.

Also dont give unnecessary spaces between $ and { as then it will not be correctly parsed.

Correct these two things and your code with work.

3 Likes

Thank you very much issue is resolved

2 Likes

Solution.

Mod Edit SOLUTION REMOVED
be careful with extra spacing

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.