Build a Calorie Counter - Step 50

HTML-CSS
1

Tell us what’s happening:

Hello there,
do you any idea about this “You should not modify your existing elements”

Your code so far

html

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

css

/* file: styles.css */

js

/* 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/140.0.0.0 Safari/537.36

Challenge Information:

Build a Calorie Counter - Step 50

https://www.freecodecamp.org/learn/full-stack-developer/workshop-calorie-counter/step-50

Preformatted text

2

click the Reset button to restore the original code, then add the new label to the end of the HTMLString variable.

(What you have now does not append anything to the end of HTMLString variable)

2 Likes
3

Thank you , I get it.