Learn Form Validation by Building a Calorie Counter - Step 78

JavaScript
1

Tell us what’s happening:

There’s a issue and i really don’t understand how or why. I read and search over a topic created about this step, but i really don’t know how to solve.

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

output.innerHTML = ${};

}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 78

2 
output.innerHTML = ${};

That is not a template string but the String interpolation part of it.

You just want to assign the backtick string part for this step.

``
3

Ohh, thanks, it works, i’m sure that this is a thing that i don’t easily forget haha. So much thanks

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.