Learn Form Validation by Building a Calorie Counter - Step 50

Tell us what’s happening:

The tutor prompt says your new element should have "Entry ${entryNumber} Calories. but that has already been included with the code

Your code so far

<!-- file: index.html -->

/* file: styles.css */

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

function addEntry() {
  const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
  const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
  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>;
}

// User Editable Region

Your browser information:

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

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 50

Hi there!

You aren’t added that new line within the templete literals. Add it before last template literal.
Note: Template literals are back ticks.

Hi @booleanmethod9

Here is a comparison of the original code and your code.

The code in blue is the original code, the code in red is your code.
The code in magenta is the overlap.

As @hasanzaib1389 mentioned, the last back tick is in the wrong spot.
Also, please remove the single space before the word Entry

Happy coding

1 Like

But the tutor prompt asks to add a new line called label element…

You did that, however in the code you posted, the back tick was in the wrong spot so the new label element was not recognised, and there was an extra space.

The tests are checking for exact code.

Because you didn’t added the new line of label element within the templete literals.

So a backtick to be added to the end like this?:

function addEntry() {
  const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
  const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
  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>;`
}

Remove the white space before the word Entry
Also, remove the semi colon and back tick from the end of the input element.

1 Like

Yes, didn’t do that before I posted that. But am done with that step now, thanks for all the help

1 Like