Learn Form Validation by Building a Calorie Counter - Step 48

This step does not complete, the message being returned is ’ Your input element should have a min attribute set to 0.', it is referring to the last input element.

It appears that this challenge has created a few posts with this issue but none have been useful in helping me solve it.

Your code so far

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>
  <input type="number" min=0 placeholder="Calories" id="${entryDropdown.value}-${entryNumber}-calories"/>`;

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:122.0) Gecko/20100101 Firefox/122.0

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 48

Hi, It’s resolved. The ‘min’ attribute required quotes around the ‘0’ value:

<input type="number" min="0" placeholder="Calories" id="${entryDropdown.value}-${entryNumber}-calories" />
1 Like

You may want to try placing the zero it in quotes. I think when you’re defining things inside the input, they must be inside quotes. Maybe a syntax thing? (I don’t a have a link to give a better explanation)

1 Like

Hi Verite, thanks for the response :slight_smile: That is exactly what was done and it resolved the issue.