Learn Form Validation by Building a Calorie Counter - Step 48

I have cannot solve the problem. Please help me

Tell us what’s happening:

Step 48
After your label element, and on a new line in your template string, create an input element. Give it a type attribute set to text, a placeholder attribute set to Name, and an id attribute that matches the for attribute of your label element.

Your code so far

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

/* 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>`;
 <label for="${entryDropdown.value}-${entryNumber}-name">Name:</label>
<br>
<input type="text" placeholder="Name" id="${entryDropdown.value}-${entryNumber}-name"> 
}

// User Editable Region
/* file: styles.css */

Your browser information:

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

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 48

Welcome to the forum @wdixon844

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.

You appear to have two label elements.

  1. Please remove the modified label element shown in red.
  2. remove the br element.
  3. place the input element on a new line before the back tick.

Happy coding