Learn Form Validation by Building a Calorie Counter - Step 46

JavaScript
1

Tell us what’s happening:

I have been stuck on this step since yesterday and i am not sure where i am going wrong pls can i have some help with this step

Your code so far


const calorieCounter = document.getElementById('calorie-counter');
const budgetNumberInput = document.getElementById('budget');
const entryDropdown = document.getElementById('entry-dropdown');
const addEntryButton = document.getElementById('add-entry');
const clearButton = document.getElementById('clear');
const output = document.getElementById('output');
let isError = false;

function cleanInputString(str) {
  const regex = /[+-\s]/g;
  return str.replace(regex, '');
}

function isInvalidInput(str) {
  const regex = /\d+e\d+/i;
  return str.match(regex);
}

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

  const HTMLString = `
    <div class="entry">
      <label for="input${entryNumber}">Entry ${entryNumber} Name</label>
      <input type="text" id="input${entryNumber}" />
    </div>
  `;

  targetInputContainer.insertAdjacentHTML('beforeend', HTMLString);
}

Your browser information:

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

Challenge Information:

Learn Form Validation by Building a Calorie Counter - Step 46

2

Hi @mbas

You should have a label element inside your template literal.

Try removing the div element, the for attribute, and the input element, as the instructions did not mention them.

Happy coding

2 Likes
3 
const calorieCounter = document.getElementById('calorie-counter');
const budgetNumberInput = document.getElementById('budget');
const entryDropdown = document.getElementById('entry-dropdown');
const addEntryButton = document.getElementById('add-entry');
const clearButton = document.getElementById('clear');
const output = document.getElementById('output');
let isError = false;

function cleanInputString(str) {
  const regex = /[+-\s]/g;
  return str.replace(regex, '');
}

function isInvalidInput(str) {
  const regex = /\d+e\d+/i;
  return str.match(regex);
}

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

  const HTMLString = `
      <label ="input${entryNumber}">Entry ${entryNumber} Name</label>
  `;

  targetInputContainer.insertAdjacentHTML('beforeend', HTMLString);
}

do u mean this

4

Does it work?

If it works, then yes.

If not, look for any errors or hints and try to implement the advice.

1 Like
5

it still does not work i don’t why it is not

6

Hi there!
We can’t see, what’s you did to your code now.

1 Like
7

Is there an error message or hint?

8

Hi @mbas

Please remove …

from the label opening tag.

Happy coding

9 
const budgetNumberInput = document.getElementById('budget');
const entryDropdown = document.getElementById('entry-dropdown');
const addEntryButton = document.getElementById('add-entry');
const clearButton = document.getElementById('clear');
const output = document.getElementById('output');
let isError = false;

function cleanInputString(str) {
  const regex = /[+-\s]/g;
  return str.replace(regex, '');
}

function isInvalidInput(str) {
  const regex = /\d+e\d+/i;
  return str.match(regex);
}

function addEntry() {
  const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
  const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
  const HTMLString = `
  <label ="input${entryNumber}">Entry ${entryNumber} Name</label>
  `;

  targetInputContainer.insertAdjacentHTML('beforeend', HTMLString);
}
  `;
}
```You should have a label element inside your template literal.
Your label element should have the text Entry ${entryNumber} Name. this is what it says
10

Hi there!
The instructions is not mentioned to add that value to the label tag.

11 
const calorieCounter = document.getElementById('calorie-counter');
const budgetNumberInput = document.getElementById('budget');
const entryDropdown = document.getElementById('entry-dropdown');
const addEntryButton = document.getElementById('add-entry');
const clearButton = document.getElementById('clear');
const output = document.getElementById('output');
let isError = false;

function cleanInputString(str) {
  const regex = /[+-\s]/g;
  return str.replace(regex, '');
}

function isInvalidInput(str) {
  const regex = /\d+e\d+/i;
  return str.match(regex);
}

function addEntry() {
  const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
  const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
  const HTMLString = `
  <label =>Entry ${entryNumber} Name</label>
  `;

  targetInputContainer.insertAdjacentHTML('beforeend', HTMLString);
}
  `;
}

Unterminated template. (28:3)

26 | targetInputContainer.insertAdjacentHTML(‘beforeend’, HTMLString);
27 | }

28 | `;
| ^
29 | } this is what it says now when i remove it

12

Are you sure, that is correct label opening tag?

13

if it is not then pls tell what it is

14

Look at your other label tags and see what they look like.

Or do an Internet search for HTML Label syntax.

15

You need to learn basic html first. Here is the link to basic html challenge:

16

The text attribute won’t be used. You will enter the label element like this without any attribute. For example,
< label>. Your text appears there< /label> in your code by using template literal syntax.