Learn Form Validation by Building a Calorie Counter - Step 50

JavaScript
1

Tell us what’s happening:

not sure whats wrong here i keep getting Your new label element should have a for attribute set to ${entryDropdown.value}-${entryNumber}-calories.
ive looked at it and thats exactly what i have typed

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

2

I think you are missing the # in front of the opening curly brace.

For example:
#${entryDropdown.value}-#${entryNumber}
3

You have a space after for and = within the label element. Also remove space after for attribute’s value, before the closing angular bracket of your label opening tag.

4

It also seems you have a space between the “{entryDropdown.value}” and “.input-container”

5

Hi @ryanstruckus

Please remove the semi colon after the input element.
Then remove the line break before the closing angular bracket for the label opening tag.

Happy coding

6

Tell us what’s happening:

i though i already created a help topic for this already but i cant seem to find it anyways i keep getting the hint Your new label element should have a for attribute set to ${entryDropdown.value}-${entryNumber}-calories.

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</l>`;
}

// 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

7

still having issues this is what i got know

<label for="${entryDropdown.value}-${entryNumber}-calories">Entry ${entryNumber} Calories</label>`;
8

That above piece of code is passing on my end. Reset the challenge step and try again.

9

Hi @ryanstruckus

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.

image

There is a slight difference with the input element.
Try placing a single space before the forward slash.

Happy coding

10

i changed things around i dont know why the originall code had input its supoosed to be a label element but this is my code now and the hint i keep getting is Your new label element should have a for attribute set to ${entryDropdown.value}-${entryNumber}-calories .

<label for="$(entryDropdown.value}=${entryNumber}-calories">Entry ${entryNumber} Calories</label>`;
11

  1. You have a parenthesis ( instead of a curly bracket { for the starting for value.

  2. You have an equal = sign instead of a hyphen - for the middle of the for value.

12

changed those but now i get you should not modifiy your existing elements

13

We have to see your code.

Post all of the addEntry function, just like it was in the help thread that was created for you.

14 
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>`;
15

You have the end backtick of the template string twice and an extra ;

  <input type="text" id="${entryDropdown.value}-${entryNumber}-name" placeholder="Name" />`; /* remove this backtick ` and semicolon ; */
<label for="${entryDropdown.value}-${entryNumber}-calories">Entry ${entryNumber} Calories</label>`;
16

i got it thanks for your help